百度地图 鼠标绘制图形判 重叠 相交 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>

 

上一篇:python 汉明码


下一篇:学习笔记|JSP教程|菜鸟教程