<!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 type="text/javascript" src="/bmgl/js/draw/bmgl_algorithm.js"></script>
<script type="text/javascript" src="/bmgl/js/draw/bmgl_plotUtil.js"></script>
<script src="/bmgl/js/draw//DrawLine.js"></script>
<script src="/bmgl/js/draw//DrawPolygon.js"></script>
<script src="/bmgl/js/draw//bm_draw.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#result {
position: absolute;
left: 50px;
top: 10px;
z-index: 999;
width: 300px;
background-color: #eee;
padding: 5px 10px;
}
#result a {
display: inline-block;
padding: 5px 8px;
}
</style>
<title>part_test</title>
</head>
<body>
<div id="result">
<a data-type="marker" href="javascript:void(0);">标注</a>
<a data-type="polyline" href="javascript:void(0);">线段</a>
<a data-type="polygon" href="javascript:void(0);">多边形</a>
<a data-type="circle" href="javascript:void(0);">圆</a>
<a data-type="rectangle" href="javascript:void(0);">矩形</a>
<a data-type="straightArrow" href="javascript:void(0);">直线箭头</a>
<a data-type="pinchArrow" href="javascript:void(0);">钳击箭头</a>
<a data-type="tailedAttackArrow" href="javascript:void(0);">攻击箭头</a>
<a data-type="diagonalArrow" href="javascript:void(0);">斜箭头</a>
<a data-type="bezierLine" href="javascript:void(0);">绘制贝塞尔曲线</a>
<a data-type="swallowtailArrow" href="javascript:void(0);">绘制燕尾直线</a>
<a data-type="ruler" href="javascript:void(0);">距离</a>
<a data-type="measure" href="javascript:void(0);">面积</a>
<a target="_blank" href="/bmgl/js/draw/draw.zip">文件下载</a>
</div>
<div id='container'>
</div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {
mapId: 'bigemap.zhongkexingtu',
requestRenderMode: false,
selectionIndicator: false,
infoBox: false
});
//取消默认的点击事件
viewer.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.scene.globe.depthTestAgainstTerrain = false;
var pin = new bmgl.PinBuilder();
var options = {
//设置默认的颜色
color: bmgl.Color.fromCssColorString('#3388ff').withAlpha(0.8),
//单独设置线的材质
polyline: {
material: bmgl.Color.RED,
width: 10,
},
//单独设置圆的材质
ellipse: {
material: bmgl.Color.PINK.withAlpha(0.7),
}
};
var entity, myData;
var draw = new BMDraw(viewer, options);
viewer.screenSpaceEventHandler.setInputAction(function (e) {
//添加右键退出绘制模式
draw.disable();
}, bmgl.ScreenSpaceEventType.RIGHT_CLICK);
document.getElementById('result').addEventListener('click', function (e) {
var dataset = e.target.dataset;
switch (dataset.type) {
case 'marker':
case 'polyline':
case 'circle':
case 'rectangle':
case 'polygon':
case 'measure':
case 'ruler':
case 'straightArrow':
case 'pinchArrow':
case 'bezierLine':
case 'tailedAttackArrow':
case 'diagonalArrow':
case 'swallowtailArrow':
draw.enable(dataset.type);
break;
}
});
var index = 1;
draw.on('bm_draw_end', function (e) {
var detail = e.detail;
myData = detail;
if (!detail) return;
console.log(detail);
switch (detail.type) {
case 'marker':
viewer.entities.add({
position: detail.path.origin,
billboard: {
heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
image: pin.fromText(index++, bmgl.Color.fromRandom({alpha: Math.random() * 0.2 + 0.8}), 40),
}
});
break;
case 'polyline':
break;
case 'polygon':
break;
case 'straightArrow':
draw.edit(detail.entity, {type: 'straightArrow', path: detail.path});
break;
case 'tailedAttackArrow':
draw.edit(detail.entity, {type: 'tailedAttackArrow', path: detail.path});
break;
case 'pinchArrow':
draw.edit(detail.entity, {type: 'pinchArrow', path: detail.path});
break;
case 'diagonalArrow':
break;
case 'circle':
break;
case 'rectangle':
break;
}
}).on('bm_edit_end', function (e) {
console.log(e.detail);
});
</script>
</body>
</html>
源码