中国地图3D立体效果
中国地图3D立体效果
具体思路:
geo叠加3层,zlevel是重叠的优先级
<template>
<div class="map">
<div class="charts" ref="chartsBox"></div>
<div class="e-label">
<p class="e-label-title">项目图例</p>
<p>区域公司<img src="../../../assets/index/project.png" alt=""></p>
<p>光伏产业<img src="../../../assets/overview/sun.png" alt=""></p>
</div>
</div>
</template>
<script>
import resize from '@/components/mixins/resize'
import '../../../../node_modules/echarts/map/js/china.js'
import { getMapData } from '@/api/overview.js'
export default {
mixins: [resize],
props: {
search: Object
},
watch: {
search: {
deep: true,
handler() {
this.initData()
}
}
},
data() {
return {
back: false,
chart: null,
pinRegois: {
'台湾': 'taiwan',
'黑龙江': 'heilongjiang',
'内蒙古': 'neimenggu',
"吉林": 'jilin',
'北京': 'beijing',
"辽宁": 'liaoning',
"河北": 'hebei',
"天津": 'tianjin',
"山西": 'shanxi',
"陕西": 'shanxi1',
"甘肃": 'gansu',
"宁夏": 'ningxia',
"青海": 'qinghai',
"新疆": 'xinjiang',
"西藏": 'xizang',
"四川": 'sichuan',
"重庆": 'chongqing',
"山东": 'shandong',
"河南": 'henan',
"江苏": 'jiangsu',
"安徽": 'anhui',
"湖北": 'hubei',
"浙江": 'zhejiang',
"福建": 'fujian',
"江西": 'jiangxi',
"湖南": 'hunan',
"贵州": 'guizhou',
"云南": 'yunnan',
"广东": 'guangdong',
"广西": 'guangxi',
"海南": 'hainan',
'上海': 'shanghai',
'香港': 'xianggang',
'澳门': 'aomen',
'南海诸岛': 'nanhai'
},
mapIcon: {
area: 'path://M185.37,75.51A8.07,8.07,0,0,0,178.84,70l-50.19-7.29L106.2,17.22a8.09,8.09,0,0,0-14.51,0L69.24,62.71,19,70a8.09,8.09,0,0,0-4.48,13.8l36.32,35.41-8.57,50a8.08,8.08,0,0,0,11.74,8.53L99,154.12l44.89,23.61a8.09,8.09,0,0,0,11.74-8.53l-8.57-50L183.33,83.8A8.07,8.07,0,0,0,185.37,75.51Z',
province: 'path://M90.831,232.96l.02,1.782H93.5l-.275-1.782Zm5.845,1.782-.58-1.782H93.7l.334,1.782Zm.884,2.709-.747-2.288H94.1l.422,2.288Zm-3.075,3.636L94,238.005H90.9l.039,3.083Zm-.56-3.636-.363-2.288h-2.7l.029,2.288Zm-6.778-2.709.324-1.782h-2.1l-.285.012-.108.3-.481,1.469Zm3.2-1.782h-2.4l-.275,1.782H90.32Zm-.029,2.2H87.609l-.354,2.288h3.026Zm-.039,2.842H87.167l-.481,3.083h3.546Zm-3.212-2.842H84.357l-.737,2.288h3.026Zm-4.637,5.924h3.546l.57-3.083H83.434Zm16.307,0-1-3.083h-3.1l.56,3.083Zm-6.307,7.646H88.867l.639-7.646h2.289Z',
plates: 'path://M90.831,232.96l.02,1.782H93.5l-.275-1.782Zm5.845,1.782-.58-1.782H93.7l.334,1.782Zm.884,2.709-.747-2.288H94.1l.422,2.288Zm-3.075,3.636L94,238.005H90.9l.039,3.083Zm-.56-3.636-.363-2.288h-2.7l.029,2.288Zm-6.778-2.709.324-1.782h-2.1l-.285.012-.108.3-.481,1.469Zm3.2-1.782h-2.4l-.275,1.782H90.32Zm-.029,2.2H87.609l-.354,2.288h3.026Zm-.039,2.842H87.167l-.481,3.083h3.546Zm-3.212-2.842H84.357l-.737,2.288h3.026Zm-4.637,5.924h3.546l.57-3.083H83.434Zm16.307,0-1-3.083h-3.1l.56,3.083Zm-6.307,7.646H88.867l.639-7.646h2.289Z',
},
iconColor: {
area: ["#ffea00", '区域公司'],
province: ["#01F3F7", '光伏产业'],
plates: ["#01F3F7", '光伏产业']
},
mapJson: null,
provinceCode: 'china'
}
},
mounted() {
this.initData()
},
methods: {
initData() {
getMapData(this.search).then(res => {
if (res.code == 200) {
this.mapData = res.data;
if (this.search.province == '') {
this.provinceCode = 'china'
}
this.initChart();
}
})
},
initChart() {
this.mapJson = this.provinceCode == 'china' ? require(`../../../../node_modules/echarts/map/json/china.json`) : require(
`../../../../node_modules/echarts/map/json/province/${this.provinceCode}.json`);
this.chart = this.$echarts.init(this.$refs.chartsBox);
this.$echarts.registerMap('map', this.mapJson);
var option = {
// backgroundColor: "black",
geo: this.geoFn(),
series: this.seriesFn(),
tooltip: {
trigger: 'item',
},
animation: false
};
this.chart.setOption(option, true);
this.chart.off('click');
this.chart.on('click', this.provinceMapClick);
this.chart.on('georoam', (params) => { //放大缩小
var optionTmp = this.chart.getOption();
if (params.zoom != null && params.zoom != undefined) {
optionTmp.geo[0].zoom = optionTmp.geo[2].zoom;
optionTmp.geo[1].zoom = optionTmp.geo[2].zoom;
optionTmp.geo[0].center = optionTmp.geo[2].center;
optionTmp.geo[1].center = optionTmp.geo[2].center;
} else {
optionTmp.geo[0].center = optionTmp.geo[2].center;
optionTmp.geo[1].center = optionTmp.geo[2].center;
}
// this.chart.dispatchAction({
// type: 'restore'
// })
this.chart.setOption(optionTmp);
});
},
geoFn() {
const geo = [
// 高亮虚影层,描绘白色轮廓
{
map: 'map',
roam: true, // 是否允许缩放
silent: false,
// layoutCenter: ["50%", "50%"], //地图位置
// layoutSize: this.provinceCode == 'china' ? '120%' : '100%',
zoom: this.provinceCode == 'china' ? '1.15' : '1',
itemStyle: {
normal: {
borderColor: 'rgba(255,255, 255,1)',
borderWidth: 3,
shadowColor: 'rgba(255,255, 255,1)',
shadowOffsetY: 0,
shadowBlur: 5,
},
},
zlevel: -1,
},
// 底部重影层,蓝色偏移形成立体感
{
map: 'map',
roam: true, // 是否允许缩放
silent: false,
// layoutCenter: ["50%", "50%"], //地图位置
// layoutSize: this.provinceCode == 'china' ? '120%' : '100%',
zoom: this.provinceCode == 'china' ? '1.15' : '1',
itemStyle: {
normal: {
shadowColor: "#00BAFF",
shadowOffsetX: 0,
shadowOffsetY: 13,
opacity: 0.8,
},
emphasis: {
areaColor: "#00BAFF",
},
},
zlevel: -2,
},
// 真实层
{
map: this.provinceCode == 'china' ? 'china' : 'map',
zoom: this.provinceCode == 'china' ? '1.15' : '1',
// layoutCenter: ["50%", "50%"], //地图位置
// layoutSize: this.provinceCode == 'china' ? '120%' : '100%',
roam: true, //是否开启平游或缩放
silent: false,
label: {
show: true,
color: "#FFFFFF",
fontSize: 10,
},
itemStyle: {
normal: {
areaColor: "#011C33",
borderColor: "#007480",
borderWidth: 1,
},
emphasis: {
areaColor: "#108dc7",
borderColor: "#108dc7",
label: {
show: true,
color: "#fff",
},
},
},
// data: data,
zlevel: 0,
},
]
return geo;
},
seriesFn() {
let series = [];
let paramArr = [];
if (this.mapData.plates) {
paramArr = ['area', 'plates']
} else {
paramArr = ['area', 'province']
}
if(this.search.areaCode == '' && this.search.province != ''){
paramArr = paramArr.slice(1)
}
paramArr.forEach(paramItem => {
this.mapData[paramItem].forEach(item => {
let data = this.convertData(item);
series.push({
type: 'scatter',
coordinateSystem: 'geo',
symbol: this.mapIcon[paramItem],
itemStyle: {
normal: {
color: this.iconColor[paramItem][0]
}
},
symbolSize: 14,
tooltip: {
show: true,
transitionDuration: 0,
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
backgroundColor: 'rgba(0, 60, 93, .9)',
formatter(e) {
if (paramItem == 'area') {
var html = `<div class="overview-tooltip"><p>${e.name}</p>`;
html +=
`<div><span class>装机容量</span><span>${item.capacity}万KW</span></div>`;
html +=
`<div><span>机组台数</span><span>${item.installedUnits}台</span></div>`
} else if (paramItem == 'province') {
var html = `<div class="overview-tooltip"><p>${item.province}光伏产业</p>`;
} else {
var html = `<div class="overview-tooltip"><p>${item.orgShortName}光伏产业</p>`;
}
html += `</div>`;
return html;
}
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1,
data: data,
})
});
})
return series;
},
convertData(data) {
let res = [];
res.push({
name: data.areaShortName,
value: data.value,
province: data.province
});
return res;
},
provinceMapClick(params) {
if (params.seriesType == "scatter" && params.data.province) {
let data = params.data;
this.provinceCode = this.pinRegois[data.province]
this.$emit('getProvince', params.data.province)
}
},
}
}
</script>
<style lang="scss" scoped>
.map {
position: relative;
height: calc(100% - 48px);
width: 100%;
.e-label {
position: absolute;
left: 20px;
bottom: 20px;
width: 160px;
padding: 10px;
background-color: #021729;
border-radius: 10px;
opacity: 0.8;
font-size: 12px;
}
.e-label p {
margin: 0;
line-height: 22px;
}
.e-label .e-label-title {
margin-bottom: 5px;
font-size: 14px;
}
.e-label p img {
float: right;
}
}
.charts {
height: 100%;
width: 100%;
background: url('../../../assets/overview/map-bg.png') no-repeat center;
background-size: 100% 100%;
}
</style>
<style lang='scss'>
.overview-tooltip > p {
min-width: 200px;
margin-bottom: 10px;
padding: 5px 0;
font-size: 16px;
font-weight: bold;
text-align: center;
background: url('../../../assets/overview/detail-bg.png') no-repeat center;
}
.overview-tooltip > div {
overflow: hidden;
padding: 4px 10px;
font-size: 14px;
span {
&:last-child {
margin-left: 30px;
}
}
}
</style>
萌褚: 淘宝npm镜像站全新上线,Web界面地址:npmmirror.com;npm 客户端使用地址:registry.npmmirror.com
旺仔OO糖: 博主写的非常清晰啊,对我很有帮助,谢谢啦