百度地图 鼠标绘制图形判 重叠 相交 demo
说明：
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>
博客园地址：https://www.cnblogs.com/lixiuming521125/
