高德地图地图层级不同显示marker数量不同

小灰灰 2023-02-17 05:07 163阅读 0赞

页面渲染获取经纬度数据（mapData）以后初始化地图initMap()方法  
页面效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70]  
放大比例后点数变多  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70 1]  
在这里插入图片描述

<template>
        <div class="hot_wrapper">
            <div class="map">
                <div style="height:100%;width:100%;outline: none!important;" id="container" tabindex="0"> </div>
            </div>
        </div>
    </template>
    
    <script>
    import AMap from "AMap";
    export default { 
        data() { 
            return { 
                adCode: 330600, // 绍兴
                disProvince: null, // 区域图层
                depth: 2, // 区域等级 0省级 1市级 2区县级
                colors: { }, // 区域颜色330683 山乘州市
                                        // 330624 新昌县
                                        // 330604 上虞区
                                        // 330602 越城区
                                        // 330603 柯桥区
                                        // 330681 诸暨市
                city: '绍兴市',
                mapData:[],//地图经纬度数据
                mapDataMarker:[],//图层级变化点数量个数变化
                pathContentArr:[],//地图层级变化点数量提示
                unitId:'',//单位id
                iconPath:'',//图标路径
            }   
        },
        methods:{ 
        	initMap() { // 创建地图
                var that = this
                this.map = new AMap.Map('container', { 
                    zoom:10,
                    zooms: [10,14],
                    center:[120.535719,29.956348],
                    // center:[120.580444,29.859701],
                    resizeEnable: true,
                    showIndoorMap: false,
                    mapStyle:"amap://styles/0206dfbcbabc11e4971c1a2e6bcdda2e",
                    // mapStyle:"amap://styles/darkblue",
                    features:['point','road','bg'],//地图要素
                    viewMode:"2D",
                    pitch:45,
                    zoomEnable:true,
                    // dragEnable: false,
                })
                AMap.plugin('AMap.Geocoder', function() { 
                    that.geocoder = new AMap.Geocoder({ 
                    })
                })
                that.drawMarkerByDistance(that.map.getZoom())//初始调用marker过滤方法。渲染地图
                this.map.on("zoomchange",function(){ //改变层级。点位重新渲染
                	//清除地图上点位信息
                    for (var i = that.mapDataMarker.length - 1; i >= 0; i--) { 
                        that.mapDataMarker[i].setMap(null);
                    }
                    for (var i = that.pathContentArr.length - 1; i >= 0; i--) { 
                        that.pathContentArr[i].setMap(null);
                    }
                    that.mapDataMarker=[];
                    that.pathContentArr=[];
    
                    that.drawMarkerByDistance(that.map.getZoom())
                })
            },
        },
         Rad(d){ //经纬度转换成三角函数中度分表形式。
              return d * Math.PI / 180.0;
         },
         //计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
          GetDistance(lat1,lng1,lat2,lng2){ 
              var radLat1 = this.Rad(lat1);
              var radLat2 = this.Rad(lat2);
              var a = radLat1 - radLat2;
              var  b = this.Rad(lng1) - this.Rad(lng2);
              var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
              Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
              s = s *6378.137 ;// EARTH_RADIUS;
              s = Math.round(s * 10000) / 10000; //输出为公里
              return s;
          },
          //计算距离渲染点位
          drawMarkerByDistance(zoom){ 
              var that=this;
              var perDistance=0;   //当前累计公里数
              var zoom=zoom||10;
              switch (zoom){ 
                  case 10:
                      var targetDistance=20  //km
                      break;
                  case 11:
                      var targetDistance=10;  //km
                      break;
                  case 12:
                      var targetDistance=5;  //km
                      break;
                  case 13:
                      var targetDistance=1;  //km
                      break;
                  default:
                      var targetDistance=0.25;  //km
              }
              var prepareToShowMarker=[];//复制获取的经纬度数据，进行条件筛选
              prepareToShowMarker=JSON.parse(JSON.stringify(that.mapData))
              for(var i in prepareToShowMarker){ 
                  prepareToShowMarker[i].count=1
              }
    
              var select=function(arr){ //筛选函数
                  
                  var flag=true;
                  for(var i=0;i<arr.length;i++){ 
                      for(var j=i+1;j<arr.length;j++){ 
                          var curdistance= that.GetDistance(arr[i].latitude,arr[i].longitude,arr[j].latitude,arr[j].longitude);
                          //如果还有靠得很近的点
                          if (curdistance<targetDistance) { 
                              flag=false;
                              //固定删掉一个点
                              arr[i].count=arr[i].count+arr[j].count;
                              arr.splice(j,1)
    
                              //随机剔除掉一个i和j之间的一个点
                              //var randomNum= Math.random();
                              // if(randomNum>0.5){ 
                              // arr[j].count=arr[j].count+arr[i].count;
                              // }else{ 
                              // arr[i].count=arr[i].count+arr[j].count;
                              // }
                              // randomNum>0.5?arr.splice(i,1):arr.splice(j,1);
                              break;
                          }
                      }
                      if(flag==false){ 
                          break;
                      }
                  }
                  //当数组中所有的点两两之间的距离都大于targetDistance的时候退出递归
                  if (flag==false) { 
                      select(arr);
                  }
              }
    
              // 筛选点数
              select(prepareToShowMarker);
    
              // 循环渲染到地图上
              prepareToShowMarker.forEach(function(marker){ 
                  //点数渲染
                  var index=new AMap.Marker({ 
                      map: that.map,
                       icon: new AMap.Icon({             
                          image: that.iconPath,
                          size: new AMap.Size(70, 70),  //图标大小
                          imageSize: new AMap.Size(70, 70)
                      }),
                      position: [marker.longitude, marker.latitude],
                      offset: new AMap.Pixel(-13, -30),
                      clickable: true
                  });
                  that.mapDataMarker.push(index)
    
                  index.on('click', markerUnitClick);
    
                  //数量提示
                  var num = new AMap.Marker({ //创建报警数
                      content:`<span style="color:#fff;text-align: center;">${ marker.count}</span>`,
                      offset: new AMap.Pixel(10,-22) // 相对于基点的偏移位置
                  });
                  num.setMap(that.map);
                  num.setPosition([marker.longitude, marker.latitude]);
                  that.pathContentArr.push(num)
                  num.on('click', markerUnitClick);
    
                  function markerUnitClick(){ 
                      that.$emit('markerUnitMap',marker.id);
                      
                  }
              })
          }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200612154451141.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200612154559112.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz,size_16,color_FFFFFF,t_70