关于Vue+ECharts 地图引用空间文件或GIS(.shp)

关于Vue+ECharts 地图引用空间文件或GIS(.shp),第1张

效果图:

直接步入主题

GIS 能够让你查看这个 .shp 文件的地图内容,但是我感觉用不用都可以,反正我是没用,因为他在合并的时候我不是很理解,毕竟太过跨越了;

关于引用空间文件

1.首先你需要得到一些 .shp 文件,当然是越轻量级越好;

2.你需要将你得到的空间文件在 https://mapshaper.org/ 这个网站进行转化为geoJSON ;

3.你转换的是geoJSON 但是到手的确实JSON文件,这个不用慌,就是这么的无厘头;

4.如果你得到的是一个JSON文件当然最好,如果是多个你就需要合并了,就像我是的安装了很多插件,但是最后都没成,还是自己手动的合成了一下,但好在不是很多,我只有三个,简单地看了一下应该是 (点、线、面)凑成的三个JSON文件;

5.你得到这个JSON文件你成功了三分之二,剩下的就是echarts的 *** 作了,以上的一些步骤卡了我2天时间,毕竟比较菜鸡,叶很水,当然你看见了我这个文章你就乐吧,稳稳地能帮你把这个需求搞定;

以下是ECharts的 *** 作了

1.你需要将你得到的JSON文件放到你的项目文件中以便引入;

这是一个引入外部JSON文件 在ECharts中有过案例;

把这个写上,这个也是官网的案例;

以上就是我的实现经历 如果大家有更方便的办法请联系我或评论哦 (在将几个JSON文件合并时感觉好尴尬)

echart饼图调用多个dataset:echarts是一个很有用,很炫,也很强大的插件,这里用模块化的方法来实现同一个页面引用多个不同图表。

1、找打文件,下载到本机。

2、把文件名改为echarts(也可以不用改,我是方便自己用才改的),然后放到自己项目里的js文件里(这里也可以和js平级,看自已的喜好)。

3、在html文件里用script引用echarts文件,html里引用成功后,打开js文件或script标签配置文件路径:注意这个路径要和刚刚引入的echarts文件路径一致,目录到js文件上一级就可以了。

4、这里就是我们根据自己需要用的图表进加载相应的文件就是你要什么图就是加载什么图,比如饼图就是pie,柱状图就是bar,地图就是map等。

5、注意这个步骤:两个红框框起来的是自己写的方法的引用,传的参数 ec 就是代表我们在实例化echarts.init() 时 的 "echarts"。

6、我们把每个图表都用一个方法表示,就是每个图表的具体设置。

7、最后全放入刚刚的那个“McChart”方法里

8、最终显示效果


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11671400.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存