Leaflet在WGS84 Web墨卡托投影与WGS84经纬度投影下空间信息变形问题及修正-以圆为例

news/2024/5/19 23:07:36

目录

前言

一、投影的相关知识

1、经纬度投影

2、Web墨卡托投影 

二、经纬度投影下的空间信息展示

1、空间信息展示

2、效果展示

3、经纬度投影下的圆修正

三、Web墨卡托投影下空间信息展示

1、底图引用

2、自定义生成圆

 总结  

前言

        在GIS的知识海洋中，对于地理信息科班出身的同学来说，WGS84 Web墨卡托投影（以下简称Web墨卡托投影）和WGS84 经纬度投影（以下简称经纬度投影）以及他们的区别应该非常了解。但是对于一些开发的同学，尤其是从计算机转向GIS的开发同学来说，就未必对两者的区别有这么详细的了解。但是如果对两种投影方式不了解的话，在实际开发过程当中就会遇到一些有趣的问题，有的空间对象在经纬度投影下的空间信息形变比较严重，而在Web墨卡托的投影方式下是展示比较良好的。因此有必要将这两种常见的投影类型以及一些实际的空间对象的展示，结合两种投影来进行讲解。

        本文就是在以下的问题背景下产生，首先地图采用的是WGS84经纬度投影的方式，在地图上我们根据需要进行缓冲区分析，展示出来的效果就是一个圆。通过代码实践，我们发现，本来是是正常的一个圆，在不同纬度位置上表现出来的效果居然是不一样的。如下图所示：

         同样的圆，在地图上展示的效果是完全不一样的，接近赤道的地区基本是正常的图形，随着纬度的增加，到了中高纬度地区，圆慢慢被拉平，变成了一个椭圆形，到了接近极地的地区，变平度更大，长轴与短轴的比接近2:1。为什么会出现以上的现象，出现了以上的现象，如何在开发的时候进行修正呢？

        本文主要讲解GIS中的两种投影方式和区别，结合空间对象信息的展示里讲述不同投影方式下图形的形变问题，然后通过代码讲解如果遇到形变问题的对应解决办法。希望对遇到这种问题的朋友有一定的帮助。

一、投影的相关知识

        地图投影，是指按照一定的数学法则将地球椭球面上的经纬网转换到平面上，使地面的地理坐标与平面直角坐标建立起函数关系。这是绘制地图的数学基础之一。由于地球是一个不可展的球体，使用物理方法将其展平会引起褶皱、拉伸和断裂，因此要使用地图投影实现由曲面向平面的转化。关于地球的投影，有很多种不同的处理方式，通常我们采用WebGIS的开发方式，比较常用的投影类型就是WGS84下的经纬度投影和Web墨卡托投影两种。因此本节主要简单介绍这两种投影的相关知识，其它的投影方式请各位朋友查询相关资料了解相关知识，不在本文中赘述。

1、经纬度投影

        当全球影像显示为如下图所示的矩形时，该地图投影一般为 WGS84 经纬度投影。该投影下的经度范围为-180度到180度，纬度范围为-90度到90度，因此该投影下的全球影像矩形的长度刚好是宽度的2倍。在这请注意，随着纬度的增加，采用经纬度投影的地图，在中高纬度地区的变形会变得很严重，而在接近赤道地区是正常的。在了解它的投影原理之后是比较好理解的。

经纬度投影下全球影像展示示意图

2、Web墨卡托投影 

        当全球影像显示为如下图所示的正矩形时，该地图投影一般为 WGS84 Web 墨卡托投影。由于赤道半径为6378137米，则赤道周长为2×PI×R=20037508.3427892米。因此，X轴的取值范围在(-20037508.3427892和20037508.3427892)之间。当纬度接近两极，即90°时，Y值趋向于无穷，在该投影下通常将Y轴的取值范围限定在(-20037508.3427892,20037508.3427892)之间。最后可以得出，在 WGS84 Web 墨卡托投影坐标系下，左下角的投影坐标为(-20037508.3427892, -20037508.3427892)，右上角的投影坐标为(20037508.3427892, 20037508.3427892)，需要注意是这里的单位不再是度，而是米。

        采用Web墨卡托投影方式时，空间图形的变形很小。在高纬度地区有较好的展示能力。

 Web墨卡托投影下全球影像展示示意图

        通过上述的这种简单的办法就可以区分Web墨卡托投影和经纬度投影这两种方式。你也看看目前你的系统中使用的是什么投影方式。

