1. I use vue for development and design.
tip_1: Both the Map class and the MapView class can be received by a global variable in the data outside the methods
tip_2: In the method of creating a map, it is best to only instantiate the Map class and the MapView class. As for other functions, it should be instantiated when creating a new method when needed; because I found the Map class and MapView during development. After the class is instantiated, it can be assigned to a global variable, but not necessarily for other classes. I don't know the specific reason.
tip_3: Other classes should also be assigned to global variables. In the method of creating a map, it cannot be successful, probably because of timing (code execution order).
tip_4: If the ArcGIS class instance to be used is used according to the needs of the event, it should be destroyed in time after the event is over to avoid any unknown errors.
tip_5: I don’t know why, when I instantiate the map, every time I enter the page, I have to report a maximum stack overflow error, which makes it impossible for me to load the map when I enter the map page for the first time. According to debugging, I found that the code has not been able to enter loadModules( ), the map can only be loaded once the browser is refreshed. Later, I called the _createMap() method twice in created, so that the map could be loaded normally for the first time. I don't know exactly why this error occurred.
Code to create the map:
// 创建地图
_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);
});
},Code to call other classes of 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);
});
},Destroy the control:
// 取消按钮
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 = "";
},