在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 library
- isLoaded() 检测模块是否加载完成；
- 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");
}
);
}