高德API JS 地图获取多个坐标点的中心点

news2024/11/24 3:58:44

高德API JS 地图获取多个坐标点的中心点

一、需求

我需要:

  • 在地图上展示多个地点
  • 地图缩放到合适的大小,要求刚好能显示全部点位
  • 边缘留有一部分间隔。

做成如图所示这样。
在这里插入图片描述

在这里插入图片描述

二、需要用到的 AMap 类库

经过一下午的研究,弄出来了。

需要以下这些 AMap 的类库:

  • AMap.Bounds() 区域
  • AMap.LngLat() 点坐标(基础点位)
  • AMap.setBounds() 设置地图区域,这会自动移动地图画面到这个区域中

高德地图 API Bounds 的官方文档:
https://lbs.amap.com/api/javascript-api-v2/documentation#bounds

在这里插入图片描述

三、实现

比如有这样一个点位数组,需要按上面的要求显示到地图中

[
	{"name":"大明湖","position":[117.023666,36.67672],"note":"","type":"","img":""},
	{"name":"济南五龙潭","position":[117.014772,36.665984],"note":"","type":"","img":""},
	{"name":"济南高新万达","position":[117.128471,36.686068],"note":"","type":"","img":""},
	{"name":"济南宜家","position":[116.928408,36.663449],"note":"","type":"","img":""},
	{"name":"济南华山风景区","position":[117.070015,36.728507],"note":"","type":"","img":""}
]

1. 获取这些点中的最值

描述一个区域需要这个区域的对角线上的两个点的坐标值。

就需要找出这些点的最值。

我写了个方法

/**
 * 获取区域对角线的两点坐标,即这个区域内的最小坐标值和最大坐标值
 *
 * @param pointerArray [[a,b],[c,d]]
 * @return Array {min:number[a,b], max:number[c,d]}
 */
getMaxBoundsPointer(pointerArray){
    let lngArray = pointerArray.map(item => item[0])
    let latArray = pointerArray.map(item => item[1])

    return {
        min: [Math.min(...lngArray),  Math.min(...latArray)],
        max: [Math.max(...lngArray),  Math.max(...latArray)],
    }
},

它接收的是这些点位的数组,格式是 [[a,b],[c,d]],如下即可。

let maxLocations =  this.getMaxBoundsPointer(pointer.pointerArray.map(item => item.position))

获取到的结果如下:

在这里插入图片描述

2. 计算合适的地图边界距离

当显示这些点的时候,如果你使用上面的区域,就会发现有些点跑到了地图的最边缘。
这不是我们想要的,所以需要给它加一个边界值。

注意
合适的边界距离并不是一个定值,因为这些点的距离是不定的,有些可能是几百米,有些可能是几十公里。
以上只是一个点位集合的展示,而我还需要它适配其它一些点位集合,这些集合的距离间隔不定。

所以我们需要用计算出来的 maxLocations 来计算这个区域的长宽值,然后再取它的 1/4 作为边界,显示的就会比较合理。

// 取区间的 1/4 作为地图的边界
let lngGap = (maxLocations.max[0] - maxLocations.min[0]) / 4
let latGap = (maxLocations.max[1] - maxLocations.min[1]) / 4

3. 计算新的区域值

新的区域值需要在原来极点坐标的基础之上,加上前一步计算出来的边界值。

// 新的区域极点坐标
let min = new AMap.LngLat(maxLocations.min[0] - lngGap, maxLocations.min[1] - latGap)
let max = new AMap.LngLat(maxLocations.max[0] + lngGap, maxLocations.max[1] + latGap)

4. 设置地图的 Bounds

设置地图的 Bounds。

  1. 当点位数组数量多于一个点时,就按上面的方法获取区域值,并设置它 AMap.setBounds()
  2. 当点位数组数量是一个点时,就把这个点作为地图的中心点,通过 AMap.setCenter() 来设置中心点
  3. 当点位数量为 0 时,不处理
