用 echarts 开发地图、点击展示自定义信息框

news2024/11/15 23:35:28

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

}