Echarts 贵州地图(增加贵安新区)

贵州增加贵安新区后,项目展示需要增加此区域,网上找了一下,主要用echarts 展示离线地图,通过geojson加载贵州地图,然后切割安顺靠近贵阳的一部分区域展示,效果如下:

 

由于懒,所以就直接划了直线切割,如果要好看,就多划一些锯齿状的边就行。

怎么切割,怎么划,大概说一下吧,每个地市的数据,就是一堆点连起来的线,我们只需要新建一个贵安新区,然后给他赋予这些点就行,那么有个问题,与贵安接壤的几个地方怎么弄,很明显,这些点其他地市共有的,根据地图,我们要切割安顺的,就需要找到安顺偏向贵阳的一部分线,剪切出来给贵安就行,数据如下:

增加贵安,然后测试单个点在哪里,geosion的数据是顺时针的,多修改一下点,看效果,就知道点在哪了,或者用地图看经纬度

最后增加如下:

{ "type": "Feature", "properties": { "id": "5204", "name": "贵安", "cp": [106.3037, 26.3782], "childNum": 6 }, "geometry": { "type": "Polygon", "coordinates": [ [ [105.9741, 26.4386], [106.0181, 26.4551], [106.04, 26.4661], [106.051, 26.4606], [106.062, 26.4606], [106.1279, 26.4935], [106.1389, 26.5869], [106.1609, 26.5979], [106.1499, 26.6254], [106.1719, 26.6144], [106.1719, 26.5924], [106.1829, 26.5869], [106.1829, 26.5704], [106.1829, 26.5485], [106.2048, 26.5485], [106.1938, 26.5375], [106.2268, 26.5375], [106.2708, 26.554], [106.2927, 26.543], [106.2927, 26.5375], [106.3147, 26.543], [106.3257, 26.5155], [106.3147, 26.488], [106.3477, 26.488], [106.3477, 26.4771], [106.3257, 26.4551], [106.3696, 26.4441], [106.3806, 26.4166], [106.3806, 26.4056], [106.3916, 26.4001], [106.3916, 26.4111], [106.4026, 26.4386], [106.4136, 26.4331], [106.4136, 26.4551], [106.4465, 26.4661], [106.4575, 26.4551], [106.4465, 26.4441], [106.4465, 26.4221], [106.4575, 26.4276], [106.4795, 26.3947], [106.5015, 26.3782], [106.5454, 26.3782], [106.5674, 26.3727], [106.5564, 26.3287], [106.5344, 26.3123], [106.5234, 26.3177], [106.5234, 26.3068], [106.4795, 26.2628], [106.3916, 26.2793], [106.3916, 26.2848], [106.3586, 26.2738], [106.3586, 26.2518], [106.3477, 26.2518], [106.3477, 26.2354], [106.3367, 26.2244], [106.3037, 26.2299], [106.3037, 26.2518], [106.2708, 26.2408], [106.2598, 26.2408], [106.2488, 26.2299], [106.2378, 26.2244] ] ] } }

]

 

同样,你可以自定义地图,在 http://geojson.io 中绘制,将geosion数据拷贝出来就行!

 

源码下载:https://download.csdn.net/download/langchaojin/12504714

 

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值