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://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>
</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: 9;
background-color: white;
padding: 0px 20px;
/* top: 200px; */
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #fcf8e3;
display: flex;
justify-content: center;
align-items: center;
/* 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://m.bjxdny.cn/helps/offline/plot/Draw.html" style="text-decoration: none;margin-right: 8px;" target="_blank">插件文檔地址</a>
<a href="http://m.bjxdny.cn/offline_data/newjunbiao/bm-plot.zip" style="text-decoration: none;">插件下載</a>
</div>
<script src="http://m.bjxdny.cn/offline_data/newjunbiao/bm-plot.min.js"></script>
</body>
</html>
<script>
BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
var m = BM.map("map", "bigemap.dc-satellite", {
crs: BM.CRS.EPSG4326,
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://m.bjxdny.cn/offlinemaps/api/ 查找BM.polyline
polyline: { weight: 10 },
// 配置繪制線的樣式，樣式配置可參考文檔 http://m.bjxdny.cn/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>