资讯专栏INFORMATION COLUMN

【echarts地图制作】下钻到乡镇/街道级别的

宠来也 / 1390人阅读

摘要:需求展示西安市各区县的地图,点击各区县下钻到各乡镇街道,只能内网环境使用,不可用通过百度高德地图来实现。利用展示自定义的地图关于具体如何导入格式数据到的方法,可以参考官方示例。

需求

展示西安市各区县的地图,点击各区县下钻到各乡镇/街道,只能内网环境使用,不可用通过百度/高德地图来实现。

解决 利用地图数据生成区域的geojson

网络上大部分地图数据只是到省市,最多到区县,再往下的数据就比较难找了;经过搜索,找到了一个可以买地图数据的地方,数据可以精确到乡镇/街道,价格还比较划算;


地图数据格式为shp(shape格式),如果需要其他的格式,得加点钱获取比如svg、dbf、shx等额外格式的文件;
echarts支持的格式有geojson,此时我们需要一个工具把shp格式的文件转换为geojson格式,有两种工具,推荐第2种:

【转换工具1】在线转换工具MyGeodata Converter

这个工具是收费,每月最多可以转换3次文件,上传时网站会提示:

Don"t forgot to upload all relevant files to your .SHP file - you need at least also .DXF and .SHX files uploaded together with your .SHP file!

不仅要上传shp格式,还要上传dbf和shx等格式的文件,来获得更完整的地理数据,如果把所有格式的数据都上传了,那么生成的geojson可能会有问题(亲测),所以只上传3种格式是比较稳妥的办法;

上传后会跳转到一个设置的界面,先不要点击开始转换按钮,首先检查一下转换的编码格式,默认为UTF-8,如果是中文的地图数据,最好把转换格式切换为GB18030-Chinese格式;然后点击开始转换就可以了。

转换超过3个会提示下图,这时可以清一下浏览器缓存试试:

转换后可以下载到.geojson格式的数据文件,放到项目中时,把.geojson格式手动修改为.json格式,就可以被echarts使用了,直接import geojson格式的文件会报错;

【转换工具2】mapshaper(http://mapshaper.org/)

同时上传.dbf .shp .shx .prj格式的文件,然后点击右上角的export,就会看到如下界面,选择geoJSON,就完成了。

利用geojson展示自定义的echart地图

关于具体如何导入json格式数据到echarts的方法,可以参考官方示例。
以下是我自己的代码:



结果

设计图的地图效果是3D的,为了达到效果,将地图的颜色设为透明,使用设计图作为背景图,此时需要调整echart地图的比例(top/bottom/right/left),调整好之后,地图选择高亮和点击事件,和地区名字还是继续用echart实现。最终结果:

参考文章

https://blog.csdn.net/gisboyg...

https://www.cnblogs.com/sd-ax...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100671.html

相关文章

  • echarts结合高德API进行地图下钻

    摘要:广告开始最近做了表格数据转成图表展示的一个组件,地址如下整合地图的时候发现针对地级市的一些文件太多了,全部引入后有将近,所以就用了下高德老爷给的组件和接口,然后弄完在这记录一下虽然这种例子在社区里有很多这个组件文件放在了中,样式奇丑,请原谅 /——————广告开始——————/ 最近做了表格数据转成图表展示的一个react组件,地址如下: https://github.com/Lyla...

    happen 评论0 收藏0
  • 精读《Tableau 探索式模型》

    摘要:比如我们对调与会怎样我们得到了三个不同类目近个月的趋势,之所以是折线图,因为图表的维度轴列是连续的。在正式介绍标记区域前,先理解一下为何会发生这种转变表格类组件是双维度组件,折线图是单维度组件。 1. 引言 Tableau 探索式分析功能非常强大,各种功能组合似乎有着无限的可能性。 今天笔者会分析这种探索式模型解题思路,一起看看这种探索式分析功能是如何做到的。 2. 精读 要掌握探索式...

    curried 评论0 收藏0
  • D3.js中国地图下钻

    摘要:因为地图数据过于庞大,例子中删除了除北京外其他的地市信息。所以,请点击北京查看效果,其他省没效果。最终效果点击北京市查看效果,其他区域切换效果,空白区域返回全国。 使用d3.js实现中国地图及中国地图下钻到省市区 在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果。 因为地图数据过于庞大,例...

    lmxdawn 评论0 收藏0
  • vue+echarts根据ip地址制作简单地图定位

    摘要:闲话不多说,介绍工具开发工具平台框架百度地图。给出源代码,不做研究百度地图浏览器定位您的位置根据和百度地图相关,大家还可以在此基础上扩展很多功能,有相关问题或意见可以评论讨论哦。下面是官方文档飞机路线点我点我百度地图点我点我 前天突发奇想做一个地图定位的前端界面,于是就研究了一下百度定位功能。新手,历时两天终于完成了本次的设计。虽然看上去简单,但是用到的东西不少。我在网上找资源的时候还...

    UsherChen 评论0 收藏0

发表评论

0条评论

宠来也

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<