ArcGis中Polygon方法应用

一、前言

Polygon多边形在实际项目开发中有许多的妙用，可以用多边形圈出不同的区域并进行分类，不同的分类用不同的颜色进行区分并配已相关统计弹窗以达到一目了然的效果，今天我们来尝试绘制一个多边形在地图上。

二、效果图

两种背景色的多边形

三、Polygon

官方解释

一个多边形包含一个环数组和一个spatialReference(几何体的空间参考)。每个环都表示为一个点数组。环的第一个点和最后一个点必须相同。多边形还具有布尔值hasM和hasZ字段。

创建一个多边形

代码语言：javascript复制

// 定义多边形点位数组
const rings = [
  [  // first ring
    [-97.06138,32.837,35.1,4.8],
    [-97.06133,32.836,35.2,4.1],
    [-97.06124,32.834,35.3,4.2],
    [-97.06138,32.837,35.1,4.8]
  ], [  // second ring
    [-97.06326,32.759,35.4],
    [-97.06298,32.755,35.5],
    [-97.06153,32.749,35.6],
    [-97.06326,32.759,35.4]
  ]
];
// 实例化多边形
const polygon = new Polygon({
  attributes: "remove",              // 自定义信息，可在点击图形时获取，不限制类型
  hasZ: true,                        // 指示几何图形是否具有 M 值
  hasM: true,                        // 指示几何图形是否具有 z 值（高程）
  rings: rings,
  spatialReference: { wkid: 4326 }   // 几何体的空间参考
  symbol: {                          // 修改图形的样式
     type: "simple-fill",
     color: [0, 0, 0, 0.5],          // 改变图形填充色
     style: "solid",
     outline: {                      // 图形描边样式
       color: [236, 183, 103, 1],
       width: 1,                     // 图形描边宽度
     },
   },
  });
复制代码

将多边形添加至图层

代码语言：javascript复制

graphicsLayer.add(polygon);
复制代码

最终地图效果

验证attributes，可以看到控制台输出信息与我们配置的信息一致

代码语言：javascript复制

mapView.on("click", (event) => {
  mapView.hitTest(event).then((res)=>{
    console.log(res)
  })
})  
复制代码

写在最后

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

attributes polygon spatial 地图

0 人点赞