覆盖物群组

1.构造方法:

let overlayGroup = new MchCesium.OverlayGroup(overlayArr)

2.参数说明:

overlayArr(Array):覆盖物数组,目前overlay支持Cesium原生的Entity类型及MchCesium中定义的Marker,Polyline,Circle,Rectangle,Polygon和Label类型。

3.add(overlay) 将覆盖物加入overlayGroup中

overlayGroup.add(overlay)

4.remove(overlay) 将覆盖物从overlayGroup中移除

overlayGroup.remove(overlay)

5.show() overlayGroup中所有覆盖物显示

overlayGroup.show()

6.hide() overlayGroup中所有覆盖物隐藏

overlayGroup.hide()

7.clear() 清空overlayGroup中所有覆盖物

overlayGroup.clear()

* 谨慎使用该方法,该方法会销毁overlayGroup中所有覆盖物,若不再使用其中覆盖物建议及时指针置空避免内存泄漏。

8.getOverlays() 返回overlayGroup包含的所有覆盖物数组

overlayGroup.getOverlays()

9.代码示例:

<div id="containerId" class="MchCesium-mapContainer"></div> <div id="btn_bar"> <button onclick="show()">Overlay显示</button> <button onclick="hide()">Overlay隐藏</button> <button onclick="add()">添加多边形到OverlayGroup</button> <button onclick="remove()">将多边形从OverlayGroup中移除</button> <button onclick="getOverlays()">获取OverlayGroup中所有覆盖物</button> <button onclick="clearAll()">清除OverlayGroup中所有覆盖物</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); const point = new Cesium.Entity({ position: Cesium.Cartesian3.fromDegrees(104.487477, 31.808692, 0), point: { color: Cesium.Color.BLUE, pixelSize: 10, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, } }) MchCesium.viewer.entities.add(point) const polyline = new MchCesium.Polyline(null, [{ longitude: 104.427477, latitude: 31.808692 }, { longitude: 104.467477, latitude: 31.888692 }]) // 多边形配置 let polygonGraphics = { material: Cesium.Color.RED.withAlpha(0.5), outlineColor: Cesium.Color.WHITE, outlineWidth: 100.0, } // 多边形顶点坐标(按照顺序) let positions = [[104.450887, 31.791385], [104.472587, 31.791385], [104.47302587, 31.8411385], [104.4509587, 31.8408385]] // 其他配置 let optionPolygon = { editable: true, outline: { color: '#fff', width: 2.0, style: 'dashed' } } const polygon = new MchCesium.Polygon(null, polygonGraphics, positions, optionPolygon) polygon.createPolygonEntity() const overlayGroup = new MchCesium.OverlayGroup([point, polyline]) MchCesium.viewer.zoomTo(MchCesium.viewer.entities) function show() { overlayGroup.show() } function hide() { overlayGroup.hide() } function add() { overlayGroup.add(polygon) } function remove() { overlayGroup.remove(polygon) } function getOverlays() { console.log(overlayGroup.getOverlays()); } function clearAll() { overlayGroup.clear() } </script>

10.效果展示:

Demo地址:

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

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