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

矩形鼠标绘制工具

1.构造方法

const rectDrawer = new MchCesium.RectangleDrawer(id, rectGraphics)

参数说明：

id(String) 鼠标绘制工具id

rectGraphics(Object)：矩形配置。具体配置参考http://cesium.xin/cesium/cn/Documentation1.62/RectangleGraphics.html

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

2.open() 开启绘制

实例：rectDrawer.open()

3.close() 关闭绘制

实例：rectDrawer.close()

4.onFinish(callback) 监听绘制结束

基础方法：rectDrawer.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="drawRect()">开启绘制</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); // 聚焦 MchCesium.flyto(104.461587,31.831195) // 测试数据 let rectGraphics = { material: Cesium.Color.RED.withAlpha(0.5), outlineColor: Cesium.Color.WHITE, outlineWidth: 100.0, } let option = { needTrans: true, editable: true,} const rectDrawer = new MchCesium.RectangleDrawer('testRectDrawer', rectGraphics, option) function drawRect() { rectDrawer.open() } rectDrawer.onFinish(function(e) { console.log('监听绘制结束') rectDrawer.close() }) </script> </body> </html>

效果：

Demo地址：

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

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