基于高德地图的描点操作,监听地图缩放,展示合理数量的marker

2023-10-27

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);
        }


        
    }




本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

基于高德地图的描点操作,监听地图缩放,展示合理数量的marker 的相关文章

随机推荐

  • 如何在Linux下配置网络访问外网

    Linux下的网络配置 1 查看自己的网卡编号 2 设置使用的网卡 IP地址 网关等参数 3 设置DNS服务器 4 重启网络服务 5 测试是否能ping通外网 6 无法Ping通的异常处理 7 Ping 外网的时候提示Temporary f
  • 鸿蒙3.0应用开发体验

    鸿蒙os3 0发布以来 华为官方开始主推ets arkui开发模式 逐渐抛弃java 为以后去安卓化做铺垫 但目前在笔者体验来看 仍需要大力完善 还有很长的路要走 什么是ets ts是js的超集 而ets是ts的超集 ets后缀的文件中可以
  • Django 迁移数据、迁移服务

    本文介绍两种常用的 Django 服务迁移数据方法 这两种方法都需要在新的服务器部署好数据库 创建好相应的数据库表和用户以后再进行 1 使用dumpdata命令 针对数据量不是很大的项目 可以使用此方法 操作起来比较简单 1 1 数据导出
  • 简单了解IPv4编址

    目录 一 IPv4地址 二 进制转换 三 有类IPv4 四 无类IPv4 4 1 子网掩码 4 2 地址规划 4 3 VLSM可变长子网掩码 五 私有IPv4地址 六 IPv4报文格式 七 IP地址解析 一 IPv4地址 IPv4地址由 网
  • Vue2项目中使用高德地图自定义(Marker)标记点和创建(MassMarks)海量标记点

    前言 本篇文章就是单独分享一下在Vue2项目中如何自定义创建marker标记点和针对要创建庞大数量标记点时所采用的API 能够快速创建数量庞大的marker 不至于在浏览器渲染时产生卡顿的现象 需要了解如何在Vue2项目中引入高德地图请参照
  • [c++/java]递归系列

    本系列是根据个人的做题总结出来 或许有不对之处 望给位大佬指出 同时这个系列也是长期的一个系列 每遇到一个优秀的递归题目 我都会添加上去 基本递归思路 递归之结束条件 个人认为在写递归之前应该首先考虑什么时候递归结束 或者是递归收敛于什么条
  • 有一台电脑怎么挣钱_游戏搬砖就能躺着挣钱?“我就一台电脑,要求不高月入过万就好”...

    随着网络游戏的日益普及 游戏搬砖 已经和代练 陪玩一样 成为很多玩家专职 兼职的工作 对于这样的一份职业 有人不屑 有人眼浅 更多人在看了有搬砖党换一套海景房的新闻 觉得这个职业就是个可以一夜暴富或者躺着挣钱的职业 因而也想自己下海尝试 事
  • 基于stm32作品设计:多功能氛围灯、手机APP无线控制ws2812,MCU无线升级程序

    文章目录 一 作品背景 二 功能设计与实现过程 三 实现基础功能 一 首先是要选材 二 原理图设计 二 第一版本PCB设计 三 焊接PCB板 四 编写单片机程序 五 下载程序验证 四 外壳设计 一 CAD图纸设计 二 磨砂亚克力板 五 重新
  • [Git] 代码管理之 Git(六)Git rebase 压缩提交历史

    我们在工作中 可能会出现这样的情况 一项工作由好几个同事同时完成 然后每个人针对当前的feature都有对应的提交 那么就会造成同一个feature有多次提交的这样的冗余存在 除此之外 如果我们自己针对同一个feature的每天的提交以及一
  • JVM(六)方法调用(补充知识)

    方法调用并不等同于方法中的代码被执行 方法调用阶段唯一的任务就是确定被调用方法的版本 即调用哪一个方法 暂时还未涉及方法内部的具体运行过程 一切方法调用在Class文件里面存储的都只是符号引用 而不是方法在实际运行时内存布局中的入口地址 也
  • 关于H264相关的EBSP,RBSP,SODP的说明

    1 关于H264相关的EBSP RBSP SODP的说明 1 EBSP 扩展字节序列载荷 Encapsulated Byte Sequence Payload 它去掉了00 00 01 00 00 00 01这些起始码 但包含了0x3防止竞
  • 时序约束优先级_静态时序分析圣经翻译计划——附录A:SDC

    本附录将介绍1 7版本的SDC格式 此格式主要用于指定设计的时序约束 它不包含任何特定工具的命令 例如链接 link 和编译 compile 它是一个文本文件 可以手写或由程序创建 并由程序读取 某些SDC命令仅适用于实现 implemen
  • @Around简单使用示例——SpringAOP增强处理

    Around的作用 既可以在目标方法之前织入增强动作 也可以在执行目标方法之后织入增强动作 可以决定目标方法在什么时候执行 如何执行 甚至可以完全阻止目标目标方法的执行 可以改变执行目标方法的参数值 也可以改变执行目标方法之后的返回值 当需
  • 如何搭建Spring开发环境呢?

    转自 如何搭建Spring开发环境呢 下文讲述搭建Spring开发环境的方法分享 如下所示 由于Spring是基于Java代码的一个框架 所以在Spring环境搭建之前 我们需为开发环境安装好 JDK Java开发环境 Eclipse Ja
  • 来自ebay内部的「软件测试」学习资料,覆盖GUI、API自动化、代码级测试及性能测试等,Python等,拿走不谢!...

    在软件测试领域从业蛮久了 常有人会问我 刚入测试一年 很迷茫 觉得没啥好做的 测试在公司真的不受重视 我是不是去转型做开发会更好 资深的测试架构师的发展路径是怎么样的 我平时该怎么学习 我估计不少人有这样的想法 甚至你也会被身边的人所影响
  • React 中constructor 作用

    React 中constructor 作用 react中的constructor大体有两个作用 1 初始化this state 2 纠正方法的this的指向 constructor props super props this state
  • 大数据毕设 python+深度学习+opencv实现植物识别算法系统

    文章目录 0 前言 2 相关技术 2 1 VGG Net模型 2 2 VGG Net在植物识别的优势 1 卷积核 池化核大小固定 2 特征提取更全面 3 网络训练误差收敛速度较快 3 VGG Net的搭建 3 1 Tornado简介 1 优
  • LWIP学习笔记(2)---IP协议实现细节

    IP头 收到的数据首先保存在pbuf结构中 The IPv4 header struct ip hdr version header length PACK STRUCT FLD 8 u8 t v hl type of service PA
  • C++11线程库 (六) 条件变量 Condition variables

    一 什么是条件变量 条件变量类 condition variable 是一个同步原语 它可以在同一时间阻塞一个线程或者多个线程 直到其他线程改变了共享变量 条件 并通知 primitive 原语 表达的是基础 基本的 是其他复杂应用的构建基
  • 基于高德地图的描点操作,监听地图缩放,展示合理数量的marker

    1 根据两点经纬度算两点之间的距离函数 function Rad d return d Math PI 180 0 经纬度转换成三角函数中度分表形式 计算距离 参数分别为第一点的纬度 经度 第二点的纬度 经度 function GetDis