zoukankan      html  css  js  c++  java

  • 百度地图 鼠标绘制图形判 重叠 相交 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>
    我从来不相信什么懒洋洋的自由。我向往的自由是通过勤奋和努力实现的更广阔的人生。 我要做一个自由又自律的人，靠势必实现的决心认真地活着。
  • 相关阅读:
    ant desigon Upload控件能否提供隐藏删除图标的属性以及鼠标停留在删除图标上的提示文字怎么设置为中文
    2月5日进度
    2月4日学习进度
    2月3日学习进度
    2月2日学习进度
    大数据之linux环境下jdk hadoop以及hbase，hive等配置
    MVC实例
    MVC简介
    23种设计模式
    xxx系统可用性和易用性分析
  • 原文地址：https://www.cnblogs.com/lixiuming521125/p/15690955.html
Copyright © 2011-2022 走看看