MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MchCesium > 多边形

多边形

1.构造方法：

const polygon = new MchCesium.Polygon(id, polygonGraphics, positions, option, holes)

参数说明：

id(String)：多边形id

polygonGraphics(Object)：多边形配置。具体配置参考http://cesium.xin/cesium/cn/Documentation1.62/PolygonGraphics.html

positions(Array)。多边形顶点坐标（按照顺序）。如[[119.12, 23.4], [118.23, 25.1], [118.34, 34.4], [117.34, 35.11]]

option(Object)：其他配置。包含属性：needTrans 是否需要gcj转wgs84；editable 是否可编辑；outline 边框配置{width: 3, color: '#fff', style: 'solid'}；extData 扩展数据；onAdjust(Function) 鼠标拖拽编辑多边形后的回调，回调函数的参数为当前多边形对象。

holes(Array)。如果多边形为环形，则为内环顶点坐标集。

2.createPolygonEntity创建

实例：polygon.createPolygonEntity();

3.changePolygonEditable设置可编辑性

实例：polygon.changePolygonEditable(editable);

参数说明：Editable: 设置多边形编辑状态（true可编辑，false不可编辑）

4.destroy销毁

实例：polygon.destroy()

5.show显示

实例：polygon.show();

6.hide隐藏

实例：polygon.hide();

7.setZIndex设置层级

实例：Polygon.setZIndex(zIndex)

参数说明：zIndex: {number}设置层级数

8.setCoordinates设置顶点坐标

实例：setCoordinates(positions)

参数说明：Positions：多边形顶点坐标（按照顺序）。如[[119.12, 23.4], [118.23, 25.1], [118.34, 34.4], [117.34, 35.11]]

9.onClick监听点击事件

实例：onClick(callback)

参数说明：callback回调函数

10.完整代码实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多边形-热力图</title> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <style type="text/css"> .MchCesium-mapContainer{width: 100%;height: 100%;position: relative;overflow: hidden;} #btn_bar{position: absolute;bottom: 10px;left: 20px;z-index: 1000;} #btn_bar button{padding: 5px;border-radius: 3px;margin-bottom: 5px;} </style> </head> <body> <div id="containerId" class="MchCesium-mapContainer"></div> <div id="btn_bar"> <button onclick="setPolygon()">设置多边形不可编辑</button> <button onclick="delPolygon()">销毁多边形</button> <button onclick="showEven()">显示</button> <button onclick="hideEven()">隐藏</button> <button onclick="setZIndex()">设置层级</button> <button onclick="bandClick()">绑定点击事件</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); // 多边形配置 let polygonGraphics = { material: Cesium.Color.RED.withAlpha(0.5), outlineColor: Cesium.Color.WHITE, outlineWidth: 100.0, } // 多边形顶点坐标（按照顺序） let positions = [[104.460887, 31.8291385], [104.462587, 31.8291385], [104.46302587, 31.8311385], [104.4609587, 31.8308385]] // 其他配置 let option = { needTrans: true, editable: true, outline: { color: '#fff', width: 2.0, style: 'dashed' }, onAdjust: function (e) { console.log('多边形调整，当前多边形：', e); } } // 实例化对象 let polygon = new MchCesium.Polygon('testPolygon', polygonGraphics, positions, option); // 加载多边形 polygon.createPolygonEntity(); // 聚焦 MchCesium.flyto(104.460887, 31.8291385); // 设置多边形不可编辑 function setPolygon(){ polygon.changePolygonEditable(false); } // 销毁多边形 function delPolygon(){ polygon.destroy() } // 显示 function showEven(){ polygon.show(); } // 隐藏 function hideEven(){ polygon.hide(); } // 设置显示层级 function setZIndex(){ polygon.setZIndex(5) } // 绑定 - 监听点击事件 function bandClick(){ polygon.onClick(function(e) { console.log('点击了多边形') console.log(e); }) } </script> </body> </html>

效果：

Demo地址：

https://mhc.ixiera.com/html/cesiumDemo/demo_polygon.html

本文档来自—MCHMAP 丨 地图引擎平台