BIGEMPA Js API示例中心
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试</title>
<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>
</head>
<style>body {
margin: 0;
padding: 0
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%
}
.user-tool {
position: absolute;
top: 60px;
left: calc(50% - (50% - 50px))
}
.ol-viewport {
position: inherit !important
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 10px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.btn.focus, .btn:focus, .btn:hover {
color: #333;
text-decoration: none
}
.btn.active, .btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c
}</style>
<body>
<div id="map"></div>
<div class="user-tool">
<button class="btn btn-success" onclick='activate("marker")'>测试画点</button>
<button class="btn btn-success" onclick='activate("polyline")'>测试画线</button>
<button class="btn btn-success" onclick='activate("curve")'>测试画曲线</button>
<button class="btn btn-success" onclick='activate("arc")'>测试画弓形</button>
<button class="btn btn-success" onclick='activate("circle")'>测试画圆</button>
<button class="btn btn-success" onclick='activate("freeLine")'>测试画自由线</button>
<button class="btn btn-success" onclick='activate("rectangle")'>测试画矩形</button>
<button class="btn btn-success" onclick='activate("ellipse")'>测试椭圆</button>
<button class="btn btn-success" onclick='activate("lune")'>测试弓形</button>
<button class="btn btn-success" onclick='activate("sector")'>测试画扇形</button>
<button class="btn btn-success" onclick='activate("closedCurve")'>测试画闭合曲面</button>
<button class="btn btn-success" onclick='activate("polygon")'>测试多边形</button>
<button class="btn btn-success" onclick='activate("freePolygon")'>测试自由面</button>
<button class="btn btn-success" onclick='activate("gatheringPlace")'>测试集结地</button>
<button class="btn btn-success" onclick='activate("doubleArrow")'>测试双箭头</button>
<button class="btn btn-success" onclick='activate("straightArrow")'>测试细直箭头</button>
<button class="btn btn-success" onclick='activate("fineArrow")'>测试粗单尖头箭头</button>
<button class="btn btn-success" onclick='activate("attackArrow")'>测试进攻方向</button>
<button class="btn btn-success" onclick='activate("assaultDirection")'>测试粗单直箭头</button>
<button class="btn btn-success" onclick='activate("tailedAttackArrow")'>测试进攻方向（尾）</button>
<button class="btn btn-success" onclick='activate("squadCombat")'>测试分队战斗行动</button>
<button class="btn btn-success" onclick='activate("tailedSquadCombat")'>测试分队战斗行动（尾）</button>
<button class="btn btn-success" onclick='activate("rectFlag")'>测试矩形标志旗</button>
<button class="btn btn-success" onclick='activate("triangleFlag")'>测试三角标志旗</button>
<button class="btn btn-success" onclick='activate("curveFlag")'>测试曲线标志旗</button>
</div>
<div id="position" style="position:absolute;z-index:999;bottom:20px;right:200px"></div>
<script src="/mapoffline/bm-plot/plot.js"></script>
</body>
</html>
<script>BM.Config.HTTP_URL = "http://www.bigemap.com:9000";
var m = BM.map("map", "bigemap.zhongkexingtu", {
center: [30.3, 104.5],
zoom: 7,
zoomControl: !0,
attributionControl: !1
});
var pp = BM.polygon([[30, 104], [30, 104.25], [30.1, 104.25]]).addTo(m),
ppp = BM.polyline([[30.2, 104], [31.2, 104.4]]).addTo(m);
var draw = new BM.Plot.Draw(m, {
repeat: !0,
absorb: {distance: 10, marker: BM.circleMarker([0, 0], {radius: 6, weight: 1, fillOpacity: 1, fillColor: "white"})},
doubleArrow: {color: "pink"},
polyline: {weight: 10}
});
var mm = BM.marker(m.getCenter()).addTo(m);
//给绘制添加吸附对象，可实现吸附效果
draw.addAbsorbLayer(mm);
draw.addAbsorbLayer(pp);
draw.addAbsorbLayer(ppp);
var edit = new BM.Plot.Edit(m, {
absorb: {
distance: 10,
marker: BM.circleMarker([0, 0], {radius: 6, weight: 1, fillOpacity: 1, fillColor: "white"})
}, circle: {
icon: [!1, BM.divIcon({html: "<span></span>"})], editable: function (e, a) {
if (0 === a.index) return !0;
var i = m.distance(a.path[0], a.path[1]);
return i > 20 && i < 600
}
}
});
function activate(e) {
edit.isEdit() && edit.disable(), draw.enable(e)
}
edit.edit(pp);
//给编辑添加吸附对象
edit.addAbsorbLayer(ppp);
edit.addAbsorbLayer(pp);
edit.addAbsorbLayer(mm);
m.setView({
lat: 30.155355727105395,
lng: 104.25064086914064
}, 10);
m.on("contextmenu", (function () {
draw.disable(), edit.disable()
}));
edit.on("bm_editing", (function (e) {
}));
edit.on("bm_edit_end", (function (e) {
console.log(e.detail)
}));
var a = new Date;
draw.on("bm_drawing", (function (e) {
}), a), draw.on("bm_draw_end", (function (e) {
e.detail.layer.on("click", (function () {
draw.isDraw() && draw.disable(), !edit.isEdit() && edit.edit(this)
})), console.log(e.detail.type), ["polyline", "marker", "polygon"].indexOf(e.detail.type) > -1 && (draw.addAbsorbLayer(e.detail.layer), edit.addAbsorbLayer(e.detail.layer))
})), m.on("mousemove", (function (e) {
document.getElementById("position").innerHTML = e.latlng.lat + "," + e.latlng.lng
}))</script>