ArcGis多边形覆盖面不理想？来让我告诉你怎么改

inline705

发布于 2021-12-09 15:33:29

9150

发布于 2021-12-09 15:33:29

文章被收录于专栏：vue+ArcGis

先上效果图

一、前言

在Vue ArcGis鼠标打点、中心打点绘制多边形这篇文章里给大家讲了ArcGis如何绘制多边形，那在ArcGis绘制多边形后多边形边界不理想怎么办？想调整多边形覆盖面怎么办？今天这里给出一种解决方案以供各位看官参考。

二、监听地图（mapView）点击事件

初始化ArcGis地图时监听地图（mapView）的点击事件，获取到click的回调参数event，这里我们可以写一个方法去接收这个event参数，这样地图的点击处理逻辑都可以放在这个方法里

// 监听地图（mapView）点击过程
mapView.on("click", (event) => {
  this.mapLayerController(event);
});
复制代码

三、获取 hitTest

hitTest

返回与指定屏幕坐标相交的每一层的最顶层要素。如果命中相交要素，以下图层类型将返回结果：GraphicsLayer、FeatureLayer、CSVLayer、 GeoRSSLayer、KMLLayer和StreamLayer。

当地图点击事件与以上相关图层中的元素相交时会返回相关结果，而我们将我们的多边形绘制在了GraphicsLayer层，当点击多边形时hitTset会返回我们当前点击的这个多边形实例。

mapLayerController(event) {
    this.mapViewController.hitTest(event).then(({ results }) => {
        // 接收点击实例
    })
}
复制代码

四、遍历多边形数组，处理已绘制好的的多边形图形

在hitTest返回的多边形实例内判断绘制多边形时打的点位数组是否为空，因为编辑图形时update会创建一个新的可编辑的多边形，需要先删除已绘制好的多边形图形。

为什么在hitTest内删，因为我们要确保只有在确认要进行编辑多边形操作时再进行旧多边形的删除

        // results 图形数组
        results.forEach((result) => {
            // 判断绘制多边形时打的点位数组是否为空
            if (this.spotArray.length) {
              let sketchGraphicsLayer = this.mapViewController.map.findLayerById("sketchGraphicsLayer");
              let rm = [];
              sketchGraphicsLayer.graphics.items.forEach((item) => {
                // 字符串进循环
                if (typeof item.attributes === 'string') {
                  if (item.attributes.includes('point') || item.attributes.includes('polyline')){
                    rm.push(item);
                  }
                  if (item.attributes === 'remove') {
                    item.attributes = undefined;
                  }
                }
              });
              sketchGraphicsLayer.removeMany(rm);
            }
        })
复制代码

五、调用`undate`方法编辑图形

将需要编辑的图形传进undate方法

    this.sketchViewModel.update([result.graphic], {
     tool: "reshape"
    }).then(v => {
    
    });
复制代码

写在最后

文章如有不足之处请指出，一起学习交流，万分感谢~~~

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年11月03日，如有侵权请联系 cloudcommunity@tencent.com 删除

数据结构

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

数据结构

编程算法

登录后参与评论

0 条评论

热度