在vue中使用ArcGIS API调取天地图底图并与ArcGIS Server发布的矢量瓦片相叠加 |
您所在的位置：网站首页 › gis如何加载天地图 › 在vue中使用ArcGIS API调取天地图底图并与ArcGIS Server发布的矢量瓦片相叠加 |
|
1.如何在vue中使用ArcGIS API
在vue中想要让Webpack认识ArcGIS API需要安装esri-loader。 第一步：通过npm安装esri-loader安装命令：npm install esri-loader -S 第二步：在需要使用ArcGIS API的页面进行引入HTML部分：（注意：地图是要挂载在dom元素上的） JS部分： import esriLoader from 'esri-loader' 第三步：引入ArcGIS 的一些在线API，和在线样式链接（注意：为了获得地图更快的加载速度，和稳定性，我们需要离线部署一套ArcGIS API，过几天会单独出一期如何离线部署ArcGIS API）JS部分： mounted() { const option = {url:'https://js.arcgis.com/4.3/'}; }CSS部分： @import url("https://js.arcgis.com/4.3/esri/css/main.css") 第四步：开始书写我们加载地图的代码注意：esriLoader有以下几个方法： getScript() 从库里面获取JS文件；get the script injected by this libraryisLoaded() 检测模块是否加载完成；loadModules（[ ],options）用于加载ArcGIS模块；loadCss（url）用于加载css文件；loadScript（{url:‘xxxxxxxx’}）将js加载到页面上在mounted钩子中进行挂载 mounted() { const option = {url: 'https://js.arcgis.com/4.3/'} //注意：不同版本的ArcGIS API的用法可能不一样 esriLoader.loadModules ([ "dojo/dom", //该模块定义了核心的dojo DOM构建API。 "dojo/on", //是用于DOM节点和其他事件发出对象的通用事件处理程序模块，提供规范化的事件侦听和事件分派功能。 "dojo/_base/declare", //包含用于定义Dojo类的函数，这些类支持Dojo中的标准面向对象的概念，使用来模拟基于类的继承的功能。 "dojo/json", //是基于标准的ES5的JSON对象进行JSON解析和序列化的模块 "dojo/_base/lang", //包含用于支持多态和其他语言构造的功能，这些功能是该工具包其余部分的基础。 "dojo/_base/url", "dojo/string", //提供了一些简单的字符串操作实用程序（包括修剪（trim）、填充（pad）、重复（rep）、替换（replace）） "dojo/dom-construct", //该模块定义了核心的dojo DOM构建API。此模块的返回变量的约定为domConstruct。 "dojo/number", //包含用户展示javascript Number对象的方法：格式化、解析和舍入 "esri/Map", //Map类创建一个容器和必须的DOM结构，以添加图层、图形、信息窗口和其他导航控件 "esri/geometry/Extent", //边界框的最小和最大X坐标和Y坐标 "esri/layers/support/TileInfo", //包含有关TileLayers、ElevationLayers和Web TileLayers的切片方案的信息 "esri/layers/support/LOD", //一个ArcGISTiledMapServiceLayer有许多的LOD（细节层次）的。每个LOD对应于给定比例或分辨率的地图。 "esri/geometry/SpatialReference", //定义视图、图层或任务参数的空间参考。这表示用于在地图中定位地理要素的投影坐标系或地理坐标系。每个投影的地理坐标系都是由众多周知的ID（WKID）或定义字符串（WKT）定义。 "esri/geometry/Point", //由X坐标和Y坐标定义的位置。它可以是地图单位或屏幕单位。 "esri/views/MapView", //MapView 显示Map实例的2D视图。 "esri/views/SceneView", //SceneView 显示Map实例的3D视图。 "esri/layers/WebTileLayer", //提供了一种简单的方法来将非ArcGIS Server地图图块添加为地图的图层。构造函数，通常如下的图案的URL模板http://some.domain.com/${level}/${col}/${row}/,其中level对应于缩放级别和列和行表示瓷砖的列和行。 "esri/layers/VectorTileLayer", //它呈现缓存的数据矢量切片。它与WebTiledLayer的相似之处在于呈现了缓存的数据，但是WebTileLayer渲染为一系类图像，而不是矢量数据。 "esri/layers/TileLayer", //允许我们使用ArcGIS Server REST APi公开的缓存地图服务，并将其作为图块图层添加到地图。缓存的服务从缓存访问图块，而不是动态渲染图像。因为它们被缓存，所以平铺的图层比MapImageLayers的渲染速度更快。要创建TileLayer的实例，我们必须引用缓存的地图服务的URL。 "esri/layers/MapImageLayer", //允许我们显示和分析来自地图服务中定义的子图层的数据，并导出图像而不是要素。 "esri/widgets/LayerList", //LayerList小部件提供了允许切换图层可见性的图层列表。 "esri/core/urlUtils", //使用URL的实用方法。 "esri/core/JSONSupport", // "dojo/domReady!" //是AMD加载的插件，它将等待DOM完成加载后再返回。 ],option).then(([ dom, on, declare, JSON, lang, url, string, domConstruct, number, Map, Extent, TileInfo, LOD, SpatialReference, Point, MapView, SceneView, WebTileLayer, VectorTileLayer, TileLayer, MapImageLayer, LayerList, urlUtils, JSONSupport ])=> { //创建一个OGC标准的天地图WMTS定制图层 var TiandituWMTSLayer = WebTileLayer.createSubclass([JSONSupport], { declaredClass: "TiandituWMTSLayer", normalizeCtorArgs: function(b, c) { return "string" === typeof b ? lang.mixin({ urlTemplate: b }, c || {}) : b; }, getDefaults: function(b) { var sp = new SpatialReference({ wkid: 4490 }); var c = new Extent(-180, -90, 180, 90, sp); return lang.mixin(this.arguments, { //this.inherited(arguments) fullExtent: c, tileInfo: new TileInfo({ rows: 256, cols: 256, dpi: 90.71428571428571, format: "PNG8", compressionQuality: 0, origin: new Point({ x: -180, y: 90, spatialReference: sp }), spatialReference: sp, lods: [ new LOD({ level: 1, resolution: 0.703125, scale: 295497593.05875003 }), new LOD({ level: 2, resolution: 0.3515625, scale: 147748796.52937502 }), new LOD({ level: 3, resolution: 0.17578125, scale: 73874398.264687508 }), new LOD({ level: 4, resolution: 0.087890625, scale: 36937199.132343754 }), new LOD({ level: 5, resolution: 0.0439453125, scale: 18468599.566171877 }), new LOD({ level: 6, resolution: 0.02197265625, scale: 9234299.7830859385 }), new LOD({ level: 7, resolution: 0.010986328125, scale: 4617149.8915429693 }), new LOD({ level: 8, resolution: 0.0054931640625, scale: 2308574.9457714846 }), new LOD({ level: 9, resolution: 0.00274658203125, scale: 1154287.4728857423 }), new LOD({ level: 10, resolution: 0.001373291015625, scale: 577143.73644287116 }), new LOD({ level: 11, resolution: 0.0006866455078125, scale: 288571.86822143558 }), new LOD({ level: 12, resolution: 0.00034332275390625, scale: 144285.93411071779 }), new LOD({ level: 13, resolution: 0.000171661376953125, scale: 72142.967055358895 }), new LOD({ level: 14, resolution: 8.58306884765625e-5, scale: 36071.483527679447 }), new LOD({ level: 15, resolution: 4.291534423828125e-5, scale: 18035.741763839724 }), new LOD({ level: 16, resolution: 2.1457672119140625e-5, scale: 9017.8708819198619 }), new LOD({ level: 17, resolution: 1.0728836059570313e-5, scale: 4508.9354409599309 }), new LOD({ level: 18, resolution: 5.3644180297851563e-6, scale: 2254.4677204799655 }), new LOD({ level: 19, resolution: 2.6822090148925781e-6, scale: 1127.2338602399827 }), new LOD({ level: 20, resolution: 1.3411045074462891e-6, scale: 563.61693011999137 }) ] }) }); }, properties: { copyright: "", legendEnabled: { json: { readFrom: ["showLegend"], read: function(b, c) { return null != c.showLegend ? c.showLegend : !0; } } }, levelValues: { dependsOn: ["tileInfo"], get: function() { var b = []; if (!this.tileInfo) return null; this.tileInfo.lods.forEach(function(c) { b[c.level] = c.levelValue || c.level; }, this); return b; } }, popupEnabled: { json: { readFrom: ["disablePopup"], read: function(b, c) { return null != c.disablePopup ? !c.disablePopup : !0; } } }, spatialReference: new SpatialReference({ wkid: 4326 }), subDomains: null, tileServers: { value: null, dependsOn: ["urlTemplate", "subDomains", "urlPath"], get: function() { var b = new url(this.urlTemplate), c = b.scheme ? b.scheme + "://" : "//", a = c + b.authority + "/", e = this.subDomains, d, f = []; -1 === b.authority.indexOf("{subDomain}") && f.push(a); e && (0 < e.length && 1 < b.authority.split(".").length) && e.forEach(function(a, e) { -1 < b.authority.indexOf("{subDomain}") && (d = c + b.authority.replace(/\{subDomain\}/gi, a) + "/"); f.push(d); }, this); return (f = f.map(function(b) { "/" !== b.charAt(b.length - 1) && (b += "/"); return b; })); } }, urlPath: { dependsOn: ["urlTemplate"], get: function() { if (!this.urlTemplate) return null; var b = this.urlTemplate, a = new url(b); return b.substring( ((a.scheme ? a.scheme + "://" : "//") + a.authority + "/") .length ); } }, urlTemplate: null }, getTileUrl: function(b, a, d) { b = this.levelValues[b]; var e = this.tileServers[a % this.tileServers.length] + string.substitute(this.urlPath, { level: b, col: d, row: a }); e = e .replace(/\{level\}/gi, b) .replace(/\{row\}/gi, a) .replace(/\{col\}/gi, d); return urlUtils.addProxy(e); } }); var options = { id: "tianDiTu_vec", label: "天地图矢量地图", visible: true, opacity: 1, style: "default", wmtslayer: "vec", tileMatrixSet: "c", format: "tiles", urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=0ecb0b40b30f30fba48a13064f485e19", copyright: "TiandituWMTS", subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"] }; var layer1 = new TiandituWMTSLayer(options); var map = new Map({ layers: [layer1] }); //矢量瓦片 var tileLayer = new VectorTileLayer({ title: "矢量瓦片图层", id: "vectorTileLayer", url: //自己的ArcGIS Server发布的服务地址 visible: true }); map.add(tileLayer); var view = new MapView({ container: "map", zoom: 14, center: [100.98268973979392, 21.844773808801815], map: map }); // create a layer list widget var layerList = new LayerList({ view: view }); view.ui.add(layerList, "bottom-right"); } ); } 其中不足之处，请多多指教 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |