点标记

1.构造方法：

const marker = new MchCesium.Marker(id, billboardGraphics, position, option)

代码实例：

let billboardGraphics = {         image: './mhc/img/st_uav.png',         width:50,         height: 35,         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,         horizontalOrigin: Cesium.HorizontalOrigin.CENTER,       }       let labelGraphics = {         text: '这是marker的label',         font: '14px Microsoft YaHei',         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,         pixelOffset: new Cesium.Cartesian2(0, -40)       }       let editable = false       let markerPosition = [104.336329, 35.979957, 3000]       let option = { needTrans: true, editable: editable, showHeightLine: true, label: labelGraphics }       let marker = new MchCesium.Marker('testMarker', billboardGraphics, markerPosition, option)       marker.createMarkerEntity()

效果：

2.参数说明

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

billboardGraphics(Object)：点标记的图标配置。具体配置参考如下链接：http://cesium.xin/cesium/cn/Documentation1.62/BillboardGraphics.html

position(Array)：点标记位置(经纬度数组，如[119.34, 32.34])

option(Object)：其他配置项。包含如下属性：needTrans(Boolean)：是否需要gcj转wgs84; editable(Boolean)：点标记是否可编辑; showHegihtLine(Boolean)：是否显示点标记到地面的铅垂线及投影。extData(Object) 自定义数据;label(Object)：可选，如果点标记想带Label，则设置此项，具体配置参考如下链接：http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html

3.createMarkerEntity() 生成点标记实体，并在地图上渲染

在用构造方法构造marker实例后，需要使用该方法在地图上生成maker实体。

实例:marker.createMarkerEntity()

4.changeMarkerEditable(editable) 改变点标记的可编辑性

在生成marker实例后，可以使用该方法动态改变点标记是否可编辑。

参数说明：editable(Boolean)：点标记是否可编辑，默认值为true。

实例：marker.changeMarkerEditable(false)

5. destroy() 销毁点标记实例

实例：marker.destroy()

6.show() 在地图上显示点标记

实例：marker.show()

7.hide() 在地图上隐藏点标记

实例：marker.hide()

8.setZIndex(zIndex) 设置点标注的层级

参数说明：zIndex(Number)：点标注的显示层级。

实例：marker.setZIndex(100)

9.setPosition(position) 设置点标记的位置

参数说明：position(Array): 数组的第一个元素为经度，第二个元素为纬度，如[119.33, 38.22]。

实例：marker.setPosition([119.16, 39.04])

10.setLabel(labelGraphics) 给点标记设置其label

参数说明：labelGraphics(Object):label实体的配置。具体参考如下链接：http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html

实例：

  marker.setLabel({       text: '这是marker的label',       font: '14px Microsoft YaHei',       verticalOrigin: Cesium.VerticalOrigin.BOTTOM,       pixelOffset: new Cesium.Cartesian2(0, -40)     })

11.onDarg(callback) 监听点标记的拖拽事件，并在拖拽结束后调用callback

参数说明：callback(Function):拖拽点标记结束后的回调函数。callback中的参数e含有两个属性，分别为position(Object)拖拽后点标记的屏幕坐标，target(Object)地图上的点标记实体。

实例：

marker.onDrag(function (e) {       console.log(e)     })

12.onClick(callback) 监听点标记的点击事件，并在点击后调用callback

参数说明：callback(Function):点击点标记后的回调函数。callback中的参数e含有两个属性，分别为position(Object)点击后点标记的屏幕坐标，target(Object)地图上的点标记实体。

实例：

marker.onClick(function (e) { console.log(e)  })

13.onRightClick(callback) 监听点标记的右键点击事件，并在点击后调用callback

参数说明：callback(Function):点击点标记后的回调函数。callback中的参数e含有三个属性，分别为position(Object)点击后点标记的屏幕坐标，target(Object)地图上的点标记实体，extData自定义数据。

实例：

marker.onRightClick(function (e) { console.log(e)  })  

14.完整代码示例

  <div id="cesiumContainer"></div> <div class="btnbar">     <button id="show">显示点标注</button>     <button id="hide">隐藏点标注</button>     <button id="addLabel">添加Label</button>     <button id="destroy">销毁点标注</button>     <button id="toggleEditable">切换可编辑性</button>   </div> <script type="text/javascript">     const view3D = MchCesium.init('cesiumContainer', true)         let billboardGraphics = {       image: './mhc/img/st_uav.png',       width:50,       height: 35,       verticalOrigin: Cesium.VerticalOrigin.BOTTOM,       horizontalOrigin: Cesium.HorizontalOrigin.CENTER,     }     let editable = false     let markerPosition = [104.336329, 35.979957, 3000]     let option = { needTrans: true, editable: editable, showHeightLine: true }     let marker = new MchCesium.Marker('testMarker', billboardGraphics, markerPosition, option)     marker.createMarkerEntity()     document.getElementById('addLabel').addEventListener('click', function () {       marker.setLabel({         text: '这是marker的label',         font: '14px Microsoft YaHei',         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,         pixelOffset: new Cesium.Cartesian2(0, -40)       })     })     document.getElementById('show').addEventListener('click', function () {       marker.show()     })     document.getElementById('hide').addEventListener('click', function () {       marker.hide()     })     document.getElementById('destroy').addEventListener('click', function () {       marker.destroy()     })     document.getElementById('toggleEditable').addEventListener('click', function () {       editable = !editable       marker.changeMarkerEditable(editable)     })     marker.onDrag(function (e) {       console.log('点标记被拖动', e)     })     marker.onClick(function (e) {       console.log('点标记被点击', e)     })     MchCesium.viewer.camera.flyTo({       destination: Cesium.Cartesian3.fromDegrees(104.336329, 35.979957, 3000)     })   </script>

15.展示效果

Demo地址：

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