1.demo未提供ak;
2.如果相交or重叠，则删除当前图形；
demo如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
6 <style type="text/css">
7 body, html {
8 width: 100%;
9 height: 100%;
10 margin: 0;
11 font-family: "微软雅黑";
12 }
13
14 #allmap {
15 width: 100%;
16 height: 500px;
17 overflow: hidden;
18 }
19
20 #result {
21 width: 100%;
22 font-size: 12px;
23 }
24
25 dl, dt, dd, ul, li {
26 margin: 0;
27 padding: 0;
28 list-style: none;
29 }
30
31 p {
32 font-size: 12px;
33 }
34
35 dt {
36 font-size: 14px;
37 font-family: "微软雅黑";
38 font-weight: bold;
39 border-bottom: 1px dotted #000;
40 padding: 5px 0 5px 5px;
41 margin: 5px 0;
42 }
43
44 dd {
45 padding: 5px 0 0 5px;
46 }
47
48 li {
49 line-height: 28px;
50 }
51 </style>
52 <script src="/assets/js/jquery.min.js"></script>
53 <script type="text/javascript"
54 src="//api.map.baidu.com/api?v=1.0&ak=ak&v=3.0&services=false"></script>
55 <!--加载鼠标绘制工具-->
56 <script type="text/javascript"
57 src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
58 <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
59 <link rel="stylesheet"
60 href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
61 <!--加载检索信息窗口-->
62 <script type="text/javascript"
63 src="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
64 <script src="/assets/js/GeoUtils.min.js"></script>
65 <link rel="stylesheet"
66 href="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
67 <title>鼠标绘制工具</title>
68 </head>
69 <body>
70 <div id="allmap" style="overflow: hidden; zoom: 1; position: relative;">
71 <div id="map"
72 style="height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;"></div>
73 </div>
74 <div id="result">
75 <input type="button" value="获取绘制的覆盖物个数"onclick="alert(overlays.length)" />
76 <input type="button" value="清除所有覆盖物" onclick="clearAll()" />
77 围栏1：<input type="radio" value="1" name="mapType" checked="checked" onclick="changeMapType(1)" />
78 围栏2：<input type="radio" value="2" name="mapType" onclick="changeMapType(2)" />
79 </div>
80 <script type="text/javascript">
81 var mapTypeData1={
82 "circleLocationData1":[],
83 "rectangleLocationData1":[],
84 "polygonLocationData1":[],
85 "circleLocationPath1":[]
86 }
87 var mapTypeData2={
88 "circleLocationData2":[],
89 "rectangleLocationData2":[],
90 "polygonLocationData2":[],
91 "circleLocationPath2":[]
92 }
93 // 百度地图API功能
94 var map = new BMap.Map('map');
95 var poi = new BMap.Point(116.307852, 40.057031);
96 map.centerAndZoom(poi, 16);
97 map.enableScrollWheelZoom();
98 var overlays = [];
99 var overlaycomplete = function(e) {
100 overlays.push(e.overlay);
101 var mapTypeInfo = getMapTypeInfo();
102 var drawingMode = shapeMode(e.drawingMode);
103 if(drawingMode == 1){
104 var centerPoint = e.overlay.getCenter();
105 var path = e.overlay.getPath();
106 var bounds = e.overlay.getBounds();
107 //获取边界随便一个点和中心点距离就是半径
108 var radius = e.overlay.map.getDistance(centerPoint, path[0]).toFixed(2);
109 var obj={
110 radius :radius,
111 center:e.overlay.getCenter()
112
113 };
114 var flag = compareLocation(mapTypeInfo.mapTypeValue,path);
115 if(!flag){
116 puchMapTypeInfo(mapTypeInfo.mapTypeValue,drawingMode,obj,path);
117 }else{
118 map.removeOverlay(e.overlay);
119 }
120 }else{
121 //边界点
122 var path = e.overlay.getPath();
123 var flag = compareLocation(mapTypeInfo.mapTypeValue,path);
124 if(!flag){
125 puchMapTypeInfo(mapTypeInfo.mapTypeValue,drawingMode,path);
126 }else{
127 map.removeOverlay(e.overlay);
128 }
129
130 }
131
132
133
134 // markerEventAdd(e.overlay,'mouseover');
135
136 };
137 var styleOptions = {
138 strokeColor : "red", //边线颜色。
139 fillColor : "red", //填充颜色。当参数为空时，圆形将没有填充效果。
140 strokeWeight : 3, //边线的宽度，以像素为单位。
141 strokeOpacity : 0.8, //边线透明度，取值范围0 - 1。
142 fillOpacity : 0.6, //填充的透明度，取值范围0 - 1。
143 strokeStyle : 'solid' //边线的样式，solid或dashed。
144 }
145 var opt= {
146 isOpen : false, //是否开启绘制模式
147 enableDrawingTool : true, //是否显示工具栏
148 drawingToolOptions : {
149 anchor : BMAP_ANCHOR_TOP_RIGHT, //位置
150 offset : new BMap.Size(5, 5), //偏离值
151 },
152 circleOptions : styleOptions, //圆的样式
153 polygonOptions : styleOptions, //多边形的样式
154 rectangleOptions : styleOptions
155 //矩形的样式
156 };
157 //实例化鼠标绘制工具
158 var drawingManager = new BMapLib.DrawingManager(map, opt);
159 //添加鼠标绘制工具监听事件，用于获取绘制结果
160 drawingManager.addEventListener('overlaycomplete', overlaycomplete);
161 function clearAll() {
162 for (var i = 0; i < overlays.length; i++) {
163 map.removeOverlay(overlays[i]);
164 }
165 overlays.length = 0;
166 clearMapTypeData();
167 }
168 function clearMapTypeData(){
169 mapTypeData1.circleLocationData1 = [];
170 mapTypeData1.rectangleLocationData1 = [];
171 mapTypeData1.polygonLocationData1 = [];
172 mapTypeData2.circleLocationData2 = [];
173 mapTypeData2.rectangleLocationData2 = [];
174 mapTypeData2.polygonLocationData2 = [];
175 mapTypeData1.circleLocationPath1=[];
176 mapTypeData2.circleLocationPath2=[];
177 }
178 function changeMapType(mapType){
179 switch(mapType){
180 case 1:
181 styleOptions.strokeColor = "red";
182 styleOptions.fillColor = "red";
183 break;
184 case 2:
185 styleOptions.strokeColor = "blue";
186 styleOptions.fillColor ="blue";
187 break;
188 }
189 }
190 function getMapTypeInfo(){
191 var mapType = $("input:radio[name='mapType']:checked").val();
192 var mapTypeText="";
193 var obj={};
194 switch(mapType){
195 case "1":
196 mapTypeText="围栏1";
197 break;
198 case "2":
199 mapTypeText="围栏2";
200 break;
201
202 }
203 obj.mapTypeValue = mapType;
204 obj.mapTypeText = mapTypeText;
205 return obj;
206 }
207
208 function puchMapTypeInfo(mapType,shape,data,path){
209 if(mapType == "1"){
210 if(shape ==1){
211 mapTypeData1.circleLocationData1.push(data);
212 mapTypeData1.circleLocationPath1.push(path);
213 }else if(shape ==2){
214 mapTypeData1.rectangleLocationData1.push(data);
215 }else if(shape ==3){
216 mapTypeData1.polygonLocationData1.push(data);
217 }
218 }else if(mapType == "2"){
219 if(shape ==1){
220 mapTypeData2.circleLocationData2.push(data);
221 mapTypeData2.circleLocationPath2.push(path);
222 }else if(shape ==2){
223 mapTypeData2.rectangleLocationData2.push(data);
224 }else if(shape ==3){
225 mapTypeData2.polygonLocationData2.push(data);
226 }
227 }
228 }
229
230 function shapeMode(drawingMode){
231 var shape =1;
232 switch(drawingMode){
233 case "circle":
234 shape = 1;
235 break;
236 case "rectangle":
237 shape = 2;
238 break;
239 case "polygon":
240 shape = 3;
241 break;
242 }
243 return shape;
244 }
245
246 function compareLocation(mapType,data){
247 if(mapType == "1"){
248 var arr3 = mapTypeData2.rectangleLocationData2;
249 var arr4 = mapTypeData2.polygonLocationData2;
250 var arr5 = mapTypeData2.circleLocationPath2;
251 var data2 = arr3.concat(arr4).concat(arr5);
252 for(var i=0;i<data2.length;i++){
253 var flag = isPolygonsOverlap(data2[i],data);
254 if(flag){
255 return flag;
256 }
257 if(!flag){
258 continue;
259 }
260 if(i == (data2.length-1)){
261 return flag;
262 }
263 }
264 }else if(mapType == "2"){
265 var arr1 = mapTypeData1.rectangleLocationData1
266 var arr2 = mapTypeData1.polygonLocationData1;
267 var arr0 = mapTypeData1.circleLocationPath1;
268 var data1 = arr2.concat(arr1).concat(arr0);
269 for(var i=0;i<data1.length;i++){
270 var flag = isPolygonsOverlap(data1[i],data);
271 if(flag){
272 return flag;
273 }
274 if(!flag){
275 continue;
276 }
277 if(i == (data1.length-1)){
278 return flag;
279 }
280 }
281 }
282 return false;
283
284
285 }
286
287 /**
288 * 线段是否相交
289 * seg: [{ lat: xxx, lng: xxx }, { lat: xxx, lng: xxx }]
290 * */
291 function isSegmentsIntersectant(segA, segB) {
292 var abc = (segA[0].lat - segB[0].lat) * (segA[1].lng - segB[0].lng) - (segA[0].lng - segB[0].lng) * (segA[1].lat - segB[0].lat);
293 var abd = (segA[0].lat - segB[1].lat) * (segA[1].lng - segB[1].lng) - (segA[0].lng - segB[1].lng) * (segA[1].lat - segB[1].lat);
294 if (abc * abd >= 0) {
295 return false;
296 }
297
298 var cda = (segB[0].lat - segA[0].lat) * (segB[1].lng - segA[0].lng) - (segB[0].lng - segA[0].lng) * (segB[1].lat - segA[0].lat);
299 var cdb = cda + abc - abd;
300 return !(cda * cdb >= 0);
301 }
302
303 /**
304 * 判断两多边形边界是否相交
305 */
306 function isPolygonsIntersectant(plyA, plyB) {
307 for (var i = 0, il = plyA.length; i < il; i++) {
308 for (var j = 0, jl = plyB.length; j < jl; j++) {
309 var segA = [plyA[i], plyA[i === il - 1 ? 0 : i + 1]];
310 var segB = [plyB[j], plyB[j === jl - 1 ? 0 : j + 1]];
311 if (isSegmentsIntersectant(segA, segB)) {
312 return true;
313 }
314 }
315 }
316 return false;
317 }
318
319 /**
320 * 判断两多变形是否存在点与区域的包含关系(A的点在B的区域内或B的点在A的区域内)
321 */
322 function isPointInPolygonBidirectional(plyA, plyB) {
323 var pA = [];
324 var pB = [];
325 for(var i=0;i<plyA.length;i++){
326 pA.push(new BMap.Point(plyA[i].lng, plyA[i].lat));
327 }
328 for(var i=0;i<plyB.length;i++){
329 pB.push(new BMap.Point(plyB[i].lng, plyB[i].lat));
330 }
331 var [a, b] = [false, false];
332 a = pA.some(function(item){
333 return BMapLib.GeoUtils.isPointInPolygon(new BMap.Point(item.lng, item.lat), new BMap.Polygon(pB))
334 });
335 if (!a) {
336 b = pB.some(function(item){
337 return BMapLib.GeoUtils.isPointInPolygon(new BMap.Point(item.lng, item.lat), new BMap.Polygon(pA))
338 });
339 }
340
341 return a || b;
342 }
343
344
345 /**
346 * 判断多边形是否重叠
347 * */
348 function isPolygonsOverlap(plyA, plyB) {
349 return isPolygonsIntersectant(plyA, plyB) || isPointInPolygonBidirectional(plyA, plyB);
350 }
351 </script>
352 </body>
353 </html>