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>Document</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="http://www.dng9999.cn//Public/mouse_draw/Bigemap.draw.css" />
<script src="http://www.dng9999.cn//Public/js/bm.draw.min.js"></script>
<link href="http://www.dng9999.cn/Public/css/button.min.css" rel="stylesheet">
<!-- <script src="http://www.dng9999.cn/Public/common/js/jquery.min.js"></script> -->
<style>
* {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.tool {
position: absolute;
z-index: 10;
right: 2rem;
top: 2rem;
display: inline-block;
width: 150px;
font-size: 1rem;
}
.choose {
position: absolute;
bottom: 10%;
z-index: 10;
left: 50%;
display: none;
}
</style>
</head>
<body>
<div id='map'></div>
<div class="tool">
<button id="polyline" class="button button-rounded button-primary">繪制線</button>
</div>
<div class="choose">
<button id="revoke" class=" button button-rounded button-primary">撤回上一步</button>
<button id="delete" class=" button button-rounded button-primary">刪除</button>
<button id="success" class=" button button-rounded button-primary" style="left: 30%;">完成</button>
</div>
<script src="http://www.dng9999.cn/public/js/tool/BMturf.min.js"></script>
<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 drawnItems = new BM.FeatureGroup();
//添加在地圖上
map.addLayer(drawnItems);
//設置一個變量來保存當前的繪制對象
var draw;
document.querySelector('#polyline').onclick = function () {
if (draw && draw._enabled) draw.disable();
if (!draw || draw.type != 'polyline') {
draw = new BM.Draw.Polyline(map);
}
draw.enable();
// $('.choose').show();
}
//監聽繪畫完成事件
map.on(BM.Draw.Event.CREATED, function (e) {
var layer = e.layer;
temp = {
layer: e.layer,
type: e.layerType
};
drawnItems.addLayer(layer);
var huanchong = createBuf(layer, 1000).addTo(map);
huanchong.setStyle({ opacity: 0.5 });
var area=BMturf.area(huanchong.toGeoJSON());
huanchong.bindTooltip(`面積:${area}㎡`).openTooltip()
// $('.choose').show();
});
// $('#delete').click(function () {
// if (draw && draw._enabled) { //正在繪制重啟繪制
// draw.disable();
// draw.enable();
// } else { //繪制完成刪除已繪制的圖形
// if (temp) temp.layer.remove();
// draw.enable();
// }
// })
// $('#success').click(function () {
// if (draw && draw._enabled) { //正在繪制手動完成
// draw._finishShape();
// draw.disable(); //繪制完成關閉繪制
// }
// $('.choose').hide();
// })
// $('#revoke').click(function () {
// if (!draw || !draw._enabled || !draw._markers.length) {
// alert('沒有在繪制哦');
// return
// }; //如果沒有繪制過，則不執行撤回操作
// draw.deleteLastVertex()
// })
function createBuf(layer, radius) {
const buffered = BMturf.buffer(layer.toGeoJSON(), radius, {
units: 'meters'
});
let buf = BM.geoJSON(buffered, {
style: function (feature) {
return {
color: 'red'
};
}
});
return buf
}
function contain(father, children) {
father = father.toGeoJSON();
children = children.toGeoJSON();
return BMturf.booleanContains(father.children);
}
</script>
</body>
</html>