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](取对角坐标)的矩形(投影后变成带椭圆的形状),现在经过旋转后的投影,这个矩形的左右两边的坐标也就是经度快重合到一块了,所以显示出来是一条线,就看不到背景颜色了

-- 未完待续

相关推荐
lecepin25 分钟前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒27 分钟前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿1 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥1 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸1 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin1 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊1 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆1 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术2 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js