用 echarts 开发地图、点击展示自定义信息框
1、下载所需地市的json 链接：DataV.GeoAtlas地理小工具系列
在右侧输入需要的名称，然后下载json文件到本地
2、在html 中准备容器，并设置宽高
<div id="mapContent">
<div ref="mapChart" style="width:100%;height:100%;margin-bottom: 0" />
</div>
#mapContent {
width: 100%;
height: 100%;
}
3、导入echarts 和 json 文件
import * as echarts from 'echarts'
import json_150000 from '@/static/neimenggu/county/150000.json'
4、处理数据
//data 数据
data() {
return {
charts: null,
mapjson: json_150000,
codeToJson: {
'150000': json_150000
},
mapOptions:{},
cityName: {
呼和浩特市: {
value: '',
jcz: '',
kc: '',
fwz: ''
},
...................
},
cityCodeAndName:{
'150100000000' :'呼和浩特市',
'150700000000' :'呼伦贝尔市',
'150200000000' :'包头市',
...................................
}
}
5、初始化方法
initEcharts(areaCode) {
const name = 'json_' + areaCode
const cityName = this.cityName
const mapjson = this.codeToJson[areaCode]
if (this.charts) {
this.charts.clear()
} else {
this.charts = echarts.init(this.$refs.mapChart)
}
const top = 28
const zoom = 1.2 //地图缩放层级（控制地图大小）
const option = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
show: false
},
legend: {
show: false
},
grid: {
height: '100%'
},
geo: {
map: name,
roam: false,
selectedMode: false, // 是否允许选中多个区域
zoom: zoom,
top: top,
show: false
},
series: [
{
name: 'MAP',
type: 'map',
map: name,
label: {
show: false,
color: '#fff'
},
showLegendSymbol: false,
data: [],
selectedMode: 'single', // 是否允许选中多个区域
zoom: zoom,
geoIndex: 1,
top: top,
tooltip: {
show: true,
formatter: function(params) {
return params.name + '(' + cityName[params.name].value + ')'
}, //内容
backgroundColor: 'rgba(0,0,0,.6)', //提示框样式
borderColor: 'rgba(147, 235, 248, .8)',
textStyle: {
color: '#FFF'
},
triggerOn: 'click'
},
emphasis: {
//划过区域时，样式设置
label: {
show: false //是否显示区域名称（在面积中）
},
itemStyle: {
areaColor: '#389BB7', //区域的面积颜色
borderWidth: 1 //区域边框
}
},
select: {
disabled: true
},
//区域样式设置
itemStyle: {
borderColor: '#2084bc',
borderWidth: 2,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
}
],
globalCoord: false // 缺为 false
},
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
}
}
]
}
this.mapOptions = option
echarts.registerMap(name, mapjson)
//处理数据
const jsonData = this.getGeoCoordMap(mapjson)
this.mapOptions.series[0].data = jsonData
const that = this
//给区域添加点击事件
this.charts.on('click', function(params) {
//先移除上个标签
const popDiv = document.getElementById('popup')
if (popDiv) {
document.getElementById('mapContent').removeChild(popDiv)
}
// 自定义弹框
var popup = document.createElement('div')
popup.id = 'popup'
popup.style.position = 'absolute'
popup.style.left = params.event.event.clientX - 90 + 'px'
popup.style.top = params.event.offsetY - 120 + 'px'
popup.style.backgroundColor = '#22312f'
popup.style.zIndex = 999
popup.style.padding = '0 20px'
popup.style.borderRadius = '10px'
popup.innerHTML =
'<div id="nmgInfoWindow">' +
'<div class="title">' +
params.data.name +
'详情<i class="el-icon-close closebt" id = "closeBtn"></i></div>' +
'<div class="items"> <span style="color:#62b2bc;">项目一</span><span>' +
'<span style="color:#62b2bc;">' +
cityName[params.data.name].jcz +
'</span>' +
'<i class="el-icon-arrow-right toDetail" style="color:#62b2bc;"></i></span>' +
'</div>' +
'<div class="items"> <span style="color:#62b2bc;">项目二</span><span>' +
'<span style="color:#62b2bc;">' +
cityName[params.data.name].kc +
'</span>' +
'<i class="el-icon-arrow-right toDetail" style="color:#62b2bc;"></i></span>' +
'</div>' +
'<div class="items"> <span style="color:#62b2bc;">项目三</span><span>' +
'<span style="color:#62b2bc;">' +
cityName[params.data.name].fwz +
'</span>' +
'<i class="el-icon-arrow-right toDetail " style="color:#62b2bc;"></i></span>' +
'</div>' +
'</div>'
//添加到页面上
document.getElementById('mapContent').appendChild(popup)
//给自定义弹框中添加关闭事件
const closeButton = document.querySelector('#closeBtn')
closeButton.addEventListener('click', function() {
const popDiv = document.getElementById('popup')
if (popDiv) {
document.getElementById('mapContent').removeChild(popDiv)
}
})
//给自定义弹框中的按钮跳转事件
const detailButton = document.querySelectorAll('.toDetail')
detailButton.forEach((item, index) => {
item.addEventListener('click', function() {
console.log('点击事件',that)
})
})
})
this.charts.setOption(option)
},
getGeoCoordMap(mapjson) {
const mapFeatures = mapjson.features
const cityCenter = {}
mapFeatures.map((item) => {
cityCenter[item.properties.name] = item.properties.centroid || item.properties.center || []
})
const newData = []
mapFeatures.map((item) => {
if (cityCenter[item.properties.name]) {
newData.push({
name: item.properties.name,
value: cityCenter[item.properties.name],
adcode: item.properties.adcode
})
}
})
return newData
}
6、结果
