怎么运用Echarts绘制街道及镇级地图

发布时间：2023-07-31 12:01:49 所属栏目：教程来源：网络

导读： 　　这篇文章主要介绍了怎么使用Echarts绘制街道及镇级地图的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用Echarts绘制街道及镇级地图文章都会有所

　　这篇文章主要介绍了怎么使用Echarts绘制街道及镇级地图的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用Echarts绘制街道及镇级地图文章都会有所收获，下面我们一起来看看吧。

　　需求要求画出上海普陀区，具体街道、镇级的地图。普通Echart只能画出省市区的的地图不能提供具体的街道、镇级数据。所以可以通过bigmap来获取具体数据。

　　下载bigmap（选择第二个全能版）

　　在bigmap中下载所需街道的.kml文件

　　3.下载成功后需要将.kml文件转化为json

　　将.kml文件导入geojson.io，如果有多个.kml文件则依次导入，导入成功后右侧区域就是我们需要的json文件，左侧部分则是我们后面绘制地图对应的形状（这个可以不用管），复制json数据将其保存在项目中（这里我是保存在public/static/map.json)

　　4.最重要的数据已经有了，接下来就可以开始使用echart进行绘制了

　　首先安装echarts

　　npm install echarts

　　然后直接在vue文件中按需导入（全局导入可参考echarts文档）

　　import * as echarts from 'echarts';

　　这里还需要用到axios来请求我们刚刚的json数据，所以安装axios

　　npm i axios

　　导入axios

　　import axios from 'axios

　　用过echarts都知道，我们需要定义一个div容器来渲染地图

　　<div id="main" style="width: 300px; height: 500px"></div>

　　因为我的需求是进入页面直接渲染的所以我把js代码直接写在了mounted钩子里面

　　到这里应该就已经完成了，但是run以后发现报错了！

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!