<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://bigemap.com:9000/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://bigemap.com:9000";
window.viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
terrainId: "bigemap.9af15d8e",
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);
}
let 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>
源码