Vue中使用echarts@4.x中国地图及AMap相关API的使用

简介: Vue中使用echarts@4.x中国地图及AMap相关API的使用

一、此 demo 实现的基本功能

  • 中国地图的显示
  • 地图点击下钻的功能
  • 地图相关组件的使用,例 tooltip...

二、实现思路

初始使用下载本地的中国 geo 格式的 json 数据来绘制地图,点击某一区划(例:山东省)时,以点击的区划名称使用 AMap.DistrictSearch(opts) 构造函数查询下一级的区划信息(例:青岛市区划 id 为 370200)和业务数据整合处理;然后以点击的区划 id 用AMapUI中的组件DistrictExplorer相关方法获取下一级的地图 json 数据,继而绘制下一级地图(例:青岛市),再点下同...

三、引入 echarts

因为 echarts 在 5.0 及之后版本因 包体积优化和法规规定 取消了内置 json 地图数据,但仍然可以下载之前版本的依赖包来使用或下载曾经内置的地图数据。

若要引地图 json 数据,建议下载 echarts@4.9.0 ,这是 echarts 取消内置前的最新版本地图 json 数据,之前的版本地图数据比如 3.x,2.x 或多或少在地图边界和岛屿精度部分有所不准,亲测~

1. 通过 npm 方式下载 echarts

$ npm i echarts@4.9.0

2. 引入 echarts

import echarts from 'echarts'

3. 相关 api 说明

1. echarts.registerMap

echarts 方法:在 echarts 5.0 及之后版本取消了registerMap 此方法,所以最新 echarts(v5.2.2)版本引用会报错,所以这里我使用 v4.9.0 来注册地图。

// registerMap 接收两个参数
// 第一个是地图名称,china 为显示右下角南海诸岛,china1 则不显示右下角南海诸岛
// 第二个参数是绘制地图所需的json数据,在这里我下载了两个版本的json数据放在本地引用来使用,见下文
echarts.registerMap('china', chinaJson)
2. echarts.init

echarts 方法:创建一个 ECharts 实例,返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例

// 创建实例,接收三个参数
// 参数dom:实例容器,一般是一个具有高宽的div元素
// 参数theme:可选,应用的主题。可以是一个主题的配置对象
// 参数opts:可选,附加参数
this.myChart = echarts.init(dom, theme, opts)
3. echartsInstance.on

实例方法:绑定事件处理函数(对应 off:解绑事件处理函数)

// 创建实例,接收三个参数
// 参数eventName:事件名称,全小写,例如'click','mousemove', 'legendselected'
// 参数query:可选,过滤条件,能够只在指定的组件或者元素上进行响应。可为 string 或者 Object
// 参数handler:事件处理函数
this.myChart.on(eventName, query, handler)
4. echartsInstance.setOption

实例方法:设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。

配置项部分用法见下文五、echarts 部分配置项。官方配置项手册

// 参数 option:配置项
this.myChart.setOption(option)

四、AMap 相关 api 使用说明

1. 引入 AMap

<!-- html文件 -->
<!--引入高德地图JSAPI,key值是在AMap官方申请的哦,plugin是项目中用到的插件 -->
<script src="//webapi.amap.com/maps?v=2.0&key=bb36205e1ab4869979c6505a3cc362ee&plugin=AMap.DistrictSearch"></script>
<!--引入UI组件库(1.1版本) -->
<script src="//webapi.amap.com/ui/1.1/main.js"></script>

2. AMap.DistrictSearch(opt)

插件,行政区查询服务,提供行政区相关信息。官方文档

/** 
参数opts:对象,实例时的配置
opts:{
  level: String, 关键字对应的行政区级别或商圈,可选值
  showbiz: Boolean, 是否显示商圈,默认值true
  extensions: String,是否返回行政区边界坐标点。默认值:base,不返回行政区边界坐标点,取值:all,返回完整行政区边界坐标点
  subdistrict:Number,默认1,显示下级行政区级数(行政区级别包括:国家、省/直辖市、市、区/县4个级别),商圈为区/县下一级。0不返回下一级区划,1返回下一级区划,2...,3...。
}
**/
const districtSearch = new AMap.DistrictSearch(opts)
// 根据关键字查询行政区或商圈信息 关键字支持:行政区名、citycode、adcode、商圈名,默认值:“全国”
districtSearch.search(obj.data.name, (status, result) => {
  console.log('加载区划信息', status, result)
})

