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

-- 未完待续

相关推荐
葡萄城技术团队6 分钟前
使用 前端技术 创建 QR 码生成器 API1
前端
DN金猿8 分钟前
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)(很详细)
前端·vue.js·pdf
鸽鸽程序猿16 分钟前
【前端】javaScript
开发语言·前端·javascript
秦时明月之君临天下23 分钟前
React和Next.js的相关内容
前端·javascript·react.js
上官花雨1 小时前
什么是axios?怎么使用axios封装Ajax?
前端·ajax·okhttp
米奇妙妙wuu1 小时前
React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?
前端·javascript·react.js
李刚大人1 小时前
react-amap海量点优化
前端·react.js·前端框架
闹闹没有闹1 小时前
socket连接封装
前端
qq_364371722 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森3 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3