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

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

Code


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

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. 从 CephFS 到 JuiceFS:同程旅游亿级文件存储平台构建之路

    随着公司业务的快速发展,同程旅行的非结构化的数据突破 10 亿,在 2022 年,同程首先完成了对象存储服务的建设.当时,分布式文件系统方面,同程使用的是 CephFS,随着数据量的持续增长,Ceph ...

  2. ast-hook-for-js-RE安装

    # ast-hook-for-js-RE安装 1.项目地址 点我去 2.clone到本地 git clone https://github.com/CC11001100/ast-hook-for-js ...

  3. apache kylin的一些注意事项(解决kylin报错Storage schema reading not supported)

    1.目前我所使用的kylin版本为2.6.2,有时在完成一次构建后会出现fail to locate kylin.properties的异常,如图所示 经排查,定位到kylin源码中的 org.apa ...

  4. springboot搭建http2服务器和h2c服务器 h2 的http/https 请求服务器

    HTTP2.0特性通俗易懂篇:https://www.cnblogs.com/yingsmirk/p/5248506.html深入了解篇:https://www.jianshu.com/p/67c54 ...

  5. IDEA跳转到上一个下一个方法的快捷键

    假如一个方法很不规范,写了好几百行,你想去下一个方法,如果用鼠标往下滑,会挺崩溃的.或者有的时候,就是需要一个一个方法往下看,那么IDEA有没有这样方便的快捷键呢?是有的:按住Alt键,再按上/下方向 ...

  6. Qt音视频开发29-ffmpeg中x264/x265编码库支持

    一.前言 有了解码当然对应又有编码,编码是信息从一种形式或格式转换为另一种形式的过程也称为计算机编程语言的代码简称编码.用预先规定的方法将文字.数字或其它对象编成数码,或将信息.数据转换成规定的电脉冲 ...

  7. 《Spring Boot+Vue全栈开发实战-王松2018》一书pdf+源码下载

    下载地址为: 链接:https://pan.baidu.com/s/18lnF2KemQTqkKaCRmMbvXA 提取码:1pie 版权声明:本书版权属于出版社和作者.仅学习使用,请于下载后24小时 ...

  8. 概率图模型&机器学习 -- 精确推断方法 -- 变量消去(Variable Elimination)和信念传播(Belief Propagation)

    参考资料 西瓜书 An introduction to hidden Markov model -- Rabiner, Juang [机器学习][白板推导系列][合集 1-33]_哔哩哔哩_bilib ...

  9. ArchLinux安装后常见问题的解决

    Q:UEFI引导grub-install报错:variables are not support on this system A:进入安装u盘的时候是传统引导模式,传统模式下无法安装UEFI启动,解 ...

  10. CF div3 995 (A~G)

    期末周之第三把网瘾(真是越来越放肆了...).这次赛时了一把div 3 , 又一次只做出了A~E,写完E后剩下的题没时间看了(受了些寝室噪音的干扰,最后二十分钟才出).赛后看了下F和G,感觉也是一时半 ...