问题:给一个距离,如何确定4326地图缩放等级或者分辨率使地图视口范围为这个距离

  1. 我本来打算计算从地图视口左上角到右下角的距离来计算地图缩放的,然后发现不好算,我也不会算,于是就计算水平方向距离的缩放。
  2. 然后我发现了地图分辨率的定义使是 : 分辨率——屏幕上一个像素代表多少地图坐标单位
  3. 而问ChatGPT得知,4326地图的地图坐标单位是°,没错,经纬度的度
  4. 然后思路就来了,算出这段距离在水平方向上占据的经度数量,然后再除以地图的像素宽度,不就是分辨率了

Code


/**
* 根据距离设置地图分辨率
* @param {Number} distance 空间中的实际距离,单位:米
*/
export function setResolutionByDistance(distance) {
const map = window.map // Openlayers的地图对象我放到window里面了
const latitude = map.getView().getCenter()[1] // 当前地图中心坐标的纬度值
const pixelWidth = map.getSize()[0]
const equatorCircumference = 40075160; // 地球赤道周长(以米为单位)
const latitudeRad = latitude * Math.PI / 180 const longitudeCount = distance / (equatorCircumference * Math.cos(latitudeRad) / 360) // 跨越的经度数量
const resolution = longitudeCount / pixelWidth // 分辨率 map.getView().setResolution(resolution)
}

Reference

  1. https://blog.csdn.net/hi_kevin/article/details/34452601
  2. https://ask.supermap.com/125936

OpenLayers 4326地图 根据距离设置地图分辨率的更多相关文章

  1. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  2. ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测

    一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...

  3. 百度地图API示例之根据城市名设置地图中心点

    代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  4. 百度地图API示例之设置地图最大、最小级别

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  5. 百度地图API示例之设置地图显示范围

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  6. arcgis server账号需要设置地图缓存的访问权限

    如果gis服务起不来,那么可以看看arcgis server账号有没有设置地图缓存的访问权限,有可能arcgis server账号没有这个文件夹的访问权限.  本文用菊子曰发布

  7. OpenLayers调用arcgis server发布的地图服务

    有两种方式可以调用arcgis server发布的地图服务,一种是rest,一种是wms.  地图的投影为900913,arcgis server为10.0版本,地图服务的空间参考为3857.   与 ...

  8. 高德地图Javascript API设置域名白名单

    在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...

  9. Echarts 设置地图上文字大小及颜色

    Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...

  10. echarts设置地图大小比例,大小设置

    设置地图大小可通过以下属性设置: geo.aspectScale number [ default: 0.75 ] 这个参数用于 scale 地图的长宽比. 最终的 aspect 的计算方式是:geo ...

随机推荐

  1. 初识RPA以及简单的RPA项目——微信群发机器人

    一.RPA的认识和理解 RPA(Robotic Process Automation)即是机器人流程自动化,简称RPA,是一种自动化技术,可以帮助组织实现业务流程的自动化执行,提高效率和准确性.按我的 ...

  2. IOS实现水波纹

    IOS实现水波纹 需要实现一个水波纹效果 其实就是画两个正弦函数或者余弦函数的layer在view上面,根据屏幕刷新率来重绘,更新其左右偏移量来让其看起来是在左右移动 具体实现 定义两个layer,用 ...

  3. 运筹帷幄,质效兼修:源启云原生基础设施管理平台助推企业IT基础资源能效跃迁

    导语 数字化大潮席卷,企业需要建设一套能够满足云原生环境下基础资源一体化管理和快速交付的基础设施自动化管理系统,系统需要具备"云上""云下""容器&q ...

  4. vba interpreter 结束

    https://github.com/inshua/vba-interpreter 已覆盖几乎 VB 所有的特性,只是库还不够全. VB 语言自身较为落后,语法也有诸多设计不当.最严重的莫过于函数和数 ...

  5. tc端口流量控制(带宽限速)

    tc qdisc add dev ens192 root handle 1: htbtc class add dev ens192 parent 1: classid 1:1 htb rate 80m ...

  6. 从 ftp 上下载文件、文件夹

    下载子文件夹: wget -r -nH --cut-dir=1 ftp://ip/folder_name/ 下载压缩文件: wget ftp://ip/folder_name/folder_name/ ...

  7. 实现一个分布式调用(OkHttp+SpringBoot)

    很多情况,trace是分布在不同的应用中的,最常用的远程调用方式就是Http. 在这种情况下,我们通常通过增加额外的Http Header传递Trace信息,然后将其组织起来. 本部分通过构建一个目前 ...

  8. 2024 Nuxt3 年度生态总结

    hello,大家好,我是程序员海军.很荣幸能与大家分享我今年的第三篇文章.在过去的一年里,我深入探索了Nuxt3,并在多个项目中实际应用了这一前沿框架,从而对其功能和应用有了全面而深刻的理解.今天,我 ...

  9. Qt/C++音视频开发59-使用mdk-sdk组件/原qtav作者力作/性能凶残/超级跨平台

    一.前言 最近一个月一直在研究mdk-sdk音视频组件,这个组件是原qtav作者的最新力作,提供了各种各样的示例demo,不仅限于支持C++,其他各种比如java/flutter/web/androi ...

  10. Pelco-D控制协议

    1. 通令参数: 标准速率为4800bps,无校验,  8位数据位,1位停止位 2.命令串格式: 一个PTZ控制命令为7字节的十六进制代码,格式如下: Word  1 Word2 Word 3 Wor ...