3. DistrictExplorer

加载绘制地图所需的 geo 格式的 json 数据。(行政区划浏览) 提供了全国范围内到区县一级的行政区划数据(含边界),同时提供一些辅助功能,比如区划面绘制、事件监听,以及快速判断经纬度所属的子级区划等。官方文档

/** 
参数opts:对象,实例时的配置
opts:{
  level: String, 关键字对应的行政区级别或商圈,可选值
  showbiz: Boolean, 是否显示商圈,默认值true
  extensions: String,是否返回行政区边界坐标点。默认值:base,不返回行政区边界坐标点,取值:all,返回完整行政区边界坐标点
  subdistrict:Number,默认1,显示下级行政区级数(行政区级别包括:国家、省/直辖市、市、区/县4个级别),商圈为区/县下一级。0不返回下一级区划,1返回下一级区划,2...,3...。
}
**/
const districtSearch = new AMap.DistrictSearch(opts)
// 根据关键字查询行政区或商圈信息 关键字支持:行政区名、citycode、adcode、商圈名,默认值:“全国”
districtSearch.search(obj.data.name, (status, result) => {
  console.log('加载区划信息', status, result)
})

五、echarts 部分配置项

// 使用
AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
  let districtExplorer = new DistrictExplorer({
    eventSupport: true, // 打开事件支持
    map: null, // 地图对象实例。仅仅获取数据,不涉及地图相关的操作时,可以不设置
  })
  districtExplorer.loadAreaNode(obj.data.cityCode, (error, areaNode) => {
    if (error) return
    const mapJson = {}
    // 返回该区域中全部的子级区划Feature数组
    mapJson.features = areaNode.getSubFeatures() || []
    console.log('绘制地图所需的json数据', mapJson)
  })
})

六、地图 json 数据说明及 demo 效果图

1. 地图 json 数据说明比较

  • echarts@5.0 版本之前内置的 geo 地图 json 数据(这里特指v4.9.0)是不显示海南省下方的南海诸岛海域,所以地图较方正。
  • 阿里datav的地图 json 数据是显示海南省下方的南海诸岛海域,所以地图偏高。

2. demo 效果图

  1. 使用echarts@4.9.0内置的地图 json 数据绘制

image.png

  1. 使用阿里datav下载的地图 json 数据绘制

image.png

demo gitee 地址    https://gitee.com/l55776/demo_js

相关文章
|
22天前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
98 1
|
2月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
124 23
echarts地图数据信息流向图效果
|
29天前
|
JavaScript API
vue中api统一管理
【10月更文挑战第4天】
|
29天前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
|
21天前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
136 0
|
22天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
311 0
|
22天前
|
JSON JavaScript 定位技术
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
52 0
|
2月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
36 4
|
3月前
|
JavaScript 前端开发 API
Vue.js 3.x新纪元:Composition API引领潮流,Options API何去何从?前端开发者必看的抉择指南!
【8月更文挑战第30天】Vue.js 3.x 引入了 Composition API,为开发者提供了更多灵活性和控制力。本文通过示例代码对比 Composition API 与传统 Options API 的差异,帮助理解两者在逻辑复用、代码组织、类型推断及性能优化方面的不同,并指导在不同场景下的选择。Composition API 改善了代码可读性和维护性,尤其在大型项目中优势明显,同时结合 TypeScript 提供更好的类型推断和代码提示,减少错误并提升开发效率。尽管如此,在选择 API 时仍需考虑项目复杂性、团队熟悉度等因素。
51 0
|
3月前
|
JavaScript 前端开发 测试技术
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
[译] 用 Vue.js 3 Composition API 创建 i18n 插件