MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MchCesium > 多边形鼠标绘制工具

多边形鼠标绘制工具

1.构造方法：

const polygonDrawer = new MchCesium.PolygonDrawer(id, polygonGraphics)

参数说明：

id(String) 鼠标绘制工具id

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

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

应用说明：

开启绘制后，再地图上点击点绘制多边形，右键点击地图结束绘制；

结束绘制后自动触发onFinish监听绘制结束事件；

在onFinish绘制结束监听中close关闭绘制；

2.open开启绘制

实例：polygonDrawer.open()

3.close关闭绘制

实例：polygonDrawer.close()

4.onFinish监听绘制结束

实例：polygonDrawer.onFinish(callback)

参数说明：callback回调函数

5.完整代码实例：

<!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="drawPolygon()">开启绘制</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); // 聚焦 MchCesium.flyto(104.461587,31.831195) // 测试数据 let polygonGraphics = { material: Cesium.Color.RED.withAlpha(0.5), outlineColor: Cesium.Color.WHITE, outlineWidth: 100.0, } let option = { outline: { color: '#00ff00', width: 2.0, style: 'solid' }, onAdjust: function (e) { console.log('多边形调整', e); } } const polygonDrawer = new MchCesium.PolygonDrawer('testPolygonDrawer', polygonGraphics, option) function drawPolygon() { polygonDrawer.open() } polygonDrawer.onFinish(function(e) { console.log('监听绘制结束') polygonDrawer.close() }) </script> </body> </html>

效果：

Demo地址：

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

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