问题:给一个距离,如何确定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. PowerShell一键下载Nuget某个包的所有版本

    一转眼好几年没有写博客了,来博客园冒个泡,最近由于工作需要,内网办公,幸运的是只需要上传一个*.nupkg一个包信息就可以在私有nuget下载到了,下面就用PowerShell编写下载脚本,需要注意的 ...

  2. RAG分块策略:主流方法(递归、jina-seg)+前沿推荐(Meta-chunking、Late chunking、SLM-SFT)

    RAG分块策略:主流方法(递归.jina-seg)+前沿推荐(Meta-chunking.Late chunking.SLM-SFT) 大多数常用的数据分块方法(chunking)都是基于规则的,采用 ...

  3. Vue3 面试题 (2023-09-26更新)

    Vue3 对比 Vue2 做了那些改进? 1. 响应式系统 vue2 中使用的 Object.defineProperty 实现的响应式,劫持整个对象,递归遍历所有属性,给每个属性添加 getter ...

  4. kubernetes上报Pod已用内存不准问题分析

    1.问题描述: 经常有业务反馈在使用容器云平台过程中监控展示的业务使用内存不准,分析了下kubernetes采集Pod内存使用的实现原理以及相应的解决思路 2.问题分析: 2.1 问题排查: 监控数据 ...

  5. Qt开发经验小技巧111-120

    在不同的平台上文件路径的斜杠也是不一样的,比如linux系统一般都是 / 斜杠,而在windows上都是 \ 两个反斜杠,Qt本身程序内部无论在win还是linux都支持 / 斜杠的路径,但是一些第三 ...

  6. Qt编写的项目作品33-斗图神器(雨田哥作品)

    一.功能特点 支持HTTP,HTTPS网络表情图片下载,本地缓存. 采用MV模式,支持大量图片表情预览查看. 采用多线程异步下载图片刷新. 图片搜索功能(因网络提供API无信息字段提供,占搜索不了.但 ...

  7. 使用MathNet.Numerics库构造矩阵并初始化时,编译器报错“this方法没有任何重载采用"1"个参数”

    最近在使用MathNet.Numerics库作一些数据处理工作,构造一个矩阵并初始化时,编译器报错"this方法没有任何重载采用"1"个参数". 问题分析: 构 ...

  8. kubernetes系列(二) - kubectl的入门操作

    目录 1. 安装 / 卸载 1 .1 前提条件 1.2 安装方式 1.3 卸载 2. 通过 minikube 学习 k8s 实操基础 2.1 创建集群 2.2 部署应用 2.3 探索当前应用[故障排除 ...

  9. Appium_iOS_Safari测试脚本(2)

    经过多次调试,在Safari上的测试脚本终于可以运行了,不过部分元素还是无法识别,还需要继续调试: #!/usr/bin/env/python # -*-coding:utf-8-*- import ...

  10. 使用ffmpeg去除音频静音

    直接使用cmd命令ffmpeg -i input.wav -af silenceremove=stop_periods=-1:stop_duration=1:stop_threshold=-30dB ...