二、经纬度投影下的空间信息展示

        本节主要讲解在经纬度投影下如何进行空间信息展示，以圆为例，经常遇到的问题可能是什么？以及遇到了这些问题如何去解决。

1、空间信息展示

        考虑到经纬度投影下的变形是随着纬度的增加而加重的，空间圆的展示采用从赤道到北纬地区逐渐延伸的方式，构建了不同纬度下的圆信息展示，让大家对不同纬度下的空间信息展示有一个直观的认识和理解。在GIS中展示空间圆的关键代码如下：

        经纬度投影的底图定义：

 //以下采用经纬度投影方式L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {code: 'EPSG:4326',projection: L.Projection.LonLat,transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),scale: function (zoom) {return 256 * Math.pow(2, zoom - 1);}
});var mymap = L.map('mapid',{crs:L.CRS.CustomEPSG4326}).setView([29.052934, 104.0625], 5);L.tileLayer('http://localhost:8086/data/basemap_nowater/1_10_tms/{z}/{x}/{y}.jpg', {maxZoom: 16,attribution: 'yelangkingMap data &copy; <a href="/">本地瓦片加载</a> contributors, ' +'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',id: 'mapbox/streets-v11',tileSize: 256,zoomOffset: -1
}).addTo(mymap);//标签
L.tileLayer('http://localhost:8086/data/basemap_nowater/1-10label/{z}/{x}/{y}.png', {maxZoom: 10,minZoom:3,id: 'mapbox/label',tileSize: 256,zoomOffset: -1
}).addTo(mymap);

        根据纬度的不同创建不同的圆空间对象，关键代码如下：

L.circle([0.175781, 111.445313], 399000, {color: '#960e00',fillColor: '#960e00',fillOpacity: 0.5,
}).addTo(mymap).bindPopup("靠近赤道地区的马来西亚某地.");L.circle([12.612305, 110.830078], 399000, {color: 'red',fillColor: '#f03',fillOpacity: 0.5
}).addTo(mymap).bindPopup("南海某地.");L.circle([29.649869, 120.146484], 399000, {color: 'red',fillColor: '#f03',fillOpacity: 0.5
}).addTo(mymap).bindPopup("我是一个圆.");L.circle([50.097656, 111.09375], 399000, {color: 'blue',fillColor: 'blue',fillOpacity: 0.5
}).addTo(mymap).bindPopup("我是第二个圆.");L.circle([22.851563, 109.248047], 399000, {color: '#550096',fillColor: '#550096',fillOpacity: 0.5
}).addTo(mymap).bindPopup("我是第三个圆.");L.circle([66.884766, 108.017578], 399000, {color: '#006696',fillColor: '#006696',fillOpacity: 0.5
}).addTo(mymap).bindPopup("我变形最严重.");

2、效果展示

        将上述代码部署至静态服务器或者直接在浏览器中运行，可以看到以下的空间可视化效果。

赤道及低纬度地区圆展示示意图

        通过观察可以看到，从赤道地区到两极的扩展过程当中，在 这个纬度区间内，圆的整体展示效果还是比较好的，变形的情况不严重。下面来看中高纬度下，圆的空间展示情况是什么样子的。

中高纬度地区圆可视化效果

        通过上图可以很直观的看到，随着纬度的增加，中高纬度地区的圆逐渐开始了形变，而在极地地区达到了最大。而变形也是跟着经纬度投影的原理一致。赤道最小，而两极最大。

