覆盖物群组
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
扫一扫