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

news2024/11/26 20:39:17

高德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

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

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

相关文章

使用Python绘制6.1儿童节消消乐,素描图,词云图,字符画图,提取轮廓图及蒙太奇效果图

这篇博客将介绍如何使用Python绘制6.1儿童节消消乐,素描图,词云图,字符画图,提取轮廓图及蒙太奇效果图。 使用Python绘制端午dragboat消消乐 美轮美奂的界面效果 1. 效果图 6.1儿童节快乐原始图VS素描图: 素描进阶…

内网穿透-公网ip-方法总结-访问内网服务器-frp-虚拟服务器

文章目录 1.固定IP2.虚拟服务器转发3.IP盒子4.总结 1.固定IP 第一种方式是向三大电信服务商购买专用通道,固定IP,这种方式是最正统,也是各大虚拟服务器服务商采用的方式,宽带带宽有稳定的保障。在访问量不足的前提下,…

anaconda 安装_Linux系统上

安装流程 1 下载安装包 官网 https://www.anaconda.com/download#downloads 2 执行安装 bash Anaconda3-2021.11-Linux-x86_64.sh3 安装过程 一路enteryes,接受licence、指定安装路径和init之后安装完成。 检验anaconda是否安装成功。 conda --version或 con…

【LeetCode】12,整数转罗马数字。 难度等级:中等。易错点:使用 python 字典构建哈希表时要考虑哈希表是否有序

文章目录 一、题目二、我的解法:基于有序哈希表的贪心算法2.1 使用 dict 构建哈希表2.2 使用两个 list / tuple 构建有序哈希表 一、题目 二、我的解法:基于有序哈希表的贪心算法 2.1 使用 dict 构建哈希表 贪心法则:我们每次尽量使用最大的…

基于AT89C52单片机的多功能万年历设计

点击链接获取Keil源码与Project Backups仿真图: https://download.csdn.net/download/qq_64505944/87853675 源码获取 目 录 摘 要 1 1 方案论证 2 1.1 单片机芯片的选择方案和论证 2 1.2 显示模块选择方案和论证 2 1.3 时钟芯片的选择方案和论证 3 1.4 电路设计…

BitLocker加密卷“恢复密钥(数字密码)”提取还原

BitLocker是微软Windows自带的用于加密磁盘分卷的技术。 通常,解开后的加密卷通过Windows自带的命令工具“manage-bde”可以查看其恢复密钥串,如下图所示: 如图,这里的数字密码下面的一长串字符串即是下面要提取恢复密钥。 在计…

IMA/EVM完整性检测代码分析

IMA/EVM完整性检测 IMA(Integrity Measurement Architecture)是一个内核安全子系统,用于检测文件或数据的完整性和安全性。IMA的hook机制指的是内核接口钩子(kernel interface hooks),用于向IMA注册和实现…

第三章 部署Web及WDS服务

♥️作者介绍:奇妙的大歪 ♥️个人名言:但行前路,不负韶华! ♥️个人简介:云计算网络运维专业人员 目录 一.什么是web 1.www(world wide web)万维网 世界 维度 2.www服务软件 3.info…

ElementUI-Form表单二次封装

一、Form组件二次封装考虑组件构成: form组件:input text passworldselectcheckboxradio文本域日期 二、实现Form表单的二次封装: 1. 分析出对应的位置 开始抽离组件 2. 如果需要产生多个form表单,则需要产生多个el-form-item…

学习路之gis--百度离线地图下载制作

在有些情况下需要使用地图,但又不能访问外网,这时你需要一个离线地图。本文介绍如何制作百度离线地图。 下面将介绍如何实现一个离线版百度地图: 1. 下载百度地图瓦片 下载网址:望远网-百度地图下载 首先需选择下载地图瓦片的样式…

BUG: scheduling while atomic: fpv_cams/605/0x00010001

IIO框架下IMU驱动的接口在定时器中断内调用报错,因调用IO读定时间较长会导致睡眠的发生,因为内核总是崩。 尝试了几种解决方法: 1.在IIO框架里,使用 spidev 的接口来读写,错误依旧; 2.去掉IIO框架&#x…

香橙派One(全志H3芯片)编译烧写U-boot、Linux内核zImage、dtb

一、编译烧写u-boot 1.1 源码和工具下载: 香橙派提供了u-boot源码和交叉编译链工具: (1)u-boot(2020.04)下载地址:https://github.com/orangepi-xunlong/u-boot-orangepi (2&#…

MyBatis - MyBatis Generator

文章目录 1.什么是 MyBatis Generator2.使用 MyBatis Generator2.1 导入依赖2.2 application 配置2.3 添加 Java 配置2.4 MBG 配置2.5 生成代码2.6 基本 CRUD 操作 3.进阶使用 MyBatis Generator3.1 基于条件的 CRUD3.2 子查询、Group 与 Join 查询3.3 一对一查询、一对多查询 …

ANSYS Workbench中的网格优化方法

自 50 年代后期以来,有限元法 (FEM) 已被用作解决工程问题的强大工具。当时的计算是手工进行的,该方法是基于力的,而不是我们今天使用的基于位移的方法。由于计算机工业的进步,已经开发出各种有限元商业软件。Ansys 可以被认为是全…

Nginx网站部署

Nginx网站部署 一、访问状态统计配置二、基于授权的访问控制三、基于客户端的访问控制四、基于域名的 Nginx 虚拟主机五、基于IP 的 Nginx 虚拟主机六、基于端口的 Nginx 虚拟主机 一、访问状态统计配置 1.先使用命令/usr/local/nginx/sbin/nginx -V 查看已安装的 Nginx 是否包…

常用抓包工具使用-wireshark使用(二)

常用抓包工具使用-wireshark使用(二) 文章目录 常用抓包工具使用-wireshark使用(二)前言一、wireshark安装1.1 windows安装1.2 mac安装 二、wireshark抓包和过滤2.1 打开Wireshark2.2 选择网络接口:2.3 wireshark抓包页…

【Nginx 网络服务】

目录 一、Nginx和Apache的优点和缺点二、编译安装Nginx服务1.关闭防火墙,将安装nginx所需软件包传到/opt目录下2.安装依赖包3.创建运行用户、组4.编译安装Nginx5.检查、启动、重启、停止 nqinx服务 三、认识Nginx服务的主配置文件 nginx.conf1、系统文件支持数量2&a…

商场内怎么导航?商场导航图怎么画?

商场内怎么导航?大型购物商场是目前一二线城市最常见的购物场所,占地面积较大,布局错综复杂,商品比较齐全,如果没有商场地图导航,会导致新顾客难以找到想要的商品,那么大型购物商场商场地图怎么…

索引特性.

目录 没有索引,可能会有什么问题认识磁盘MySQL与存储先来研究一下磁盘在看看磁盘中一个盘片扇区定位扇区结论磁盘随机访问(Random Access)与连续访问(Sequential Access) MySQL 与磁盘交互基本单位建立共识索引的理解建立测试表插入多条记录查看插入结果中断一下---…

打跑个人开源转角的“拦路虎”——我的开源之路

从参与Apache 开源项目,到凭借业务需求独自开发个人开源项目;从项目开源出来无人问津到至今500star,多个企业级用户,在开源过程中,我也从走过低谷,一度想过放弃,但仍然选择坚持至今日。 这一路…