OpenLayers 4326地图 根据距离设置地图分辨率
问题:给一个距离,如何确定4326地图缩放等级或者分辨率使地图视口范围为这个距离
- 我本来打算计算从地图视口左上角到右下角的距离来计算地图缩放的,然后发现不好算,我也不会算,于是就计算水平方向距离的缩放。
- 然后我发现了地图分辨率的定义使是 : 分辨率——屏幕上一个像素代表多少地图坐标单位
- 而问ChatGPT得知,4326地图的地图坐标单位是°,没错,经纬度的度
- 然后思路就来了,算出这段距离在水平方向上占据的经度数量,然后再除以地图的像素宽度,不就是分辨率了
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
OpenLayers 4326地图 根据距离设置地图分辨率的更多相关文章
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...
- 百度地图API示例之根据城市名设置地图中心点
代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
- 百度地图API示例之设置地图最大、最小级别
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之设置地图显示范围
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- arcgis server账号需要设置地图缓存的访问权限
如果gis服务起不来,那么可以看看arcgis server账号有没有设置地图缓存的访问权限,有可能arcgis server账号没有这个文件夹的访问权限. 本文用菊子曰发布
- OpenLayers调用arcgis server发布的地图服务
有两种方式可以调用arcgis server发布的地图服务,一种是rest,一种是wms. 地图的投影为900913,arcgis server为10.0版本,地图服务的空间参考为3857. 与 ...
- 高德地图Javascript API设置域名白名单
在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...
- Echarts 设置地图上文字大小及颜色
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...
- echarts设置地图大小比例,大小设置
设置地图大小可通过以下属性设置: geo.aspectScale number [ default: 0.75 ] 这个参数用于 scale 地图的长宽比. 最终的 aspect 的计算方式是:geo ...
随机推荐
- nvm安装node报错Get "https://nodejs.org/dist/latest/SHASUMS256.txt": dial tcp 104.20.23.46:443: i/o timeout
windows上通过nvm管理node版本,在本地安装了nvm后,通过nvm安装node,报错了,信息: Could not retrieve https://nodejs.org/dist/late ...
- Vue组件样式穿透
前情 Vue是目前主流的前端框架之一,我是Vue框架的忠实老用户,平时开发中如果再依赖个第三方组件库那样开发效率就会事半功倍. 第三方组件库可以很大提高开发效率,但是叫会有一些UI效果需要自定义,如想 ...
- 数据加速器 GooseFS 1.2.0 版本正式发布
新春已来临,腾讯云存储团队正式在官方网站上架数据加速器 GooseFS 产品,同时数据加速器 GooseFS 1.2.0 版本正式发布.该版本总结并收敛了 GooseFS 在过往大规模生产环境实践中遇 ...
- 精通 ASP.NET Core MVC (第 7 版) 源码下载
将使用的 .NET 版本更新到 5.0 版本. GitHub 地址:https://github.com/haoguanjun/pro-asp.net-core-mvc-2
- 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-8- 元素高级定位技巧(详细教程)
1.简介 随着网页的复杂性和动态性的增加,自动化测试变得越来越重要.Playwright作为一款强大的无头浏览器测试库,提供了多种元素定位方式,使得我们能够轻松地对网页进行自动化操作.在基础的定位方式 ...
- 天地图接口Python代码详解
天地图是中国国家测绘地理信息局推出的一款权威.全面的在线地理信息系统,提供了丰富的卫星影像.地形.矢量图等地图资源.开发者可以通过天地图提供的API接口,实现地图的展示.搜索.定位等功能.本文将详细介 ...
- Qt/C++编写地图应用/离线地图下载/路径规划/轨迹回放/海量点/坐标转换
一.前言说明 这个地图组件写了很多年了,最初设计的比较粗糙,最开始只是为了满足项目需要,并没有考虑太多拓展性,比如最初都是按照百度地图写死在代码中,经过这几年大量的现场实际应用,以及大量的用户提出的改 ...
- Qt编写物联网管理平台31-用户权限管理
一.前言 随着需求的不断变化,功能的增多,在用户信息这块,除了需要用户登录退出验证以外,还需要有个简单的用户权限逻辑处理,比如限定某些用户只有查看权限,没有删除记录.清空记录.系统设置的权限,与之相对 ...
- C#反序列化时,反射类型“XXX”时出错,提示:InvalidOperationException
C#反序列化时,反射类型"XXX"时出错,提示:InvalidOperationException的原因是因为: 一个类必须至少有一个空的默认构造函数,才能由XmlSerializ ...
- 解决 raw.githubusercontent.com 无法访问的问题
解决 raw.githubusercontent.com 无法访问的问题 电信默认 DNS 直接遮蔽 github DNS 1: 61.139.2.69 DNS 2: 218.6.200.139 C: ...