因为要做街道地图画边界,找了很多资料之后才看到个稍微可靠点的,要注意的是geojson坐标还需要转换一下对应地图坐标系,不然画出来的边界有偏移:
相关资料:
地图数据可视化 支持街道乡镇级行政区域分界线 geojson 获取绘制实践
坐标系之间的相互转换
这里收藏一下另外的资源:
常用的几种在线地图(天地图、百度地图、高德地图)坐标系之间的转换算法
2022-4-21更新:
之前echarts结合高德地图的方法因为高德切换下级区域地图改变mask结果边界画线显示不出来的问题(也可能是写法有问题),后来决定抛弃高德做底图只用echarts了,区域json带子区域一起传入,这篇超详细啊,有空看看(做项目时参考的别的简单的):教你从零开始画echarts地图
echarts画地图这块有个问题,如果子区域没有把上级区域填满的话,鼠标放上去会触发到上级区域高亮,这样想高亮子区域就不怎么方便了,不知道该怎么解决…
然后就是甲方要求地图旋转角度,网上找了下两种方法,一是围绕中心点旋转坐标(echart或者其它地图如何将地图数据geoJson进行旋转生成新geoJson,这篇文章里有个错误son[0]应为son),二是直接旋转地图父组件(echarts中对整个图形旋转90°(实现div旋转90度)),第一种做法需要转换所有坐标包括后面需要更新的数据点坐标,第二种做法会使地图自带的区域文字以及子组件如tooltip、scatter等一起旋转。
我是选择第二种方法把canvas给旋转了,然后发现tooltip的位置也发生了漂移,然后就弃用tooltip使用scatter带的label来做数据展示,这里label有两种设置方式:ECharts-散点图入门demo-effectScatter-动态修改数据(直接展示数据),散点图和label改编的弹框(自定义弹框效果)