vue + echars地图 省市区 + 添加点标记
作者：互联网
echars地图
监控大屏的一个模块
定义地图位置大小
<div id="mapChart" class="mapChart"></div>
#mapChart {
width: 1000px;
height: 600px;
}
data() {
return {
myChart: '',
distributionOptions: '',
seriesList: [],
old_click: '' //判断是否重复点击用于返回地图首页
}
},
props: {
data: [Array, Object]
},
安装echars,配置地图,
定义三组数据,用于echars地图的展示省市区
var provinces = ['310000', '130000', '140000', '150000', '210000', '220000', '230000', '320000', '330000', '340000', '350000', '360000', '370000', '410000', '420000', '430000', '440000', '450000', '460000', '510000', '520000', '530000', '540000', '610000', '620000', '630000', '640000', '650000', '110000', '120000', '500000', '810000', '820000', '710000']
var provincesText = ['上海', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西省', '海南省', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '北京市', '天津市', '重庆市', '香港', '澳门', '台湾省']
var provincesName = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
这三组数据也可以后端配置,这三组数据拿的原本章的最下边有原文链接 , 配数组的时候位置要对应
mounted() {
let that = this
setTimeout(() => {
let data = that.data.equipmentInfoList
for (let i = 0; i < data.length; i++) {
that.seriesList.push({
'name': data[i].name,
'value': [data[i].longitude, data[i].latitude],
'address': data[i].addressname
})
}
// 我这个是后端请求,下边是 echars地图json文件的获取地址
// http://datav.aliyun.com/tools/atlas/index.html#&lat=32.287132632616384&lng=101.1181640625&zoom=4
//这个网站获取数据 有三种处理 前端自己请求 下载到项目 后端请求
// 后边拼接的这个 +full 省市需要加 到了区县 就不用加了 很坑 需要做兼容
getamapData({ 'code': 省市区代号(山东 370000) + '_full' }).then(s => {
if (s.code === 200) {
//这个如果不是后端传的 是自己配置的三个数组 直接写 china 显示全国地图,显示省区的地图 传你配置的三个数组中的值
//我这个一是后端传的 二是加账户权限的,所以传的多,
//第二个参数传 获取的json数据
that.init(数据组(add_coding: "370000",fenBuAddresses: null,pinyin:"shandongsheng",userAddressName: "山东省), JSON.parse(s.data))
} else {
this.$message({
showClose: true,
message: '数据维护中...',
type: 'warning'
})
}
})
}, 500)
},
//methods
//显示各省地图
getProvinceMapOpt(provinceAlphabet, name,textname) {
this.old_click = provinceAlphabet
var deviceList
//根据所有地区设备数据进行筛选 选择点击地区的
if(textname === 1){
deviceList = this.seriesList
}else{
deviceList = this.changeSeriesList(textname)
}
getamapData({ 'code': provinceAlphabet + '_full' }).then(s => {
if (s.code === 200) {
echarts.registerMap(name, JSON.parse(s.data))
this.changeOptions(name, deviceList)
this.myChart.setOption(this.distributionOptions, true)
} else {
this.getProvinceMapOpt(100000, that.data.fenBuAddress.userAddressName)
this.$message({
showClose: true,
message: '当前地区暂无权限',
type: 'warning'
})
}
})
},
// 浏览器窗口大小改变时，重新加载图表以自适应
resizeCharts: _debounce(function() {
echarts.init(document.getElementById('mapChart')).resize()
}, 500),
// 初始化地图数据
init(data,JsonList) {
echarts.registerMap(data.userAddressName, JsonList)
this.changeOptions(data.userAddressName, this.seriesList)
this.myChart = echarts.init(document.getElementById('mapChart'))
this.myChart.setOption(this.distributionOptions)
// 下面就是创建了一个点击事件，目的是点击省份子区域的时候可以切换到省份地图
this.myChart.on('click', chinaParam => {
let idx = data.fenBuAddresses.findIndex((itm) => itm.userAddressName === chinaParam.name)
if (idx === -1) {
this.getProvinceMapOpt(data.add_coding, data.userAddressName,data.userAddressName)
this.$message({
showClose: true,
message: '当前地区暂无权限',
type: 'warning'
})
} else {
let code = data.fenBuAddresses[idx].add_coding
if (this.old_click === code) {
this.getProvinceMapOpt(data.add_coding, data.userAddressName,1) // 返回全国地图 由 1 判断显示所有设备地址数据
} else {
this.getProvinceMapOpt(code, data.fenBuAddresses[idx].pinyin,data.fenBuAddresses[idx].userAddressName)
}
}
})
window.onresize = function() {
this.myChart.resizeCharts()
}
},
//
changeOptions(name, datalist) {
// 经纬度数据
const seriesList = [
{
data: datalist
}
]
// 图标
const series = seriesList.map(v => {
return {
type: 'scatter', //配置显示方式为用户自定义
coordinateSystem: 'geo',
roam : false,//禁止拖拽
data: v.data
}
})
// options
this.distributionOptions = {
tooltip: { // 提示框组件
show: true, // 显示提示框组件
trigger: 'item', // 触发类型
triggerOn: 'mousemove', // 出发条件
formatter: '名称:{b}<br/>坐标:{c}'
},
series, // 数据
geo: {
map: name || 'china', // 引入地图 省份或者 国家
layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
layoutSize: '45%',
roam: true, //开启鼠标缩放和漫
zoom: 2,
label: {
normal: {
//静态的时候展示样式
show: true, //是否显示地图省份得名称
textStyle: {
color: '#fff',
fontSize: 10,
fontFamily: 'Arial'
}
},
emphasis: { // 高亮状态下的样式
//动态展示的样式
color: '#fff'
}
},
itemStyle: { // 地图区域的多边形 图形样式。
normal: {
borderColor: '#07919e', // 边框颜色
areaColor: '#1c2f59', // 区域颜色
textStyle: { // 文字颜色
color: '#fff'
},
shadowBlur: 10, // 图形阴影的模糊大小
shadowOffsetX: 10 // 阴影水平方向上的偏移距离。
},
emphasis: {
areaColor: '#1c2f59',
color: '#fff'
}
}
}
}
}
这里是原文链接 https://www.cnblogs.com/wjw1014/p/13529371.html
标签：echars,vue,name,true,地图,userAddressName,code,省市区,data 来源： https://blog.csdn.net/weixin_42367288/article/details/120697687