3、经纬度投影下的圆修正

        如果当前系统已经是采用了经纬度投影的方式，又不能一下子改变底图的投影方式。这种情况下该如何解决这种问题呢？这里参考了一个朋友分享的解决思路。大致的思路就是，在中高纬度地区，对于圆的生成不采用Leaflet等自己的原生api的创建方式，而是通过多边形近似计算的方式，通过自己计算选点，生成一个接近圆的多边形，以此来避免在经纬度投影下的图形变形的问题。具体的算法代码如下：

function buildCirclePolygon(lat,lng,color){//这里采用自定义生成var radius = 4;//点集var parts = [];//计算圆的边缘所有点for (var i = 0; i < 360; i++) {var radians = (i + 1) * Math.PI / 180;var circlePoint = [Math.cos(radians) * radius + lat, Math.sin(radians) * radius + lng];parts[i] = circlePoint;}//生成面，近似圆var polygon = L.polygon(parts, {color: color});return  polygon;
}

        在需要生成圆的地方调用以上的方法，请注意，这里的方法中，第一个参数表示纬度，第二个参数表示经度。

buildCirclePolygon(34,108,'blue').addTo(mymap);buildCirclePolygon(66.884766,108.017578,'blue').addTo(mymap);

        来看一下经过自主模拟的圆生成的图形叠加到地图后，在高纬度的效果是怎么样的？

        修正圆在中高纬度的可视化效果

        在上面的效果图中可以看到，黄色标色修正圆，蓝色表示原始的圆。可以很直观的看到，修正圆已经很好的可视化效果。

三、Web墨卡托投影下空间信息展示

        本节主要讲解在Web墨卡托投影下如何进行空间信息展示，以圆为例，是否会遇到在经纬度投影下碰到的问题。

1、底图引用

        由于要调整使用Web墨卡托的投影方式，因此这里需要重新定义底图。定义的方式如下所示：

var mymap = L.map('mapid').setView([29.052934, 104.0625], 5);L.tileLayer('http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png', {maxZoom: 16,attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, ' +'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',id: 'mapbox/streets-v11',tileSize: 512,zoomOffset: -1
}).addTo(mymap);

        圆的空间信息添加方式不变，来看一下实际的效果：

墨卡托投影下圆可视化示意图

        通过观察上述的效果可以看到，当地图采用Web墨卡托投影时，在地图上展示圆几乎是没有变形的。在中高纬度地区也是正常的。

2、自定义生成圆

        虽然在墨卡托投影下，圆没有发生变更，但是我们依然想了解下，如果进行修正数据叠加后会是什么效果。

 中高纬度修正圆展示示意图

        可以看到，在web墨卡托投影下，经过修正的圆反而会有变形。通过图形的对比相信大家对两种不同的投影规则下的图形展示已经有了比较直观的认识。

 总结  

        通过上述两种不同投影类型中对圆的加载和修正展示。相信大家对空间对象的展示已经比较清楚了。如果是经纬度投影，在中高纬度地区，空间信息会变形，如果需要按原始图形展示，需要自己修正。而采用Web墨卡托投影，则不需要做任何处理。

        以上就是本文的主要内容，本文主要讲解GIS中的两种投影方式和区别，结合空间对象信息的展示里讲述不同投影方式下图形的形变问题，然后通过代码讲解如果遇到形变问题的对应解决办法。希望对遇到这种问题的朋友有一定的帮助。行文仓促，定有不足之处，如有任何问题或者不当之处，欢迎各位朋友专家在评论区批评指出，不深感谢。

        博文在编写过程中参考了相关文章，站在巨人的肩膀上才能看得更远，在此表示感谢。

1、GIS基础一： GIS中的WGS84地理坐标系和墨卡托投影坐标系。

2、【gis技术】web墨卡托投影和经纬度直投的差别。

3、不得不说的地图投影那些事儿。


http://www.mrgr.cn/p/65524010

相关文章

QT--2

QT--2

