高德地图地图层级不同显示marker数量不同
页面渲染获取经纬度数据（mapData）以后初始化地图initMap()方法
页面效果
放大比例后点数变多
在这里插入图片描述
<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:`${marker.count}`,
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);
}
})
}
}