使用echarts实现一个可拖拽缩放的立体地图

JavaScript020

使用echarts实现一个可拖拽缩放的立体地图,第1张

近期根据全新的需求重构一个老的项目，首页需要做一个立体的中国地图，原先的平面地图使用的是高德与echarts结合，地图用高德，点用echarts，而现在要做立体的地图，并且不需要世界地图的背景，于是我直接放弃了高德直接改全部由echarts来实现。

echarts 5.1.2

vue-echarts 6.0.0

lodash

element-ui

采用高德的地图json

https://datav.aliyun.com/tools/atlas/index.html

我绘制的立体地图的原理只是在页面上显示了两层的地图，简单来说就是底层使用暗色并且将中心点稍微下移，echarts的option配置如下

注意点：

通过监听 georoam 事件来实现，需要特别注意的是，缩放与拖动需要调用 echartsInstance.getOption() 来获取完整的option值并做出修改后覆盖原有的option，否则会出现bug。

单击事件有时会无法生效故改成了双击下钻(估计可能和拖拽有冲突)

说明：

1.code，centroid，level是数据组装的时候放入data中的，前两者直接从地图文件中取到，level的值只有'country'和'province'代表全国和省份。

至此一个完整的立体地图就实现了。

参考内容

https://www.makeapie.com/editor.html?c=xPRYVyWjUJ

vue中使用 echarts地图

main.js中

package.json 使用版本

在vue文件中使用

3d地图示例

中国地图json数据

import '@/components/china'

var myChart = this. echarts.registerMap("china", china)//china为上图中的json数据

const myChart = this.$echarts.init(document.getElementById('main'))

option={

//此处配置可参考官网例子即可

}；

myChart.setOption(option)

此处说明如何出现geo3d（立体地图）

数据来源

http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

按照需求，选择对应的数据，保存为json文件引入项目中即可