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://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
  <script src="http://ua.bigemap.com:30081/bmsdk/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://ua.bigemap.com:30081/bmsdk/"
    var map = BM.map('map', 'bigemap.dc-satellite', {
      crs: BM.CRS.EPSG4326,
      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>
BIGEMAP卫星地图_高清卫星地图_北斗高清地图_地图软件_矢量地图数据_专题地图

鼠標測距源代碼展示
