Arcgisapi for js 在地图上通过鼠标实时画面

时间:2021-06-02 11:42:22   收藏:0   阅读:0
 draw() {
      this.view.container
        .querySelector(".esri-view-root > .esri-view-surface")
        .setAttribute("data-cursor", "crosshair");//设置鼠标的样式变为十字架
      let graphicslayer = new this.esriMudules.GraphicsLayer();//创建一个图形图层来存储画出来的图层。也可以直接将画出来的图层加载到view中,不用图层(使用下面注释掉的代码)
      this.map.add(graphicslayer);
      let activeGraphic = null;//存储当前正在画的图形
      let draw = this.esriMudules.Draw({ view: this.view });//创建画图对象
      let drawAction = draw.create("polygon", { mode: "click" });//定义画的几何类型和画图方式
      drawAction.on(//定义画图触发的事件
        [
          "vertex-add", //单击鼠标添加点
          "vertex-remove",
          "cursor-update", //鼠标移动的事件
          "redo",
          "undo",
          "draw-complete",//双击鼠标完成画图时触发事件
        ],
        (evt) => {
          //console.log(evt.type);
  //当鼠标移动和点击添加点的时候,判断画的点等于两个时显示线,大于两个时显示面
          if (evt.type == "vertex-add" || evt.type == "cursor-update") {
            if (evt.vertices.length < 2) {
              return;
            } else if (evt.vertices.length == 2) {
              if (activeGraphic) {//需要先移除之前画的然后在加入现在画的
                //this.view.graphics.remove(activeGraphic);
                graphicslayer.graphics.remove(activeGraphic);
              }
              let polyline = this.esriMudules.Polyline({
                paths: [evt.vertices],
                spatialReference: this.view.spatialReference,
              });
              activeGraphic = new this.esriMudules.Graphic({
                geometry: polyline,
                symbol: {
                  type: "simple-line",
                  color: [78, 201, 162],
                  width: "2px",
                  style: "solid",
                },
              });
              //this.view.graphics.add(activeGraphic);
              graphicslayer.graphics.add(activeGraphic);
            } else {
              if (activeGraphic) {
                //this.view.graphics.remove(activeGraphic);
                graphicslayer.graphics.remove(activeGraphic);
              }
              let ring = [...evt.vertices, evt.vertices[0]];//闭合环
              let polygonGeometry = new this.esriMudules.Polygon({
                rings: [ring],
                spatialReference: this.view.spatialReference,
              });

              // 将逆时针转到顺时针,是为了解决arcgisapi for js逆时针不填充的问题
              if (!polygonGeometry.isClockwise(ring)) {
                for (
                  let from = 1, to = ring.length - 2;
                  from < to;
                  ++from, --to
                ) {
                  let c = ring[from];
                  ring[from] = ring[to];
                  ring[to] = c;
                }
                polygonGeometry = new this.esriMudules.Polygon({
                  rings: [ring],
                  spatialReference: this.view.spatialReference,
                });
              }

              // 避免自交
              if (polygonGeometry.isSelfIntersecting) {
                graphicslayer.graphics.add(activeGraphic);
                return;
              }

              activeGraphic = new this.esriMudules.Graphic({
                geometry: polygonGeometry,
                symbol: {
                  type: "simple-fill",
                  color: [78, 201, 162, 0.3],
                  style: "solid",
                  outline: {
                    color: [255, 255, 255, 0.5],
                    width: "2px",
                  },
                },
              });
              //this.view.graphics.add(activeGraphic);
              graphicslayer.graphics.add(activeGraphic);
            }

            graphicslayer.add(this.activeGraphic);
          }
          if (evt.type == "draw-complete") {//完成画图后获取画的图层,并将鼠标变回为箭头
            console.log(evt.vertices);
            this.view.container
              .querySelector(".esri-view-root > .esri-view-surface")
              .setAttribute("data-cursor", "default");
          }
        }
      );
    },
评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!