ArcGIS for JavaScript开发的一些tips

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 = "";
      },