原文:
基于高德地图的描点操作,监听地图缩放,展示合理数量的marker
2.给地图绑定监听事件
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lx583274568/article/details/54089707
1.根据两点经纬度算两点之间的距离函数
function Rad(d){
return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
}
//计算距离,参数分别为第一点的纬度,经度;第二点的纬度,经度
function GetDistance(lat1,lng1,lat2,lng2){
var radLat1 = Rad(lat1);
var radLat2 = Rad(lat2);
var a = radLat1 - radLat2;
var b = Rad(lng1) - 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; //输出为公里
//s=s.toFixed(4);
return s;
}
2.给地图绑定监听事件
map.on("zoomchange",function(){
for (var i = pathContentArr.length - 1; i >= 0; i--) {
pathContentArr[i].setMap(null);
}
for (var i = pathMarkerArr.length - 1; i >= 0; i--) {
pathMarkerArr[i].setMap(null);
}
pathMarkerArr=[];
pathContentArr=[];
drawMarkerByDistance(map.getZoom())
})
3.drawMarkerByDistance函数【会根据第i个点和第i+1个点之间的距离进行初步筛选,其中select函数对初步筛选出来的点进行了所有点两两之间距离的二次筛选】
function drawMarkerByDistance(zoom){
var perDistance=0; //当前累计公里数
var zoom=zoom||6;
switch (zoom){
case 3:
var targetDistance=800; //km
break;
case 4:
var targetDistance=400; //km
break;
case 5:
var targetDistance=200; //km
break;
case 6:
var targetDistance=120; //km
break;
case 7:
var targetDistance=60; //km
break;
case 8:
var targetDistance=30; //km
break;
case 9:
var targetDistance=15; //km
break;
case 10:
var targetDistance=7; //km
break;
case 11:
var targetDistance=4; //km
break;
case 12:
var targetDistance=1; //km
break;
case 13:
var targetDistance=0.5; //km
break;
default:
var targetDistance=0.25; //km
}
var prepareToShowMarker=[];
for (var i = 0; i < curShipPolyLineData.length; i++) {
//第一个点和最后一个点默认展示出来,累计长度大于目标长度的画出来
if (i==0||i==curShipPolyLineData.length-1 || (curShipPolyLineData[i].distance+perDistance)>targetDistance) {
var marker={
lat:parseFloat(curShipPolyLineData[i].latitude),
lng:parseFloat(curShipPolyLineData[i].longitude),
course:curShipPolyLineData[i].course,
AddTime: curShipPolyLineData[i].AddTime,
}
prepareToShowMarker.push(marker);
}
if(i<curShipPolyLineData.length-1 && i>1){
if ((curShipPolyLineData[i].distance+perDistance)>targetDistance) {
perDistance=0;
}else{
perDistance+=curShipPolyLineData[i].distance;
}
}
}
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=GetDistance(arr[i].lat,arr[i].lng,arr[j].lat,arr[j].lng);
//如果还有靠得很近的点
if (curdistance<targetDistance) {
flag=false;
//随机剔除掉一个i和j之间的一个点
Math.random()>0.5?arr.splice(i,1):arr.splice(j,1);
break;
}
}
if(flag==false){
break;
}
}
//当数组中所有的点两两之间的距离都大于targetDistance的时候退出递归
if (flag==false) {
select(arr);
}
}
select(prepareToShowMarker);
for (var i = prepareToShowMarker.length - 1; i >= 0; i--) {
var position=[prepareToShowMarker[i].lng,prepareToShowMarker[i].lat];
var content = new AMap.Marker({
content:prepareToShowMarker[i].AddTime,
position: position,
title: prepareToShowMarker[i].AddTime,
offset:new AMap.Pixel(20,0),
map: map
});
pathContentArr.push(content);
var marker = new AMap.Marker({
offset:new AMap.Pixel(0,0),
icon:"new_images/arrow_r.png",
angle:((prepareToShowMarker[i].course-90)%360),
position: position,
map: map
});
pathMarkerArr.push(marker);
}
}