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

矩形

1.构造方法：

const rect = new MchCesium.Rectangle(id, rectGraphics, bounds, option)

参数说明：

id(String)：矩形id

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

bounds(Object) 矩形西南顶点和东北顶点坐标 let bounds = {southwest: [119.12, 34.11], northeast: [119.22, 34.23]}

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

2.createRectangleEntity() 创建

实例：rect.createRectangleEntity()

3.changeRectEditable() 设置可编辑性

实例：rect.changeRectEditable(editable);

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

4.destroy() 销毁

实例：rect.destroy();

5.show() 显示

实例：rect.show();

6.hide() 隐藏

实例：rect.hide();

7.setZIndex(zIndex) 设置层级

实例：rect.setZIndex(zIndex);

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

8.setCoordinates(bounds) 设置边界

实例：rect.setCoordinates(bounds);

参数说明：矩形边界(bounds参数格式同构造函数中bounds参数)

9.onClick(callback) 监听click事件

实例：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="setCoordinates()">设置边界</button> <button onclick="bandClick()">绑定点击事件</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); let rectbounds = { southwest: [104.459587, 31.8291385], northeast: [104.460587, 31.8301385] } let option = { needTrans: true, editable: true, outline: { color: '#fff', width: 2.0, style: 'solid' }, onAdjust: function (e) { console.log('矩形调整，当前矩形：', e); } } let rectGraphics = {         material: Cesium.Color.RED.withAlpha(0.5),         outlineColor: Cesium.Color.WHITE,         outlineWidth: 100.0, }  let rect = new MchCesium.Rectangle('testrect', rectGraphics, rectbounds, option) rect.createRectangleEntity() // 聚焦 MchCesium.flyto(104.460887, 31.8291385); // 设置不可编辑 function setPolygon(){ rect.changeRectEditable(false); } // 销毁 function delPolygon(){ rect.destroy() } // 显示 function showEven(){ rect.show(); } // 隐藏 function hideEven(){ rect.hide(); } // 设置显示层级 function setZIndex(){ rect.setZIndex(5) } // 设置边界 function setCoordinates(){ let bounds = { southwest: [104.458587, 31.8281385], northeast: [104.460587, 31.8301385] } rect.setCoordinates(bounds); } // 绑定 - 监听点击事件 function bandClick(){ rect.onClick(function(e) { console.log('点击了矩形') console.log(e); }) } </script> </body> </html>

效果：

Demo地址：

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

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