<!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>
源码