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, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.tips {
position: absolute;
z-index: 1;
background-color: white;
padding: 20px;
top: 200px;
left: 50%;
transform: translate(-50%, -50%);
}
</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>
<div class="tips">
文档地址： <a href="http://www.bigemap.com/helps/offline/plot/Draw.html">http://www.bigemap.com/helps/offline/plot/Draw.html</a>
<br>
<br>
插件js下载地址 <a href="http://www.bigemap.com/offline_data/newjunbiao/bm-plot.min.js">http://www.bigemap.com/offline_data/newjunbiao/bm-plot.min.js</a>
</div>
<script src="/offline_data/newjunbiao/bm-plot.min.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 mm = BM.marker(m.getCenter()).addTo(m);
// 初始化鼠标绘制的编辑对象
var draw = new BM.Plot.Draw(m, {
// 是否允许重复配置
repeat: !0,
// 设置双箭头样式
doubleArrow: { color: "pink" },
// 配置绘制线的样式，样式配置可参考文档 http://www.bigemap.com/offlinemaps/api/ 查找BM.polyline
polyline: { weight: 10 },
// 配置绘制线的样式，样式配置可参考文档 http://www.bigemap.com/offlinemaps/api/ 查找BM.polygon
polygon: {
fillColor: "red",
},
});
// 初始化鼠标绘制的编辑对象
var edit = new BM.Plot.Edit(m, {
control: {
//是否允许在编辑的时候拖动绘制图形
dragging: false,
// 顶点图标
vertex: {
autoRemove: true,
withIn: 10,
icon: BM.icon({
iconUrl: "/offline_data/newjunbiao/plus.png",
iconSize: [16, 16],
iconAnchor: [8, 8],
}),
},
// 加点的图标
boundsMarker: {
icon: BM.icon({
iconUrl: "/offline_data/newjunbiao/dot.png",
iconSize: [16, 16],
iconAnchor: [8, 8],
}),
},
// 点,线，圆等的编辑图标
marker: {
icon: BM.icon({
iconUrl: "/offline_data/newjunbiao/dot.png",
iconSize: [8, 8],
iconAnchor: [4, 4],
}),
},
},
});
//创建一个吸附对象
let adsorb = new BM.Plot.AdsorbManager(m);
//修改吸附距离
adsorb.distance = 10;
//向吸附对象里面添加 点，线 ，面
adsorb.addLayer(pp);
//给draw对象设置吸附管理对象
draw.setAdsorbManager(adsorb);
//给edit对象设置吸附管理对象
edit.setAdsorbManager(adsorb);
// console.log("edit", edit);
function activate(e) {
edit.isEdit() && edit.disable(), draw.enable(e);
}
edit.edit(pp);
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);
});
//绘制对象监听正在绘制的事件
draw.on("bm_draw_end", function (e) {
e.detail.layer.on("click", function () {
draw.isDraw() && draw.disable(), !edit.isEdit() && edit.edit(this);
});
});
</script>