在vue中使用ArcGIS API调取天地图底图并与ArcGIS Server发布的矢量瓦片相叠加

瓦片相叠加"/>

在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元素上的）

<template><div id='map'> </div>
</template>

JS部分：
import esriLoader from 'esri-loader'

第三步：引入ArcGIS 的一些在线API，和在线样式链接（注意：为了获得地图更快的加载速度，和稳定性，我们需要离线部署一套ArcGIS API，过几天会单独出一期如何离线部署ArcGIS API）

JS部分：

mounted() {const option = {url:'.3/'};
}

CSS部分：

@import url(".3/esri/css/main.css")

第四步：开始书写我们加载地图的代码

注意：esriLoader有以下几个方法：

1. getScript() 从库里面获取JS文件；get the script injected by this library
2. isLoaded() 检测模块是否加载完成；
3. loadModules（[ ],options）用于加载ArcGIS模块；
4. loadCss（url）用于加载css文件；
5. loadScript（{url:‘xxxxxxxx’}）将js加载到页面上

在mounted钩子中进行挂载

mounted() {
const option = {url: '.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模板/${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/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 widgetvar layerList = new LayerList({view: view});view.ui.add(layerList, "bottom-right");});}

其中不足之处，请多多指教