地图分层解决方案
1.
2.监听地图缩放事件,控制地图缩放时geo以及series的中心点以及缩放值一致,也可以解决分层现象
注:
<template>
<div>
<div>如皋地图</div>
<!-- 设置地图容器大小及引用(vue中使用) -->
<div class="map" ref="rgref"></div>
</div>
</template>
<script>
// 5.x要求的导入方式
import * as echarts from 'echarts'
// 导入地图文件(该地图陈仓区标记和金台区标记重合)
// import { getBaojiMap } from '../api/getBaojiMap'
// 导入本地json地图文件(陈仓区标记已经通过cp属性进行调整)
import rg from './rg.json'
// import rg from '../utils/mapData/rugao.json'
export default {
mounted() {
var myChart = this.$echarts.init(this.$refs.rgref);
// let myChart = echarts.init(this.$refs.rgref)
let options = {
title: {
text: ''
},
tooltip: {},
geo: [{
name: '如皋地图',
type: 'map',
map: '如皋', // 这里的名字要和注册中一致
center: [120.566324, 32.231591],
// layoutCenter: ["50%", "50%"],//控制显示中心点位置
zoom: 1,
layoutSize: 500,//控制显示大小
zlevel: 1,
roam: false,//'scale',
label: {
show: true
},
itemStyle: {
emphasis: { // 鼠标悬浮地图区域样式
show: true,
areaColor: "#21b1c9",
},
normal: {
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 1500,
y2: 0,
colorStops: [{
offset: 0.6,
color: "#06a6c1", // 0% 处的颜色
}, {
offset: 0.5,
color: "#23ba8f", // 100% 处的颜色
}],
global: true, // 缺省为 false
}
},
},
data: [],
tooltip: {
trigger: 'item', // axis显示该列下所有坐标轴对应数据,item只显示该点数据
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
},
backgroundColor: 'rgba(50,50,50,0.7)',
textStyle: {
color: '#fff'
},
formatter: function (params) {
console.log("params======>", params)
console.log("======>", params.name)
var res = `
<div >
<div
style='display: inline-block;
width: 10px;
height: 20px;
color: #bb3a3a'
>●</div>
<span>${'投诉量:2023-03-01 16:57:07'} 件</span>
</div>
<div>
<div
style='display: inline-block;
width: 10px;
height: 20px;
color:#18187d'
>●</div>
<span>${'举报量:10.00%'} 件</span>
</div>
<div>
<div
style='display: inline-block;
width: 10px;
height: 20px;
color:#d5ba22'
>●</div>
<span>${'受理量:10.00%'} 件</span>
</div>
<div>
<div
style='display: inline-block;
width: 10px;
height: 20px;
color:#22bd17'
>●</div>
<span>${'受理率:10.00%'} 件</span>
</div>
`
return params.name + res
}
},
}],
series: [
{
name: '如皋地图',
type: 'map',
map: '如皋', // 这里的名字要和注册中一致
// layoutCenter: ["50%", "50%"],//控制显示中心点位置
// layoutCenter: ["50%", "50%"],//控制显示中心点位置
center: [120.566324, 32.231591],
layoutSize: 500,//控制显示大小
zlevel: 0,
zoom: 1,
roam: true,//'scale',
label: {
show: true
},
itemStyle: {
borderWidth: 8,
borderColor: '#0655ad',
areaColor: '#9bb4d7',
shadowColor: '#0e3d8d',
emphasis: { // 鼠标悬浮地图区域样式
show: true,
areaColor: "#21b1c9",
},
shadowOffsetY: 10,
shadowOffsetX: 2,
opacity: 1,
},
data: []
}
],
}
// 初始化地图
this.initMapDataFromJsonFile(myChart, options)
},
methods: {
// 加载本地json数据来初始化地图
initMapDataFromJsonFile(myChart, options) {
console.log("myChart====>", myChart)
console.log("options====>", options)
// 加载本地数据注册地图,并命名(options中的series.map的名字要与之一致)
echarts.registerMap('如皋', rg)
myChart.on("georoam", e => {
console.log("e===>", e)
if (e.componentType == 'geo') {
let optionTemp = options
optionTemp.series[0].center = optionTemp.geo[0].center
optionTemp.series[0].zoom = optionTemp.geo[0].zoom
myChart.setOption(optionTemp, true)
}
//
const option = options;
let mapGeo = option.series[0];
});
myChart.off("georoam");
myChart.setOption(options)
},
}
}
</script>
<style>
.map {
width: 800px;
height: 800px;
}
</style>