前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ArcGis中Polygon方法应用

ArcGis中Polygon方法应用

作者头像
inline705
发布2021-12-09 15:30:03
1.3K0
发布2021-12-09 15:30:03
举报
文章被收录于专栏:vue+ArcGisvue+ArcGis

一、前言

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

二、效果图

两种背景色的多边形

三、Polygon

官方解释

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

创建一个多边形

代码语言: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)
  })
})  
复制代码
image.png
image.png

写在最后

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021年11月08日,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、前言
  • 二、效果图
  • 三、Polygon
    • 写在最后
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档