MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MCHMAP > 点标记鼠标绘制工具

点标记鼠标绘制工具

1.构造方法：

const markerDrawer = new MchCesium.MarkerDrawer(id, billboardGraphics, labelGraphics)

2.参数说明

id(String) 鼠标绘制工具id

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

labelGraphics(Object)：点标记的label配置。具体配置参考http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html

option(Object)：非必填。包含如下属性： needTrans(Boolean)：是否需要gcj转wgs84; editable(Boolean)：点标记是否可编辑; extData(Object) 自定义数据; label(Object)：可选，如果点标记想带Label，则设置此项，具体配置参考如下链接： http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html

3.开启鼠标绘制点标记功能open()

markerDrawer.open()

4.关闭鼠标绘制点标记功能close()

markerDrawer.close()

5.监听鼠标绘制点结束事件，并传入回调。onFinish(callback)

参数说明：callback 回调函数，回调函数的参数

markerDrawer.onFinish(function (e) { console.log(e) })

6.完整代码示例

<!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/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="open">开启鼠标绘制</button>
    <button id="close">关闭鼠标绘制</button>
  </div>

  <script type="text/javascript">
    MchCesium.init('cesiumContainer')
    MchCesium.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(116.3972, 39.9071, 3000)     
    }) 
    
    let billboardGraphics = {
      image: 'https://mhc.ixiera.com/mhc/img/st_uav.png',
      width:50,
      height: 35,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    }
    let labelGraphics = {
      text: '这是marker的label',
      font: '14px Microsoft YaHei',
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, -40)
    }
    const markerDrawer = new MchCesium.MarkerDrawer('testMarkerDrawer', billboardGraphics, labelGraphics)

    document.getElementById('open').onclick = function () {
      markerDrawer.open()
    }  
    document.getElementById('close').onclick = function () {
      markerDrawer.close()
    }
    markerDrawer.onFinish(function(e) {
      console.log('当前绘制的点标记', e);
    })
  </script>
</body>

</html>

7.展示效果

Demo地址：

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

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