geojson: 记一次实现显示以中国为中心的地图的需求

前置说明,写本文的时候,geojson随便找的,没有南极洲

起因

项目最开始实现的地图显示的是最常见的一个通用的世界地图,如图

这种世界地图依据本初子午线绘制,中国在靠右的位置,而客户想要的效果是把中国移到中间的位置来

上图使用了echarts绘制地图,同时使用了d3.geoEqualEarth的投影功能(本人对d3不熟)

既然有需求,那咱们就得做

上面的地图是使用echarts来绘制的,查看了echarts的文档发现无法实现这样的功能

作为一个只会使用echarts加载geojson的不算giser的giser,完全不知道怎样才能使中国移动到中间来

尝试的过程

最开始的想法是直接去网上找到现成的中国在中心位置的地图来绘制,但是找了很久都没有找到效果比较好的这种地图,而且地图上是有打点的,当使用中国在中心的这种地图之后,坐标对不上的问题又该怎么解决,没有思路

经过好几天的查找,后来在csdn上找到类似的文章 ArcGIS中央经线的修改-CSDN博客

然后我知道了这种地图变换的一个更加标准的称呼,修改地图中央经线

之后便开始研究学习了ArcGIS这个软件,并花费了68元得到激活码,安装了软件来尝试处理问题

安装软件之后,根据网上找到的世界地图shp文件,导入到ArcGIS软件中显示出来

根据上面修改中央经线的操作,确实在ArcGIS上得到了中国居中的地图显示,并且知道了这个操作称之为投影,省略操作ArcGIS软件过程中遇到的种种问题

最终,我又回到了原点,如果ArcGIS导出了这样的一幅地图的GeoJSON,但是地图坐标完全变了,后台返回的点位信息是携带坐标的,两个坐标系对不上,是无法打点的,这个问题无法处理,只能放弃ArcGIS软件来实现的方法

现在,总结一下从ArcGIS这里学到的知识:

  1. 是有办法直接上根据通用地图的GeoJSON转换的到以中国为中心的地图的,这个操作叫修改地图中央经线
  2. 修改地图中央经线需要用到投影操作

基于上述已知知识的第二点,与原地图绘制的代码结合起来,我想到一个问题:d3能不能实现这个功能?

初见成果

于是我便在网上查找d3修改地图中央经线的示例

代码层面一无所获

但是思想层面,我察觉到了一些关联

D3 GEO应用专题(一):绘制旋转的3D地球-CSDN博客

查看了不少这样的地图示例之后,我了解到d3的投影是可以旋转的

然后我便开始了尝试

经过多次尝试(对d3不熟,传参不正确导致api调用没有效果)之后,发现d3的旋转 rotate 方法就是改变地图中央经线的方法

然后我尝试直接用d3来实现地图,来替换echarts实现地图,但过程极为艰难,不是这里显示不出来,就是那里显示不正常,省略中间的种种无用功之后,最终还是觉得用d3结合echarts来实现这个功能

如图,会发现d3旋转投影后echarts绘制的地图显示不正常

与之前的地图比起来,上面投影旋转过的地图,首先背景不见了,其次有些地区,比如格陵兰岛横跨东西半球了

修复问题

经过两个地图的比较以及,输出投影后的坐标来分析,可以知道投影过后的坐标变化非常大

以背景地图为例,背景地图的范围大概是 -180, -90到180, 90(取对角坐标)的矩形(投影后变成带椭圆的形状),现在经过旋转后的投影,这个矩形的左右两边的坐标也就是经度快重合到一块了,所以显示出来是一条线,就看不到背景颜色了

-- 未完待续

相关推荐
前端snow4 分钟前
ai agent --- mem0 外挂记忆系统
前端
变与不变8061 小时前
js同步和异步难点重点详解
开发语言·javascript·ecmascript
特立独行的猫a1 小时前
用仓颉写一个 Tauri:IPC 的每次往返实现原理(web层到仓颉层的触发过程)
前端·ui·harmonyos·tauri·鸿蒙·仓颉
Dovis(誓平步青云)1 小时前
多个链接不等于多份证据,新闻核验看板怎样合并来源
java·服务器·前端·javascript·人工智能·pdf·电脑
骑着蜗牛撵大象3271 小时前
Qt 事件机制详解:从 QEvent 派生类到事件过滤器的全景指南
前端·python
qq_2518364572 小时前
理发管理系统 —— 会员模块
开发语言·前端·python·flask
Dovis(誓平步青云)2 小时前
几个方案来回选不定?做一个随时切换的候选推荐页
android·java·服务器·开发语言·javascript·数据库·智能化
Frag0ut2 小时前
2027 年浏览器展望:Chrome 与 Edge 的 AI 智能体进化方向
前端·人工智能·chrome·edge·浏览器·新功能
计算机魔术师2 小时前
从AI绘图鼻祖到音乐版权破局者,Stability AI如何被三大唱片巨头「收编」
前端
奕鼎竜瑆3 小时前
Chrome 插件开发实战指南:从入门到发布
前端·chrome