ArcGIS地图--Vue开发--外部按钮与地图控件交互

任务一：浏览器页面--左边显示片区列表，右边显示地图

方法：准备三个<div>容器，第一个为总容器，覆盖整个页面；第二个和第三个为第一个容器的子容器，各自占据页面左右两边。

任务二：

1.点击列表的新增按钮后，可以在地图上绘制新片区；

2.片区绘制完毕时，左边片区列表处弹出新增卡片，卡片中可以填写新增的片区名和备注信息，同时显示不可编辑的片区坐标数组；

3.点击确认创建后，提示创建信息，如果创建成功，刷新片区列表，显示新增片区后的列表。

关键方法：在创建地图的方法中，设置“新增”按钮的监听事件，在监听事件中，调用地图绘图控件sketch；然后再为sketch设置监听事件，返回片区坐标数组。

          // 监听事件
          document.getElementById('addArea').addEventListener("click", ()=> {
            document.getElementById("viewDiv").focus();
            areaSketch.create("polygon", { mode: "click" });
            // 监听 sketch widget's create 事件.
            areaSketch.on("create", (event)=> {
              // check if the create event's state has changed to complete indicating
              // 当图形（graphic）创建完成（complete）时.
              if (event.state === "complete") {
                // 将画出来的多边形从绘图layer上移除
                // the completed graphic to the layer by default.
                graphicsLayer.remove(event.graphic);
                // 获取画出来的多边形的坐标数组
                this.rings = event.graphic.geometry.rings[0];
                // 新增表单的参数里 添加坐标数组
                this.form.rings = this.rings;
                console.log('graphic geometry', this.rings);
                // 该参数控制右边列表中的 新增片区卡片 是否弹出
                this.open = true;
              }
            });
          });