1.我是使用vue进行开发设计的。
tip_1：Map类和MapView类，都可以在methods外部的data中用一个全局变量接收
tip_2：创建地图的方法中，最好只实例化Map类和MapView类，至于其他的功能，应该在需要的时候，创建新方法时，进行实例化；因为我在开发时，发现Map类、MapView类实例化后，都可以赋给全局变量，其它类则不一定，具体原因我也不太清楚。
tip_3：其它类应该也可以赋给全局变量，在创建地图方法中，无法成功，可能是因为时机（代码执行顺序）的原因。
tip_4：如果要使用的ArcGIS类实例，是随事件需要而使用的，在事件结束后，要及时销毁，避免发生什么未知的错误。
tip_5：不知道为什么，我在实例化地图时，每次进入页面都要报一个最大堆栈溢出的错误，这使得我第一次进入地图页面加载不了地图，根据调试，发现代码一直进入不了loadModules()，只有刷新一次浏览器才可以加载地图。后来我在created里面调用了两次_createMap()方法，才可以正常在第一次加载地图，具体为什么会出现这个错误，我也不太清楚。
创建地图的代码：
// 创建地图
_createMap(){
//定义配置项
const options = {
url: 'https://js.arcgis.com/4.22/', // JS library
css: "https://js.arcgis.com/4.22/esri/themes/light/main.css", // CSS file
};
// 加载地图module
loadModules(
["esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch",
"esri/widgets/Sketch/SketchViewModel",
"esri/layers/WebTileLayer"], options).then(([esriConfig, Map, MapView, MapImageLayer, Graphic, GraphicsLayer, Sketch, SketchViewModel, WebTileLayer]) => {
// 配置地图API的key
esriConfig.apiKey = "有没有都行";
// 天地图token
let token = "必须有，自己去申请";
// 引入天地图矢量底图
let tiledLayer = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=" + token,
subDomains: ["t0"],
});
// 引入天地图矢量注记
let annoTiledLayer = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=" + token,
subDomains: ["t0"],
});
// 新建地图实例
this.map = new Map({
// basemap: "osm" // Basemap layer service
basemap: {
baseLayers: [tiledLayer, annoTiledLayer]
}
});
// 新建地图视图实例
this.mapView = new MapView({
map: this.map,
center: [精度,维度], // 初始显示的地图中心点
zoom: 12, // 缩放等级
container: "viewDiv" // Div element
});
// 实例化管道基础layer
let dylayer = new MapImageLayer({
url: "这是一个要展示在地图上的图层的url,没有也行"
});
// 将layer添加到地图
this.map.add(dylayer);
// 实例化一个绘图layer
this.graphicsLayer = new GraphicsLayer();
// 先将绘图layer添加到地图
this.map.add(this.graphicsLayer);
console.log('this.mapView.ui', this.mapView.ui);
});
},调用ArcGIS其它类的代码：
/** 新增片区按钮 */
handleAdd() {
console.log("请使用sketch工具绘制多边形");
//定义配置项
const options = {
url: 'https://js.arcgis.com/4.22/', // JS library
css: "https://js.arcgis.com/4.22/esri/themes/light/main.css", // CSS file
};
/********************************/
/* 地图相关操作 */
/********************************/
// 加载地图modules
loadModules([
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch",
"esri/widgets/Sketch/SketchViewModel"], options).then(
([GraphicsLayer, Sketch, SketchViewModel])=> {
this.addSketch = new Sketch({
layer: this.graphicsLayer,
view: this.mapView,
availableCreateTools: ["polygon"],
});
// 将实例化的 sketch ui 显示在地图视图上
this.mapView.ui.add(this.addSketch, "top-right");
// 为addSketch添加监听事件
this.listen = this.addSketch.on("create", (event)=> {
// check if the create event's state has changed to complete indicating
// 当图形（graphic）创建完成（complete）时.
if (event.state === "complete") {
// 将画出来的多边形从绘图layer上移除
this.graphicsLayer.remove(event.graphic);
// 获取画出来的多边形的
console.log('graphic geometry', event.graphic);
// 将数组坐标转换为字符串坐标---使用二维数组要报错---我也不清楚为什么
let strRings2 = JSON.stringify(event.graphic.geometry.rings);
console.log('strRings2: ', strRings2);
// console.log('typeof strRings2: ', typeof strRings2);
// 将字符串赋值给form，同时设置open，弹出卡片。--- 与 el-dialog标签相关
this.form.geom = strRings2;
this.open = true;
}
});
// console.log('listen: ', this.listen);
});
},销毁控件：
// 取消按钮
cancel() {
// 移除右上角的addSketch ui
this.mapView.ui.empty("top-right");
// 取消addSketch的监听事件
this.listen.remove();
// 摧毁addSketch
this.addSketch.destroy();
this.open = false;
this.reset();
},
/** 提交按钮 */
submitForm: function () {
// 移除右上角的addSketch ui
this.mapView.ui.empty("top-right");
// 取消addSketch的监听事件
this.listen.remove();
// 摧毁addSketch
this.addSketch.destroy();
// 提交事件---与地图无关
console.log(this.form);
this.$refs["form"].validate((valid) => {
if (valid) {
addArea(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
});
this.form.areaNo = "";
},