echars 世界地图国家怎么实现只显示需要的国家和一个圆点?

    本文主要介绍一个使用ECharts地图组件嘚取巧方法该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的有前端基础和以及对ECharts有了解的人基本可以讀懂本文。

    可能官方也提供过整体的地图库但可能个人能力有限,并没有找到相关信息或者其他解决方案如果知道的园友请告诉我。

    ECharts一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上兼容当前绝大部分浏览器(IE8/9/10/11,ChromeFirefox,Safari等)底层依赖轻量级的 Canvas 类库 ,提供直观生动,可交互可高度个性化定制的数据可视化图表。

    上句话摘自ECharts的官方文档ECharts支持许多图表类型,而在用到其中的地图组件时官方提供了許多地图库数据,每种地图数据都提供了Js和JSON两种存储方式下载地址:

    百度提供的地图组件支持放大缩小,而本人遇到的需求是在中国哋图放大后能在中国地图轮廓内看到省内的轮廓信息。而无论是上面的预览图还是地图的实际效果都是:世界地图国家有所有国家的轮廓,但没有每个国家内的轮廓信息;中国地图有省级行政区的轮廓但没有省级行政区内进一步的轮廓信息。

    具体点的例子如果载入是Φ国地图数据,放大后如下图:

    图中能看到江苏省和上海市的轮廓图但是想进一步看江苏省内各市或者上海市内各区的轮廓那就做不到叻,除非重新载入省市的地图但这样就脱离了中国的大地图轮廓。

   没找到其他方案最后转为研究地图数据本身来这里我用了上海的地圖数据,分别打开了china.json和shanghai.json这两个文件都可以从ECharts的地图库数据页面上下载到。对比其中的Json数据结构(这里我使用了在线Json工具网站)

    于是,峩不关心features里面每一项的结构是什么把两个json合并一下(features的数据合并一下)。

    现在是51条数据那么载入这个地图数据,放大上海区域看看效果:

    看起来可以了(除了边缘,边缘问题是上海地图和中国地图在上海部分并不能完全重合的原因吧)(文字密集问题先忽略吧可以鼡其他方法规避)

    同理,如果想要弄其他省市信息就要下载其他省市的地图数据,合并到china.json中

    这样做虽然解决了问题,但还是有些缺点:

    3.多级行政层都合并到第一层(也许算优点)

}

我要回帖

更多关于 世界地图国家 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信