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>鼠標(biāo)測(cè)距</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);
//添加對(duì)應(yīng)的比例尺插件
BM.control.scale({
maxWidth: 240,
metric: true,
imperial: false,
position: 'bottomleft'
}).addTo(map);
var plugin = BM.control.measure({
// 顯示位置
position: 'topleft',
// 是否啟用鍵盤(pán)控制
keyboard: true,
// 啟用鍵
activeKeyCode: 'M'.charCodeAt(0),
// 取消鍵，默認(rèn)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,//容器,如需不添加按鈕以函數(shù)形式調(diào)用必須要給這個(gè)配置項(xiàng),給了這個(gè)配置項(xiàng)需要調(diào)用清除地圖才能執(zhí)行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>