<!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="/bmgl/js/mouse_draw/jquery.min.js"></script>
<script src="/bmgl/js/mouse_draw/DrawLine.js"></script>
<script src="/bmgl/js/mouse_draw/DrawPolygon.js"></script>
<script src="/bmgl/js/mouse_draw/bm_draw.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none
}
.toolbar {
position: absolute;
top: 20px;
left: 20px;
}
.tip {
position: absolute;
top: 10px;
right: 50px;
color: red;
font-size: 15px;
}
</style>
<title>part_test</title>
</head>
<body>
<div id='container'></div>
<div class="toolbar">
<button class="DiagonalArrow">斜箭头</button>
<button class="SwallowtailArrow">绘制燕尾直线</button>
<button class="Bezierline">绘制贝塞尔曲线</button>
<button class="Sector">绘制扇形</button>
<button class="Round_rectangle">圆角矩形</button>
<button class="Double_arrow">双箭头</button><br><br>
<button class="GatheringPlace">聚集区</button>
<button class="BezierArrow">贝塞尔箭头</button>
<button class="CardinalArrow">Cardinal箭头</button>
<button class="Bow">弓形</button>
</div>
<div class="tip"></div>
<div id="creditContainer" style="display: none;"></div>
<div id="mouse_state" style="position:absolute;z-index:9999;top:1px;left:1px;background-color:white"></div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { requestRenderMode: false,mapId: 'bigemap.zhongkexingtu', });
//设置初始位置
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
});
//开启地形遮挡
viewer.scene.globe.depthTestAgainstTerrain = false;
var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid; //得到当前三维场景的椭球体
let handler = new bmgl.ScreenSpaceEventHandler(viewer.scene.canvas);
//取消entity点击事件
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
//实例化BMdraw
let bmdraw = new BMdraw2(viewer, bmgl, handler)
//获取单个模型绘制结束
bmdraw.on('drawdisable', function (data) {
console.log(data);
})
//双击结束绘制
bmdraw.on('draw2_over', function () {
stoptip()
})
//取消默认点击事件
function cleanclick() {
handler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(bmgl.ScreenSpaceEventHandler.LEFT_DOUBLE_CLICK)
handler.removeInputAction(bmgl.ScreenSpaceEventType.MOUSE_MOVE);
}
cleanclick()
//添加点击方法
//贝塞尔曲线
$('.Bezierline').click(function () {
settip()
bmdraw.enable('Bezierline')
});
//绘制燕尾箭头
$('.SwallowtailArrow').click(function () {
settip()
bmdraw.enable('SwallowtailArrow')
});
//绘制扇形
$('.Sector').click(function () {
settip()
bmdraw.enable('Sector')
});
//斜箭头
$('.DiagonalArrow').click(function () {
settip()
bmdraw.enable('DiagonalArrow')
});
//圆角矩形
$('.Round_rectangle').click(function () {
settip()
bmdraw.enable('Round_rectangle')
});
//双箭头
$('.Double_arrow').click(function () {
settip()
bmdraw.enable('Double_arrow')
});
//画聚集区
$('.GatheringPlace').click(function () {
settip()
bmdraw.enable('GatheringPlace')
});
//画贝塞尔箭头
$('.BezierArrow').click(function () {
settip()
bmdraw.enable('BezierArrow')
});
//CardinalArrow箭头
$('.CardinalArrow').click(function () {
settip()
bmdraw.enable('CardinalArrow')
});
//弓形
$('.Bow').click(function () {
settip()
bmdraw.enable('Bow')
});
function settip() {
$('.tip').html('点击双击，结束绘制')
}
function stoptip() {
$('.tip').html('选择绘制选项，即可绘制图形')
}
</script>
</body>
</html>
源码