地图
<div class="map"
v-loading="dataLoading"
element-loading-background="rgba(255, 255, 255, 0.1)">
<div class="map4"
id="mapLocation"
style="height: 8rem;"></div>
</div>
import echarts from 'echarts/lib/echarts'
data数据定义
geoJson: [],
mapChart: null,
parentInfo: [{ cityName: '中国', code: '100000', level: 'all' }],
mapData: [],
specialProvince: {
内蒙古自治区: '内蒙古',
西藏自治区: '西藏',
新疆维吾尔自治区: '新疆',
宁夏回族自治区: '宁夏',
广西壮族自治区: '广西',
香港特别行政区: '香港',
澳门特别行政区: '澳门',
},
methods方法
// 查询地图入口
getDeviceLocationList() {
this.dataLoading = true
mapQuery(this.mapDatas)
.then((res) => {
this.mapLocationList = res.data.data.device_address
this.dataLoading = false
})
.then(() => {
// 如果没有选省就直接省市中国地图
if (
this.mapDatas.province_code != '' &&
this.mapDatas.province_code != undefined
) {
// 如果选省没有选市 就直接请求省
if (
this.mapDatas.city_code != '' &&
this.mapDatas.city_code != undefined
) {
this.getGeoJson(this.mapDatas.city_code)
} else {
this.getGeoJson(this.mapDatas.province_code)
}
} else {
this.getGeoJson(this.mapDatas.geoCode)
}
})
},
// 条件查询省
getGeoJson(code) {
// let geoUrl = `https://geo.datav.aliyun.com/areas/bound/geojson?code=${code}_full`
// let geoUrl = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}_full`
let geoUrl = `https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=${code}_full`
fetch(geoUrl, {
method: 'get',
referrer: '',
referrerPolicy: 'no-referrer',
})
.then((res) => {
return res.json()
})
.then((data) => {
this.geoJson = data
this.setMapData(data.features)
})
.then(() => {
this.mapLocation('mapLocation')
})
},
// 设备位置在地图上渲染
setMapData(data) {
let allProvince = {}
if (this.mapLocationList.length != 0) {
if (
this.mapDatas.province_code != '' &&
this.mapDatas.province_code != undefined
) {
allProvince = this.mapLocationList.reduce((city, item) => {
if (item.city_code in city) {
city[item.city_code] += 1
} else {
city[item.city_code] = 1
}
return city
})
} else if (this.mapLocationList.length > 0) {
allProvince = this.mapLocationList.reduce((province, item) => {
if (item.province_code in province) {
province[item.province_code] += 1
} else {
province[item.province_code] = 1
}
return province
}, {})
}
let provinceLength = Object.keys(allProvince).length
data.forEach((item) => {
let value =
provinceLength > 0
? allProvince[item.properties.adcode]
? allProvince[item.properties.adcode]
: 0
: 0
this.mapData.push({
name: item.properties.name,
count: value,
code: item.properties.adcode,
level: item.properties.level,
})
if (item.properties.adcode !== '100000') {
let center = item.properties.center
this.scatterDataList.push([center[0], center[1], value])
}
})
}
},
//设备地图位置
mapLocation(id) {
//初始化
if (this.mapChart) {
this.mapChart.dispose()
}
//注册地图
// if (this.parentInfo.length === 1) {
// this.$echarts.registerMap('china', this.geoJson)
// } else {
this.$echarts.registerMap('map', this.geoJson)
// }
this.mapChart = this.$echarts.init(document.getElementById(id))
let unit = this.$t('datav.number'),
statusMap = [this.$t('device.offline'), this.$t('device.online')],
visualMap = {
type: 'continuous',
show: false,
left: '5%',
bottom: '5%',
min: 0,
max: 1000,
text: ['40', '0'],
inRange: {
// color: ['#44FCF7','#08E4DE','#44FCF7','#08E4DE']
// color: ['#F5B16D', '#F09C42', '#EC870E', '#D0770B'],
//color: ['#41A7DE', '#eac736', '#fffc00', '#ff2600']
color: ['rgba(247, 218, 161, 0.66)', '#F95A2F', '#F95329'],
},
textStyle: {
color: '#FFFFFF',
fontSize: 12,
},
seriesIndex: 1,
},
heatMap = {
name: '分布热图',
type: 'heatmap',
pointSize: 10, // 设置 热力图 点 的大小
blurSize: 3, // 设置点的 阴影半径
coordinateSystem: 'geo',
itemStyle: {
color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
{ offset: 0, color: '#F95329' },
{ offset: 0.4, color: '#F95A2F' },
{ offset: 1, color: 'rgba(247, 218, 161, 0.66)' },
]),
},
silent: true,
},
effectScatter = {
name: '',
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: { brushType: 'fill' },
itemStyle: {
color(p) {
if (p.data.status === 0) {
return {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{ offset: 0, color: '#F0B01E' /* 0% 处的颜色*/ },
{ offset: 1, color: '#FFEBBC' /* 100% 处的颜色*/ },
],
global: false, // 缺省为 false
}
} else if (p.data.status === 1) {
return {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{ offset: 0, color: '#05C552' /* 0% 处的颜色*/ },
{ offset: 1, color: '#ffffff' /* 100% 处的颜色*/ },
],
global: false, // 缺省为 false
}
}
},
shadowBlur: 10,
shadowColor: '#333',
},
tooltip: {
show: true,
trigger: 'item',
formatter: (params) => {
//${this.$t('common.address')}：${params.data.address ? params.data.number : ''}
let marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#40FFF9;"></span>`
return `${this.$t('device.type')}：${params.data.type}<br>
${this.$t('device.number')}：${
params.data.number
}<br>
${this.$t('device.status')}：${
statusMap[params.data.status]
}`
},
},
encode: {
tooltip: ['lng', 'lat'],
},
symbolSize: 12,
showEffectOn: 'render', //加载完毕显示特效
},
scatterIcon1 = 'image:///static/img/statistics_low.png',
scatterIcon2 = 'image:///static/img/statistics_middle.png',
scatterIcon3 = 'image:///static/img/statistics_high.png',
scatter = {
name: '数量统计',
type: 'scatter',
coordinateSystem: 'geo',
symbol(value) {
if (value[2] < 10) {
return scatterIcon1
} else if (value[2] < 100) {
return scatterIcon2
} else {
return scatterIcon3
}
},
symbolSize(val, params) {
return val[2] ? 40 : 0
},
label: {
show: true,
color: '#fff',
formatter(params) {
return params.value[2] ? params.value[2] : ''
},
},
itemStyle: { opacity: 1 },
data: this.scatterDataList,
tooltip: {
formatter(params) {
return `${params.seriesName}: <br>${params.marker} ${params.value[2]} ${unit}`
},
},
silent: true,
},
legend = {
itemWidth: 18,
itemHeight: 18,
orient: 'horizontal',
top: '8%',
left: '1%',
data: [
{
name: '数量统计',
icon: 'image:///static/img/checkbox_circle.png',
},
{ name: '分布热图', icon: 'circle' },
],
textStyle: {
color: '#21FFFC',
},
selected: { 数量统计: false, 分布热图: true },
},
baseOption = {
backgroundColor: 'transparent',
title: { show: false },
tooltip: { trigger: 'item', axisPointer: { type: 'shadow' } },
grid: { show: false },
toolbox: { show: false },
geo: {
map: 'map',
zoom: 7,
roam: true,
left: '10%',
top: '15%',
// center: this.parentInfo.length === 1 ? ['113.191533', '28.250933'] : false,
layoutCenter: ['50%', '50%'],
layoutSize: 80,
label: {
normal: {
show: true,
color: '#003854', //省份标签字体颜色
formatter: (p) => {
return this.specialProvince[p.name]
? this.specialProvince[p.name]
: p.name
},
},
emphasis: { show: true, color: '#fff' },
},
itemStyle: {
areaColor: '#3EF8FF',
borderColor: '#0095AD',
borderWidth: 1.5,
shadowBlur: 6,
shadowColor: '#41cfcf',
shadowOffsetX: 5,
shadowOffsetY: 6,
opacity: 0.88,
},
emphasis: {
itemStyle: {
areaColor: '#0095AD',
// borderWidth: 1.6,
// shadowBlur: 25
},
},
},
series: [
{
name: 'map',
type: 'map',
geoIndex: 0,
map: 'map',
roam: true,
zoom: 1.8,
tooltip: {
show: true,
formatter(params) {
if (params.data) {
return `${params.data.name}: ${params.data.count}台`
}
},
},
label: { show: false },
data: this.mapData,
},
],
dataset: {
dimensions: ['lng', 'lat'],
source: this.mapLocationList,
},
}
// 判断省选了没有
if (
this.mapDatas.province_code != '' &&
this.mapDatas.province_code != undefined
) {
// 如果选省没有选市 就直接请求省
baseOption.series[0]['tooltip']['show'] = false
// if (
// this.mapDatas.city_code != '' &&
// this.mapDatas.city_code != undefined
// ) {
// baseOption.series[0]['tooltip']['show'] = false
// }
baseOption.series.push(effectScatter)
} else {
baseOption['legend'] = legend
baseOption['visualMap'] = visualMap
baseOption.series.push(heatMap)
baseOption.series.push(scatter)
}
this.mapChart.setOption(baseOption)
window.addEventListener('resize', () => {
this.mapChart.resize()
})
this.dataLoading = false
},
扫一扫
1200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
