省市区3级下钻
示意图如下
image.png
image.png
image.png
<template>
<div class="home-container">
<el-button type="primary" @click="mapBack">返回上级地图</el-button>
<div id="map"></div>
</div>
</template>
<script lang="js">
import {defineComponent} from 'vue';
import * as echarts from 'echarts';
export default defineComponent({
name: 'map',
data() {
return {
echartsMap: null,
mapJson: {},
level: 'province'
}
},
props: {
markers: {
type: Array,
default: () => []
}
},
watch: {
level(val) {
console.log(val)
}
},
mounted() {
this.loadMapData('320000')
},
methods: {
mapBack() {
if (this.level === 'district') {
this.level = 'city'
const parentCode = this.mapJson.features[0].properties.acroutes[2]
this.loadMapData(parentCode)
} else if (this.level === 'city') {
this.level = 'province'
this.loadMapData('320000')
}
},
loadMapData(areaCode) {
// eslint-disable-next-line no-undef
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: this.map
});
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
if (error) {
console.error(error);
return;
}
let mapJson = {};
mapJson.type = 'FeatureCollection'
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
mapJson.features = areaNode.getSubFeatures();
this.mapJson = mapJson
this.loadMap('province', mapJson);
});
});
},
//通过loadMap函数加载地图
loadMap(mapName, data) {
if (this.echartsMap) this.echartsMap.dispose();
//注册并赋值给echartsMap
this.echartsMap = echarts.init(document.getElementById('map'));
if (data) {
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
//配置echarts的option
const option = {
backgroundColor: '#020933',
geo: {
map: mapName,
aspectScale: 0.75, //长宽比
zoom: 1.1,
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
nameProperty: 'name',
data: this.markers,
itemStyle: {
normal: {
borderColor: '#2ab8ff',
borderWidth: 1.5,
areaColor: '#12235c'
},
emphasis: {
areaColor: '#2AB8FF',
borderWidth: 0,
color: 'green'
}
},
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
rippleEffect: {
period: 15,
scale: 4,
brushType: 'fill'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#ffff',
shadowBlur: 10,
shadowColor: '#333'
}
},
data: this.markers
}
]
};
this.echartsMap.setOption(option);
this.echartsMap.on('click', this.echartsMapClick);
}
},
echartsMapClick(params) {
const currentMap = this.mapJson.features.filter(item => {
if (item.properties.name === params.name) return true
})
this.level = currentMap[0].properties.level
if (this.level === 'district') {
let mapJson = {};
mapJson.type = 'FeatureCollection'
mapJson.features = currentMap
this.mapJson = mapJson
}
this.$emit('mapClick', {level: this.level, code: currentMap[0].properties.adcode})
},
},
beforeUnmount() {
this.echartsMap = null
}
});
</script>
<style scoped>
#map {
height: 600px;
width: 800px;
}
</style>
