BIGEMPA Js API示例中心
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>繪制</title>
<script src="/Public/common/js/jquery.min.js"></script>
<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 href="https://cdn.bootcdn.net/ajax/libs/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
<!--
以下CSS地址請在安裝軟件了替換成本地的地址
CSS地址請使用:
http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
JS地址請使用：
http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
軟件下載地址 http://www.xjqqc.cn/reader/download/detail201802017.html
-->
<!--<link href='http://www.xjqqc.cn:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />-->
<!--<script src='http://www.xjqqc.cn:9000/bigemap.js/v2.1.0/bigemap.js'></script>-->
<!--引入鼠標繪制的JS+CSS-->
<!--對應下面的CSS+JS的下載地址 請直接訪問 http://bigemap.com/Public/mouse_draw/mouse_draw.zip 來下載-->
<link rel="stylesheet" href="http://www.xjqqc.cn/Public/mouse_draw/Bigemap.draw.css"/>
<script src="http://www.xjqqc.cn/Public/js/bm.draw.min.js"></script>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body, #map {
width: 100%;
height: 100%;
}
.btnbox {
position: absolute;
z-index: 10;
right: 20px;
top: 20px;
display: inline-block;
display: flex;
flex-direction: column;
}
.btnbox button {
margin-top: 10px;
height: 50px;
width: 150px;
font-size: 13px;
}
/*重寫默認的字體的屬性*/
.my_tooltip {
color: red;
background: transparent;
border: none;
font-size: 18px;
}
.my_tooltip::before {
display: none;
}
.kxtip {
position: absolute;
top: 30px;
left: 50px;
padding: 10px;
background-color: white;
color: black;
z-index: 2
}
</style>
<body>
<div class="btnbox">
<button onclick="drawlayer('polygon')" class="button button-tiny button-rounded button-primary">多邊形框選范圍</button>
<button onclick="drawlayer('circle')" class="button button-tiny button-rounded button-primary">圓形框選范圍</button>
</div>
<div id="map">
</div>
<div class="kxtip">
<span>當前范圍內選中的點有:</span>
<div class="xzdiv">
</div>
</div>
<script>
var originalInitTile = window.BM.GridLayer.prototype._initTile;
window.BM.GridLayer.include({
_initTile: function (tile) {
originalInitTile.call(this, tile);
var tileSize = this.getTileSize();
tile.style.width = tileSize.x + 1 + 'px';
tile.style.height = tileSize.y + 1 + 'px';
}
})
</script>
<script>
BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
// 在ID為map的元素中實例化一個地圖，并設置地圖的ID號為 bigemap.zhongkexingtu，ID號程序自動生成，無需手動配置，并設置地圖的投影為百度地圖 ，中心點，默認的級別和顯示級別控件
var map = BM.map('map', 'bigemap.dc-satellite', {
crs: BM.CRS.EPSG4326,
center: [39.905963, 116.390813],
zoom: 8,
zoomControl: true,
attributionControl: false
});
let marker_arr = []
let pass_layer = ''
//生成假數據 數據應該又后端提供
for (var i = 0; i < 200; i++) {
var lat = 39.905963 + (Math.random() - Math.random()) * 3;
var lng = 116.390813 + (Math.random() - Math.random()) * 3;
let marker = BM.marker([lat, lng]).addTo(map)
marker.id = i;
marker.bindTooltip(i + '', {direction: 'bottom', permanent: true, className: 'my_tooltip'})
marker_arr.push(marker)
}
//創建一個圖形覆蓋物的集合來保存點線面
var drawnItems = new BM.FeatureGroup();
//添加在地圖上
map.addLayer(drawnItems);
//監聽繪畫完成事件
map.on(BM.Draw.Event.CREATED, function (e) {
//判斷是否存在繪制的layer 刪除掉
if (pass_layer != '') pass_layer.remove()
var layer = e.layer;
let layertype = e.layerType
pass_layer = layer
drawnItems.addLayer(layer);
let in_arr = []
//判斷是多邊形還是圓形
if (layertype == 'polygon') {
//判斷哪些點在多邊形里
let polygonlatlng = layer.getLatLngs()
//polygon的平面左邊數組
let ps = polygonlatlng[0].map(v => {
let arr = [v.lat, v.lng]
return [map.project(arr).x, map.project(arr).y];
});
marker_arr.forEach(v => {
let latlng = v.getLatLng()
//點的平面坐標
var point = map.project([latlng.lat, latlng.lng]);
if (isIn([point.x, point.y], ps)) {
in_arr.push(v.id)
}
})
} else if (layertype == 'circle') {
//圓形
//比較中心點
let center = layer.getLatLng();
let radius = layer.getRadius();
marker_arr.forEach(v => {
let latlngs = [v.getLatLng(), center]
//計算距離
let distance = map.distance(latlngs[0], latlngs[1]);
if (distance <= radius) {
in_arr.push(v.id)
}
})
}
//提示在框選范圍的marker
appendtip(in_arr)
draw.disable()
draw = ''
});
//設置一個變量來保存當前的繪制對象
var draw;
function drawlayer(type) {
if (!draw) {
switch (type) {
case 'polygon':
draw = new BM.Draw.Polygon(map);
break;
case 'circle':
draw = new BM.Draw.Circle(map);
break;
}
}
draw.enable();
}
let xzdiv = document.getElementsByClassName('xzdiv')
//展示tip
function appendtip(arr) {
console.log(xzdiv)
let div2 = document.createElement('div')
arr.forEach(v => {
let span2 = document.createElement('span')
span2.innerText = v + ','
div2.append(span2)
})
console.log(div2)
xzdiv[0].innerHTML = div2.innerHTML
}
//判斷函數
function isIn(a, b, c) {
var d = a[0];
a = a[1];
var e = !1, f, h, k, l, m = b.length, n = 0;
for (l = m - 1; n < m; l = n,
n += 1) {
var p = !1;
f = b[n][0];
h = b[n][1];
k = b[l][0];
l = b[l][1];
if (f === d && h === a || k === d && l === a)
return c ? !0 : !1;
if (h < a === l >= a) {
f = (k - f) * (a - h) / (l - h) + f;
if (d === f)
return c ? !0 : !1;
p = d < f
}
p && (e = !e)
}
return e
}
</script>
</body>
</html>