标题: echarts geo坐标系
真的服了。
谁懂啊。
为了调一个地图上的点,我头发都掉了一把。
以前总觉得echarts是个神器,拿来就能用。
直到我碰到了echarts geo坐标系。
那一刻,我才知道什么叫“理想很丰满,现实很骨感”。
网上教程千篇一律。
复制粘贴。
运行。
报错。
然后你再去搜。
再复制。
再报错。
循环往复。
直到你怀疑人生。
我今天就想把这事儿掰开了揉碎了讲清楚。
不是为了装专家。
纯粹是心疼自己熬过的夜。
首先,你得明白一个死理。
地图不是随便画出来的。
它需要json数据。
对,就是那个该死的geojson。
很多人卡在这里。
找不到数据。
或者找到的数据格式不对。
你看着报错信息发呆。
心里骂娘。
别急。
去阿里云或者高德地图开放平台。
那里有现成的。
下载下来。
放在你的public文件夹里。
记住,路径千万别写错。
斜杠反斜杠。
搞混一个,直接白干。
我上次就是少写了一个斜杠。
找了两个小时。
最后发现是手抖。
想扇自己两巴掌。
接下来,配置项。
这是重灾区。
series里的type。
必须写scatter或者effectScatter。
别写line。
除非你想画线。
坐标数据。
lng, lat。
顺序不能反。
反了就飞外太空去了。
我有一次把经纬度写反了。
看着地图上一个点在太平洋中间飘。
我以为是地球歪了。
后来才反应过来。
是数据错了。
还有那个mapType。
一定要和你的json文件里的属性对应。
json里叫什么,你就写什么。
大小写敏感。
别偷懒。
别觉得差不多就行。
差之毫厘。
谬以千里。
说到echarts geo坐标系,很多人忽略了一个细节。
缩放。
地图默认可能很小。
或者很大。
你需要在visualMap或者series里调整。
不然用户进来,啥也看不见。
或者只看见一个点。
体验极差。
我的建议是。
加上tooltip。
加上label。
加上itemStyle。
细节决定成败。
别省那几行代码。
不然做出来的东西,丑得没法看。
再说说动画。
effectScatter的rippleEffect。
那个波纹效果。
很炫酷。
但是。
慎用。
数据量一大。
浏览器直接卡死。
我上次加了个涟漪动画。
演示的时候。
老板看着我。
屏幕不动了。
尴尬得我想找个地缝钻进去。
后来把动画关了。
或者调小半径。
才缓过来。
还有颜色。
别用默认色。
太土了。
自己调。
渐变。
径向渐变。
高级感立马就上来了。
我花了一下午调颜色。
为了那个蓝色。
深邃一点。
再深邃一点。
最后终于满意了。
看着那个地图。
心里那点成就感。
真的爽。
最后,别忘了兼容性。
虽然echarts做得不错。
但老版本的浏览器。
还是会有问题。
特别是ie。
别提了。
那是个坑。
能不用就别用。
如果非要兼容。
那就做好降级处理。
别让用户骂你。
总结一下。
echarts geo坐标系。
不难。
但是细。
很多坑。
需要耐心。
需要细心。
更需要一颗强大的心脏。
希望这篇文章。
能帮你省下几个小时。
或者。
少掉几根头发。
我就满足了。
真的。
别再去网上抄那些过时的代码了。
没用的。
跟着我的思路。
一步步来。
肯定能成。
加油。
打工人。
共勉。