BIGEMPA Js API示例中心
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绘制</title> <script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script> <link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' /> <script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script> <link href="http://www.bigemap.com/Public/css/button.min.css" rel="stylesheet"> <!-- 以下CSS地址请在安装软件了替换成本地的地址 CSS地址请使用: http://localhost:9000/bigemap.js/v2.1.0/bigemap.css JS地址请使用: http://localhost:9000/bigemap.js/v2.1.0/bigemap.js 软件下载地址 http://www.bigemap.com/reader/download/detail201802017.html --> <!--<link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />--> <!--<script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>--> <!--引入鼠标绘制的JS+CSS--> <!--对应下面的CSS+JS的下载地址 请直接访问 http://bigemap.com/Public/mouse_draw/mouse_draw.zip 来下载--> <link rel="stylesheet" href="/Public/mouse_draw/Bigemap.draw.css"/> <script src="/Public/js/bm.draw.min.js"></script> </head> <style type="text/css"> * { padding: 0; margin: 0; } html, body, #map { width: 100%; height: 100%; } .tool { position: absolute; z-index: 10; right: 2rem; top: 2rem; display: inline-block; width: 150px; font-size: 1rem; } .choose { position: absolute; bottom: 10%; z-index: 10; left: 50%; display: none; } </style> <body> <div class="tool"> <button id="polyline" class="button button-rounded button-primary">绘制线</button> <button id="polygon" class="button button-rounded button-primary" style="padding: 0 20px;">绘制多边形</button> <button id="point" class="button button-rounded button-primary">绘制点</button> </div> <div class="choose"> <button id="revoke" class=" button button-rounded button-primary">撤回上一步</button> <button id="delete" class=" button button-rounded button-primary">删除</button> <button id="success" class=" button button-rounded button-primary" style="left: 30%;">完成</button> </div> <div id="map"> </div> <script> BM.Config.HTTP_URL = 'http://www.bigemap.com:9000'; var temp; var map = BM.map('map', 'bigemap.amap-satellite', { center: [30, 104], zoom: 8, zoomControl: true, attributionControl: false }); //创建一个图形覆盖物的集合来保存点线面 var drawnItems = new BM.FeatureGroup(); //添加在地图上 map.addLayer(drawnItems); //设置一个变量来保存当前的绘制对象 var draw; document.querySelector('#polygon').onclick = function () { if (draw && draw._enabled) draw.disable(); if (!draw || draw.type != 'polygon') { draw = new BM.Draw.Polygon(map, { showArea: false, //不显示面积 allowIntersection: false, //不允许交叉 drawError: { color: '#b00b00', message: '不能绘制交叉的多边形!' }, //绘制错误时的提示信息 shapeOptions: { color: 'red', }, //绘制的多边形的样式 repeatMode: !0, //是否可以重复绘制 beforeAdd: function (latlng, e) { console.log(latlng, e, 96); return true//返回true表示允许添加,false表示不允许添加 } }); } draw.enable(); $('.choose').show(); } document.querySelector('#point').onclick = function () { if (draw && draw._enabled) draw.disable(); if (!draw || draw.type != 'marker') { draw = new BM.Draw.Marker(map); } draw.enable(); $('.choose').show(); } document.querySelector('#polyline').onclick = function () { if (draw && draw._enabled) draw.disable(); if (!draw || draw.type != 'polyline') { draw = new BM.Draw.Polyline(map); } draw.enable(); $('.choose').show(); } //监听绘画完成事件 map.on(BM.Draw.Event.CREATED, function (e) { var layer = e.layer; temp = { layer: e.layer, type: e.layerType }; drawnItems.addLayer(layer); $('.choose').show(); }); $('#delete').click(function () { if (draw && draw._enabled) { //正在绘制重启绘制 draw.disable(); draw.enable(); } else { //绘制完成删除已绘制的图形 if (temp) temp.layer.remove(); draw.enable(); } }) $('#success').click(function () { if (draw && draw._enabled) { //正在绘制手动完成 draw._finishShape(); draw.disable(); //绘制完成关闭绘制 } $('.choose').hide(); }) $('#revoke').click(function () { if (!draw || !draw._enabled || !draw._markers.length) { alert('没有在绘制哦'); return }; //如果没有绘制过,则不执行撤回操作 draw.deleteLastVertex() }) var Polyline = new BM.Polyline([ [30.1, 104.1], [30.5, 104.06], [30.92, 104.03] ]); Polyline.on('click', function (e) { Polyline.editing.enable(); console.log(Polyline, '被左键了,开始编辑'); map.on('contextmenu', function () { Polyline.editing.disable(); console.log(Polyline, '地图被右键了,停止编辑'); }) }); Polyline.on('contextmenu', function (e) { Polyline.editing.disable(); console.log(Polyline, '被右键了,停止编辑'); }); Polyline.addTo(map); map.on(BM.Draw.Event.EDITSTOP, function (e) { console.log(this); console.log(e.layer, '编辑结束'); }); </script> </body> </html>