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

-- 未完待续

相关推荐
Agent世界11 小时前
用 CDP 做发布自动化:四道机器闸门与产物验收
前端·javascript
FungLeo11 小时前
成为全栈·Vue 管理后台篇·编辑器图片上传:从文件选择到文章附件关联
前端·vue.js·编辑器·markdown·文件上传·formdata·附件管理
总要学点什么11 小时前
第104篇:三维特效-流动墙体效果——让贴图沿墙流动,它却只肯走一条对角线
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
某哈压力大11 小时前
SSH 突然 Connection reset?不是密钥坏了,是 OpenSSL 把 sshd 干趴了
前端·node.js·命令行
程序员大阳11 小时前
副队长ES6+教程(3)--解构赋值
前端·javascript·es6·赋值·解构
神膘护体小月半11 小时前
css - 元素背景图由 hover 触发,初次加载时闪动的解决办法
前端·javascript·css
程序员大阳12 小时前
副队长ES6+教程(2)--let 与 const
前端·javascript·es6·const·let·var
deli00712 小时前
写满 200GB 后 SSD 为什么掉到 95MB/s?SLC 缓存模型实测
前端
曦樂~13 小时前
【Web Development】03JavaScript 基础和事件
开发语言·前端·javascript
deli00713 小时前
HTTPS 的锁是怎么挂上的?TLS 1.3 握手 6 步实测
前端