// 1. 多个点时,设置 bounds
if (pointer.pointerArray.length > 1){
    let bounds = new AMap.Bounds(min, max)
    this.map.setBounds(bounds)
}
// 2. 一个点时,将其作为中心点
else if (pointer.pointerArray.length === 1){
    console.log(pointer.pointerArray)
    let centerLngLat = new AMap.LngLat(...pointer.pointerArray[0].position)
    this.map.setCenter(centerLngLat)  // 设置地图中心点坐标
}
// 3.
else {

}

四、完活儿

成品示例:

https://kylebing.cn/tools/map/#/pointer/pointer-viewer

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/667471.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【计算机网络自顶向下】简答题习题总结(一)

计算机网络是什么 两个及以上具有独立操作系统的计算机通过某些介质连接成的相互共享软硬件资源的集合体。 计算机网络两大功能 连通性和共享 如何描述Internet 分为两方面 具体构成 计算机互连设备、通信链路、分组交换设备 提供服务: 提供网络应用基础架构为分布式…

计网第二章实验2:DNS

DNS实验pdf下载地址(科学上网):Wireshark_DNS_v7.0 (umass.edu) 实验前置知识 nslookup命令 nslookup –option1 –option2 host-to-find dns-server 如果dns-server不指定的话那么就是默认的:本地DNS服务器 选项其一 -typeNS or -typeA 所代表的意思不…

文心一言 VS 讯飞星火 VS chatgpt (43)-- 算法导论5.4 7题

七、为使特征序列长度的下界变得更精确,请说明在 n 次硬币的公平抛掷中,不出现比Ign - 2lglgn 更长的连续正面特征序列的概率小于 1/n。 文心一言: 在 n 次硬币的公平抛掷中,每个硬币正、反面朝上的概率均为 1/2。让我们考虑一个…

【人工智能技术专题】「入门到精通系列教程」零基础带你进军人工智能领域的全流程技术体系和实战指南(LLM、AGI和AIGC都是什么)

零基础带你掌握人工智能全流程技术体系和实战指南(LLM、AGI和AIGC都是什么) 前言专栏介绍专栏说明学习大纲前提条件面向读者学习目标核心重点三连问核心学习目标和方向 什么是LLM大语言模型概念定义训练方式机器学习的类型LLM与无监督学习什么是无监督学…

视频剪辑培训班要学多久 视频剪辑的培训班有用吗

视频剪辑培训班要学多久?视学员的基础而定,零基础的学员可能需要花费较多的时间,而有基础的学员则更快上手。另外,学习的内容也会影响到学习周期。视频剪辑的培训班有用吗?靠谱的培训班会比自学更有用,效率…

为什么老板宁愿招年轻测试员?

测试员,30岁是一个分水岭,年龄越大越难找工作,为何?下面通过几方面来谈谈,为什么老板宁愿招年轻测试员。 可塑性强 年老的测试员可塑性不强了,通俗来讲,不会被老板画的大饼忽悠了。 而年轻人&…

canvas绘制s形曲线

