<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<script src="/offline_data/newjunbiao/bmgl-plot.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
.user-tool {
position: absolute;
top: 60px;
left: calc(50% - (50% - 50px));
z-index: 999;
}
.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;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="container">
<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('ellipse')">
橢圓
</button>
<button class="btn btn-success" onclick="activate('triangle')">
三角形
</button>
<button class="btn btn-success" onclick="activate('azimuth')">
測量方位角
</button>
<button class="btn btn-success" onclick="activate('height')">
測量高度
</button>
<button class="btn btn-success" onclick="activate('altitude')">
測量海拔
</button>
<button class="btn btn-success" onclick="activate('ruler')">
測距
</button>
<button
class="btn btn-success"
onclick="activate('groundRuler')"
>
貼地測距
</button>
<button class="btn btn-success" onclick="activate('rectangle')">
畫矩形
</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('area')">
測量多邊形面積
</button>
<button
class="btn btn-success"
onclick="activate('groundArea')"
>
測量貼地多邊形面積
</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('all')">
移除所有標繪
</button>
</div>
</div>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
window.viewer = new bmgl.Viewer("container", {
mapId: "bigemap.dc-tian-w-satellite",
//terrainId: "bigemap.dc-terrain",
requestRenderMode: false,
infoBox: false,
});
window.viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(104, 30, 1000),
});
//取消BMWidget自帶的點擊事件
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(
bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(
bmgl.ScreenSpaceEventType.LEFT_CLICK
);
window.drawName = null;
//初始化繪制對象
var draw = new bmgl.Plot.Draw(viewer, {
repeat: true,
positionConvertt: function (position) {
// console.log(222);
return {
lng: 104,
lat: 30,
height: 0,
};
},
marker: {
image: "/offline_data/newjunbiao/12.png",
width: 40,
height: 40,
verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
},
altitude: {
verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
fillColor: bmgl.Color.WHITE,
font: "24px arial",
pixelOffset: new bmgl.Cartesian2(0, -20),
disableDepthTestDistance: 9000,
heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
},
area: {
// labelOptions: {fillColor: bmgl.Color.GREEN},
// perPositionHeight:true,
},
groundArea: {
labelOptions: { fillColor: bmgl.Color.GREEN },
},
polygon: {
classificationType: bmgl.ClassificationType.BOTH,
material: bmgl.Color.WHEAT,
},
straightArrow: {
width: 4,
clampToGround: true,
material: bmgl.Color.RED,
},
absorb: {
distance: 10,
// marker: BM.circleMarker([0, 0], {radius: 6, weight: 1, fillOpacity: 1, fillColor: 'white'})
},
circle: {
material:
bmgl.Color.fromCssColorString("#369").withAlpha(0.4),
controlLine: {
permanent: true,
lineStyle: {
width: 4,
clampToGround: true,
material:
bmgl.Color.fromCssColorString("#eee").withAlpha(
0.8
),
},
textStyle: {
font: "14px arial",
disableDepthTestDistance: Infinity,
verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
},
},
},
azimuth: {
clampToGround: true,
material: new bmgl.PolylineArrowMaterialProperty(
bmgl.Color.fromCssColorString("#369")
),
width: 20,
labelOptions: { fillColor: bmgl.Color.YELLOW },
},
groundRuler: {
width: 5,
clampToGround: true,
material: bmgl.Color.fromCssColorString("#369"),
labelOptions: { fillColor: bmgl.Color.RED },
},
ruler: {
width: 5,
clampToGround: false,
// clampToGround: true,
// classificationType:bmgl.ClassificationType.BM_3D_TILE,
material: bmgl.Color.fromCssColorString("#369"),
labelOptions: {
fillColor: bmgl.Color.WHITE,
font: "24px arial",
verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
pixelOffset: new bmgl.Cartesian2(0, -20),
disableDepthTestDistance: 2000,
},
},
curve: {
width: 2,
clampToGround: true,
material: bmgl.Color.fromCssColorString("#999"),
},
gatheringPlace: {
material: bmgl.Color.fromCssColorString("#369"),
},
doubleArrow: {
material: bmgl.Color.fromCssColorString("#369"),
},
arc: {
clampToGround: true,
},
polyline: {
width: 10,
clampToGround: true,
material: bmgl.Color.fromCssColorString("#369"),
},
triangle: {
width: 10,
clampToGround: true,
material: bmgl.Color.fromCssColorString("#369"),
},
ellipse: {
material: bmgl.Color.fromCssColorString("#369"),
},
rectangle: {
material:
bmgl.Color.fromCssColorString("#17d26b").withAlpha(0.6),
},
});
//初始化編輯對象
var edit = new bmgl.Plot.Edit(viewer, {
axis: {
scale: 1,
},
control: {
tolerance: 4,
markerr: {
eyeOffset: new bmgl.Cartesian3(0, 0, -20),
verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
// disableDepthTestDistance: 500,
heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
},
},
});
// console.log(`輸出對象`, draw, edit);
// 繪制圖形
function activate(name) {
window.drawName = name;
if (name == "all") {
viewer.entities.removeAll();
return;
}
draw.enable(name);
}
var handler = new bmgl.ScreenSpaceEventHandler(
window.viewer.scene.canvas
);
//鼠標右鍵事件
handler.setInputAction(function () {
//取消繪制, 取消編輯
draw.disable();
edit.disable();
}, bmgl.ScreenSpaceEventType.RIGHT_CLICK);
// 鼠標左鍵事件
handler.setInputAction(function (e) {
draw.disable();
edit.disable();
//取消繪制, 取消編輯
// draw.disable() && edit.disable();
let pos = e.position;
// let obj = window.viewer.scene.pickPosition(e.position)
let obj = window.viewer.scene.pick(e.position);
if (bmgl.defined(obj)) {
// console.log(obj.id._id, "obj");
let id = obj.id._id;
let ene = window.viewer.entities.getById(id);
// console.log(ene,'ene');
edit.edit(ene);
}
}, bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
console.log("edit", edit);
//監聽繪制完成
draw.on("bm_draw_end", function (e) {
console.log("drawend", e);
});
//監聽編輯完成
edit.on("bm_edit_end", function (e) {
console.log("editend", e);
});
edit.on("bm_editing_dragging", function (e) {
console.log("editing", e);
});
</script>
</body>
</html>