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://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet'/>
<script src='http://www.bigemap.com:9000/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.bigemap.com/reader/download/detail201802017.html
-->
<!--<link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />-->
<!--<script src='http://www.bigemap.com: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.bigemap.com/Public/mouse_draw/Bigemap.draw.css"/>
<script src="http://www.bigemap.com/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://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图，并设置地图的ID号为 bigemap.zhongkexingtu，ID号程序自动生成，无需手动配置，并设置地图的投影为百度地图 ，中心点，默认的级别和显示级别控件
var map = BM.map('map', 'bigemap.zhongkexingtu', {
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>