<!DOCTYPE html> <html> <head><title>S形曲线示例</title> </head> <body><canvas id"canvas" width"400" height"400"></canvas><script>var canvas document.getElementById(c…

VUE-3组合API

1、为什么学vue3&#xff1f; 2020年09月18日&#xff0c;正式发布vue3.0版本。但是由于刚发布周边生态不支持&#xff0c;大多数开发者处于观望。 现在主流组件库都已经发布了支持vue3.0的版本&#xff0c;其他生态也在不断地完善中&#xff0c;这是趋势。 element-plus A Vue…

spring.freemarker 2306

Springboot Properties 2306 >spring.freemarker 模板属性 NameDescriptionDefault Valuespring.freemarker.allow-request-overrideWhether HttpServletRequest attributes are allowed to override (hide) controller generated model attributes of the same name.falses…

Cisco MPLS VPN Option A

一、拓扑 二、思路 1、AS 100内运行OSPF&#xff0c; AS 200运行OSPF打通底层网络 2、AS 100和200运行LDP协议&#xff0c;分发标签 3、PE1和ASBR-PE1建立VPNV4邻居关系&#xff08;可以看成是两个单域的PE建立VPNV4邻居关系&#xff09;&#xff0c;PE2和ASBR-PE2建立VPNV4…

Github拉取老版本或releases稳定版本的仓库

Github拉取老版本或releases稳定版本的仓库 文章目录 Github拉取老版本或releases稳定版本的仓库拉取老版本方法一&#xff1a;clone方法二&#xff1a;checkout 下载 releases 版本 拉取老版本 方法一&#xff1a;clone 随便进入一个仓库&#xff0c;查看分支信息 针对要拉取…

spring-security -oauth2 整合 JWT

前言 在这个基础上&#xff0c;进行整合。 spring security oauth2学习 -- 快速入门_本郡主是喵的博客-CSDN博客 1.jwt的一般使用 先把 reids,common-pools 等依赖删掉。 删掉redis的下相关配置 1.1 导入依赖 <!--jjwt--><dependency><groupId>io.json…

2023年测试工程师的职业规划?从入行到“顶薪“卷起来...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 初级测试工程师&a…

Python实现性能自动化测试竟然如此简单

一、思考 1.什么是性能自动化测试? 性能系统负载能力超负荷运行下的稳定性系统瓶颈自动化测试使用程序代替手工提升测试效率性能自动化使用代码模拟大批量用户让用户并发请求多页面多用户并发请求采集参数&#xff0c;统计系统负载能力生成报告 2.Python中的性能自动化测试…

Netty 进阶

粘包与半包 粘包和半包问题的出现原因主要是因为 TCP 协议是面向流的&#xff0c;而不是面向报文的。即发送方给接收方传输的是一整个数据流&#xff0c;但是接收方并不知道数据流中的哪一部分才是一个完整的数据报&#xff0c;需要自行判断。 如果是在发送方解决&#xff0c;通…

微服务链路追踪SkyWalking的介绍和部署

skywalking和链路追踪 SkyWalking介绍 首先我们要明白一点&#xff0c;在微服务的架构中&#xff0c;为什么要做链路追踪&#xff1f;解决问题的痛点在哪里&#xff1f;其实无外乎是如下几个问题&#xff1a; 如何将整个调用链路串起来&#xff0c;并能够快速定位问题&#…

供应链管理是干什么的,企业为什么要用供应链管理?

供应链管理的核心是&#xff1a;需求、生产、供应等方面的管理。没有对需求的管理&#xff0c;供应链管理就没有存在的价值&#xff0c;需求管理主要是产品生命周期管理&#xff0c;订单及预测管理&#xff0c;尽管预测永远是错误的&#xff0c;但这并不排除你可以做出一个相对…

C语言学习笔记:单链表

✨博文作者&#xff1a;烟雨孤舟 &#x1f496; 喜欢的可以 点赞 收藏 关注哦~~ ✍️ 作者简介: 一个热爱大数据的学习者 ✍️ 笔记简介&#xff1a;作为大数据爱好者&#xff0c;以下是个人总结的学习笔记&#xff0c;如有错误&#xff0c;请多多指教&#xff01; 目录 单链表…

深度学习-网络模型的可视化工具总结

强烈感谢公众号&#xff1a;尤而小屋 提供的文章思路 神经网络可视化难点在哪里&#xff1f; 神经网络可视化的难点在于以下几个方面&#xff1a; 复杂性&#xff1a;神经网络的结构通常非常复杂&#xff0c;包含大量的神经元和连接。对于大规模网络&#xff0c;准确地可视化每…

基于STM32的四旋翼无人机项目(二):MPU6050姿态解算(含上位机3D姿态显示教学)

前言&#xff1a;本文为手把手教学飞控核心知识点之一的姿态解算——MPU6050 姿态解算&#xff08;飞控专栏第2篇&#xff09;。项目中飞行器使用 MPU6050 传感器对飞行器的姿态进行解算&#xff08;四元数方法&#xff09;&#xff0c;搭配设计的卡尔曼滤波器与一阶低通滤波器…