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

-- 未完待续

相关推荐
恋猫de小郭17 分钟前
Flutter Zero 是什么?它的出现有什么意义?为什么你需要了解下?
android·前端·flutter
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊9 小时前
jwt介绍
前端