验证码: 看不清楚,换一张 查询 注册会员,免验证
  • {{ basic.site_slogan }}
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

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

阅读:652 来源:乙速云 作者:代码code

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

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

  1. 下载bigmap(选择第二个全能版)

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

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

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

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

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

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容器来渲染地图


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

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

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

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

最终效果:

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

分享到:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: hlamps#outlook.com (#换成@)。
下一篇: yii2如何去掉jquery
相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>