Qt界面设计 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {//窗口相关设置this->resize(680,520);this->setFixedSize(680,520);this->setWindowTitle("Tim");this->setWindowFla…
阅读更多...
学习软考----数据库系统工程师24

学习软考----数据库系统工程师24

关系数据库设计基础知识 函数依赖 码 多值依赖 性质
阅读更多...
OpenVX技术图例（一）

OpenVX技术图例（一）

OpenVX技术图例（一） 参考文献链接 https://registry.khronos.org/OpenVX/specs/1.1/html/index.html人工智能芯片与自动驾驶
阅读更多...
一文了解栈

一文了解栈

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、栈是什么&#xff1f;二、栈的实现思路1.顺序表实现2.单链表实现3.双向链表实现 三、接口函数的实现1.栈的定义2.栈的初始化3.栈的销毁4.入栈5.出栈6.返回栈…
阅读更多...
GhostNetV2 Enhance Cheap Operation with Long-Range Attention 论文学习

GhostNetV2 Enhance Cheap Operation with Long-Range Attention 论文学习

论文地址&#xff1a;https://arxiv.org/abs/2211.12905 代码地址&#xff1a;https://github.com/huawei-noah/Efficient-AI-Backbones/tree/master/ghostnetv2_pytorch 解决了什么问题&#xff1f; 在计算机视觉领域&#xff0c;深度神经网络在诸多任务上扮演着重要角色。为…
阅读更多...
详解MySQL常用的数据类型

详解MySQL常用的数据类型

前言 MySQL是一个流行的关系型数据库管理系统&#xff0c;它支持多种数据类型&#xff0c;以满足不同数据处理和存储的需求。理解并正确使用这些数据类型对于提高数据库性能、确保数据完整性和准确性至关重要。本文将详细介绍MySQL中的数据类型&#xff0c;包括数值类型、字符…
阅读更多...
鸿蒙编译子系统详解（二）main.py

鸿蒙编译子系统详解（二）main.py

1.5.4源码解析 1.5.4.1 build/hb/main.py脚本 这个脚本是编译的主程序脚本&#xff0c;流程如下&#xff1a; 首先是初始化各种module类&#xff0c;然后运行对应模块。 hb分为build,set,env,clean,tool,help几个模块&#xff0c;模块源码位于build/hb/modules/目录下&#xff…
阅读更多...
本地部署大模型ollama+docker+open WebUI/Lobe Chat

本地部署大模型ollama+docker+open WebUI/Lobe Chat

文章目录 大模型工具Ollama下载安装运行Spring Ai 代码测试加依赖配置写代码 ollama的web&Desktop搭建部署Open WebUI有两种方式Docker DesktopDocker部署Open WebUIDocker部署Lobe Chat可以配置OpenAI的key也可以配置ollama 大模型的选择 本篇基于windows环境下配置 大模型…
阅读更多...
IT项目管理【太原理工大学】前置知识点精简总结

IT项目管理【太原理工大学】前置知识点精简总结

根据上次考试以及其他方向考试的经验&#xff0c;这届考试可能偏向出题更灵活&#xff0c;能死记硬背或套公式的题减少&#xff0c;多做准备呀各位大三苦逼人&#xff0c;挂了补考还得回来补考凸^-^凸共勉 &#xff08;另外&#xff0c;别作弊&#xff0c;今天人工智能考试逮住…
阅读更多...
每天五分钟计算机视觉：通过交并比判断对象检测算法的性能

每天五分钟计算机视觉：通过交并比判断对象检测算法的性能

本文重点 在对象检测领域，交并比（Intersection over Union，简称IoU）是衡量算法性能的重要指标之一。它不仅直观地反映了预测框与真实框之间的重叠程度，还是判断算法是否“运行良好”的关键依据。 那个定位是好的？ 对象检测任务中，我们希望不仅检测到对象，同时我们还希…
阅读更多...
太阳能光伏在生活中的三大作用

太阳能光伏在生活中的三大作用

随着现在太阳能光伏的逐步发展&#xff0c;太阳能光伏已经越来越走近人们的生活&#xff0c;小编带大家盘点一下光伏在生活中的应用 一、发电 光伏的最初应用就是用来发电&#xff0c;以替代传统的化石燃料发电方式。光伏发电可以从根本上解决当今社会面临的能源短缺问题&…
阅读更多...
【数据结构】顺序表专题

【数据结构】顺序表专题

前言 本篇文章我们来进行有关顺序表的专题训练&#xff0c;让我们一起来看一下有关顺序表的算法题 &#x1f493; 个人主页&#xff1a;小张同学zkf ⏩ 文章专栏&#xff1a;数据结构 &#x1f4dd;若有问题 评论区见 &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 1.移除…
阅读更多...
洗地机什么牌子最好？618高性价比家用洗地机品牌

洗地机什么牌子最好？618高性价比家用洗地机品牌

随着科技的发展&#xff0c;智能智能清洁家电越来越受到消费者的欢迎。洗地机作为其中的佼佼者&#xff0c;已经成为许多家庭清洁的好帮手。然而&#xff0c;面对满目琳琅的洗地机品牌型号&#xff0c;究竟哪一款机型适合家用呢&#xff0c;正好618也临近了&#xff0c;又有哪些…
阅读更多...
30万买智驾车，选特斯拉还是华为？

30万买智驾车，选特斯拉还是华为？

文 | AUTO芯球 作者 | 雷歌 我真是佩服马斯克&#xff0c; 一趟24小时的北京出差&#xff0c;就解除了Model车系进入机关单位禁令的问题&#xff0c; 也打开了特斯拉FSD完全自动驾驶进入中国市场的大门&#xff0c; 给我我一天时间&#xff0c;估计一部剧都追不完&#xf…
阅读更多...
LeetCode：盛最多水的容器

LeetCode：盛最多水的容器

文章收录于LeetCode专栏 盛最多水的容器 给你n个非负整数a1&#xff0c;a2&#xff0c;…&#xff0c;an&#xff0c;每个数代表坐标中的一个点(i, ai) 。在坐标内画 n 条垂直线&#xff0c;垂直线i的两个端点分别为(i, ai) 和 (i, 0)。找出其中的两条线&#xff0c;使得它们与…
阅读更多...
C++ 数据输入cin (解决CLoin输入中文程序出错)

C++ 数据输入cin (解决CLoin输入中文程序出错)

数据输入cin语法：cin >> 变量 解决 CLoin 使用cin输入中文程序无法正常运行按住Ctrl+alt+shift+/键 弹出对话框选择注册表取消勾选run.process.with.pty
阅读更多...
【再探】设计模式—适配器、装饰及外观模式

【再探】设计模式—适配器、装饰及外观模式

结构型设计模式是用于设计对象和类之间关系的一组设计模式。一共有7种&#xff1a;适配器模式、装饰器模式、外观模式、桥接模式、组合模式、享元模式及代理模式。 1 适配器模式 需求&#xff1a;在软件维护阶段&#xff0c;已存在的方法与目标接口不匹配&#xff0c;需要个中…
阅读更多...
rag-embeddings基础流程

rag-embeddings基础流程

什么是检索增强的生成模型 LLM 固有的局限性 LLM 的知识不是实时的LLM 可能不知道你私有的领域/业务知识 检索增强生成 RAG&#xff08;Retrieval Augmented Generation&#xff09;顾名思义&#xff0c;通过检索的方法来增强生成模型的能力。 类比&#xff1a;你可以把这个…
阅读更多...
Android4.4真机移植过程笔记（三）

Android4.4真机移植过程笔记（三）

如果文章字体看得不是很清楚&#xff0c;大家可以下载pdf文档查看&#xff0c;文档已上传&#xff5e;oo&#xff5e; 7、安装加密APK 需要修改文件如下&#xff1a; 相对Android4.2改动还是蛮大的&#xff0c;有些文件连路径都变了: //Android4.2 1、frameworks/native/libs…
阅读更多...
安卓开发(二)Android开发基础知识

安卓开发(二)Android开发基础知识

了解Android Android大致可以分为4层架构&#xff1a;Linux内核层、系统运行库层、应用框架层和应用层。 内核层&#xff1a;Android系统是基于Linux内核的&#xff0c;这一层为Android设备的各种硬件提供了底层的驱动&#xff0c;如显示驱动、音频驱动、照相机驱动、蓝牙驱动…
阅读更多...
推荐文章

Copyright @ 2022~2023