BIGEMPA Js API示例中心
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制</title>
<script src="http://www.bigemap.com/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="http://www.bigemap.com/Public/css/button.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="/Public/mouse_draw/Bigemap.draw.css"/>
<script src="/Public/js/bm.draw.min.js"></script>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html,
body,
#map {
width: 100%;
height: 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>
<body>
<div class="tool">
<button id="polyline" class="button button-rounded button-primary">绘制线</button>
<button id="polygon" class="button button-rounded button-primary" style="padding: 0 20px;">绘制多边形</button>
<button id="point" 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>
<div id="map">
</div>
<script>
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
var temp;
var map = BM.map('map', 'bigemap.amap-satellite', {
center: [30, 104],
zoom: 8,
zoomControl: true,
attributionControl: false
});
//创建一个图形覆盖物的集合来保存点线面
var drawnItems = new BM.FeatureGroup();
//添加在地图上
map.addLayer(drawnItems);
//设置一个变量来保存当前的绘制对象
var draw;
document.querySelector('#polygon').onclick = function () {
if (draw && draw._enabled) draw.disable();
if (!draw || draw.type != 'polygon') {
draw = new BM.Draw.Polygon(map, {
showArea: false, //不显示面积
allowIntersection: false, //不允许交叉
drawError: {
color: '#b00b00',
message: '不能绘制交叉的多边形!'
}, //绘制错误时的提示信息
shapeOptions: {
color: 'red',
}, //绘制的多边形的样式
repeatMode: !0, //是否可以重复绘制
beforeAdd: function (latlng, e) {
console.log(latlng, e, 96);
return true//返回true表示允许添加，false表示不允许添加
}
});
}
draw.enable();
$('.choose').show();
}
document.querySelector('#point').onclick = function () {
if (draw && draw._enabled) draw.disable();
if (!draw || draw.type != 'marker') {
draw = new BM.Draw.Marker(map);
}
draw.enable();
$('.choose').show();
}
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);
$('.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()
})
var Polyline = new BM.Polyline([
[30.1, 104.1],
[30.5, 104.06],
[30.92, 104.03]
]);
Polyline.on('click', function (e) {
Polyline.editing.enable();
console.log(Polyline, '被左键了,开始编辑');
map.on('contextmenu', function () {
Polyline.editing.disable();
console.log(Polyline, '地图被右键了,停止编辑');
})
});
Polyline.on('contextmenu', function (e) {
Polyline.editing.disable();
console.log(Polyline, '被右键了,停止编辑');
});
Polyline.addTo(map);
map.on(BM.Draw.Event.EDITSTOP, function (e) {
console.log(this);
console.log(e.layer, '编辑结束');
});
</script>
</body>
</html>