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

圆

1.构造方法：

let circleEntity1 = new MchCesium.Circle(id, cPosition, radius, option,ellipseGraphics)

实例

var option = { needTrans: true, extData: { name: 'cc1', type: '123', ggg: '就会加快和' }, } var ellipseGraphics = { fill: true, material: Cesium.Color.BLUE, } let circleEntity1 = new MchCesium.Circle('circle-1', [104.460287, 31.831185], 50, option, ellipseGraphics)

效果

2.参数说明

id(String)：点标记id(全局唯一，不可重复)

cPosition(Array)：中心点坐标(经纬度数组，如[119.34, 32.34])

radius{number}：半径

option {object} 其他配置项。包含如下属性：needTrans(Boolean)：是否需要gcj转wgs84; 可选(默认：否false);extData(Object) 自定义数据;可选

ellipseGraphics{object} 同Cesium中ellipseGraphics配置，具体配置参考如下链接：http://cesium.xin/cesium/cn/Documentation1.62/EllipseGraphics.html

3.show显示/hide隐藏圆

显示：circleEntity1.show();

隐藏：circleEntity1.hide();

4. remove销毁圆

实例：circleEntity1.remove();

5. getCircleData获取圆相关数据

实例：var data = circleEntity1.getCircleData();

返回值说明：

center中线点坐标（三维笛卡尔空间直角坐标系Cartesian3）

radius半径

extData 自定义数据

6.CircleDrawer绘制圆形

实例：let circleEntity2 = new MchCesium.CircleDrawer(id, option, ellipseGraphics)

参数说明：

id(String)：点标记id(全局唯一，不可重复)

option {object} 其他配置项。包含如下属性：needTrans(Boolean)：是否需要gcj转wgs84,可选(默认：否false);extData(Object) 自定义数据;可选

ellipseGraphics{object} 同Cesium中ellipseGraphics配置，具体配置参考如下链接：http://cesium.xin/cesium/cn/Documentation1.62/EllipseGraphics.html

实例

var option2 = { needTrans: true, extData: { name: 'cc1', type: '123', ggg: '就会加快和' }, } var ellipseGraphics2 = { fill: true, material: Cesium.Color.RED, zIndex: 6, } let circleEntity2 = new MchCesium.CircleDrawer('circle-2', option2, ellipseGraphics2)

7.完整代码示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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/Cesium-1.120/CesiumHeatmap.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <title>Document</title> <style> body { position: relative; } .btnbar { position: absolute; top: 10px; left: 10px; } button { margin: 10px; border: solid 1px #ccc; border-radius: 3px; padding: 5px 10px; } </style> </head> <body> <div id="cesiumContainer"></div> <div class="btnbar"> <button id="show">显示圆</button> <button id="hide">隐藏圆</button> <button id="get-data-btn">获取数据</button> <button id="draw">动态绘制圆</button> </div> <script> const view3D = MchCesium.init('cesiumContainer', true) var option = { needTrans: true, extData: { name: 'cc1', type: '123', ggg: '就会加快和' }, } var ellipseGraphics = { fill: true, material: Cesium.Color.BLUE, } let circleEntity1 = new MchCesium.Circle('circle-1', [104.460287, 31.831185], 50, option, ellipseGraphics) MchCesium.viewer.zoomTo(MchCesium.viewer.entities) document.getElementById('show').onclick = function() { circleEntity1.show() } document.getElementById('hide').onclick = function() { circleEntity1.hide() } document.getElementById('get-data-btn').onclick = function() { var data = circleEntity1.getCircleData(); console.log(data); } var option2 = { needTrans: true, extData: { name: 'cc1', type: '123', ggg: '就会加快和' }, } var ellipseGraphics2 = { fill: true, material: Cesium.Color.RED, zIndex: 6, } document.getElementById('draw').onclick = function() { console.log('触发绘制圆') let circleEntity2 = new MchCesium.CircleDrawer('circle-2', option2, ellipseGraphics2) } </script> </body> </html>

效果：

Demo地址：

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

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