BIGEMPA Js API示例中心

鼠标测距源代码展示

代码编辑区 运行 下载 还原
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>鼠标测距</title>
  <link href='http://192.168.1.222:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
  <script src='http://192.168.1.222:9000/bigemap.js/v2.1.0/bigemap.js'></script>
  <link rel="stylesheet" href="/Public/offline/measure/bm.measure.css"/>
  <script src="/Public/offline/measure/bm.measure.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    .disMarker {
      pointer-events: none !important
    }
  </style>
</head>

<body>
  <div id='map'></div>
  <script>
    BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
    var map = BM.map('map', 'bigemap.zhongkexingtu', {
      center: [30.4, 104.5],
      zoom: 7,
      zoomControl: true,
      attributionControl: false
    });
    var marker = BM.marker(map.getCenter(),).addTo(map);
    //添加对应的比例尺插件
    BM.control.scale({
      maxWidth: 240,
      metric: true,
      imperial: false,
      position: 'bottomleft'
    }).addTo(map);
    var plugin = BM.control.measure({
      //  显示位置
      position: 'topleft',
      //  是否启用键盘控制
      keyboard: true,
      //  启用键
      activeKeyCode: 'M'.charCodeAt(0),
      //  取消键,默认esc
      cancelKeyCode: 27,
      //  线颜色
      lineColor: 'red',
      //  线宽
      lineWeight: 2,
      //  虚线配置
      lineDashArray: '6, 6',
      //  透明度
      lineOpacity: 1,
      //  格式化距离
      // formatDistance: function (val) {
      //   return Math.round(1000 * val / 1609.344) / 1000 + 'mile';
      // }
      container: map,//容器,如需不添加按钮以函数形式调用必须要给这个配置项,给了这个配置项需要调用清除地图才能执行addTo
      once: true,
    }).clearMap().addTo(map);
    plugin._startMeasuring()
    map.on('start_measure', function () {
      console.log('start');
    })
    map.on('stop_measure', function (e) {
      console.log('stop', e._layer);
    })
    map.on('finish_measure', function (e) {
      console.log('finish', e._layer);
    })
  </script>
</body>

</html>