Echarts 通过加载 DataV.GeoAtlas工具 获取的GeoJson地图数据,绘制地图。
一、先获取地图数据:数据格式分别选择包含子区域和不包含子区域各下载一份。
二、Echarts利用数据绘制
1.加载两份数据
//获取两份数据
const SX = await this.getWorldJson('shanXi')
const SXNoSubRegion = await this.getWorldJson('shanXiNoSubRegion')
//加载数据
this.$echarts.registerMap('山西省', SX)
this.$echarts.registerMap('山西省无子区域', SXNoSubRegion)
2. echarts绘制地图,options中内容(分别配置无子区域和包含子区域的样式)。配置时{map:''},其中map属性对应使用 registerMap 注册的地图名称。
const option = {
series: [
{
type: 'map',
map: '山西省无子区域',
silent: true, // 图形是否不响应和触发鼠标事
roam: false, // 鼠标缩放
zoom: 1.01,
itemStyle: {
borderColor: '#14edfc',
borderWidth: 5,
areaColor: 'rgba(0,0,0,0)'
}
},
{
type: 'map',
map: '山西省',
roam: false,
label: {
show: true,
color: '#0484a5'
},
itemStyle: {
borderColor: '#3b89ac',
borderWidth: 3,
areaColor: 'rgba(9, 40, 77, 0.5)'
}
}
]
}
无子区域、包含子区域分别展示效果:
实现的叠加效果
无子区域的模块配置 缩放比例属性 zoom:1.01(默认1),这样叠加时两者不会完全重叠,无子区域地图稍大,地图轮廓有包裹的伪3D效果。
由于地图是两者叠加的,进行鼠标缩放时,只会放大其中一者,叠加的两份无法同步缩放,导致错乱。所以配置属性禁止鼠标缩放,并禁止无子区域地图响应和触发鼠标事件(只需包含子区域的地图响应)。