. 在echarts的开发中，需要使用的地图渲染的时候，发现echarts自带的地图文件更新不够及时，这个时候需要，引入百度地图的来渲染地图数据。 ·
一、引进百度地图api
二、使用百度地图的API获取每个城市的轮廓的数据
我们把API处理方法封装一个js，假设我们叫BmapRegionData.js。
BmapRegionData.js内容
import { cityArea } from './mapCityArea'
import echarts from 'echarts'
// 获取地图轮廓数据
export function getMapData (params) {
// 百度地图实例方法
let bdary = new window.BMap.Boundary()
// 用于存储轮廓数据的对象和格式
let mapObj = {
type: 'FeatureCollection',
features: []
}
let mapData = []
// 因为每一个省份是由它的地级市轮廓组合而成，这里是获取子层的轮廓
let PromiseArr = params.mapData.map(function (item) {
return new Promise((resolve, reject) => {
let nameData = ''
let searchName = ''
if (item.indexOf(',') > -1) {
let arr = item.split(',')
nameData = arr[arr.length - 1]
searchName = item.replace(/,/g, '')
} else {
searchName = nameData = item
}
// 部分真实地区的名字与实际区需要使用的搜索的名字映射表
/*
const cityArea = {
'北京': '北京市',
'北京市': '北京市',
'上海': '上海市',
'上海市': '上海市',
'重庆': '重庆市',
'重庆市': '重庆市',
'天津': '天津市',
'天津市': '天津市',
'广东省深圳市光明新区': '光明区',
'广东省佛山市南海区': '南海区'
}
*/
searchName = cityArea[searchName] ? cityArea[searchName] : searchName
bdary.get(searchName, function (rs) {
let data = rs.boundaries
let dataStrArr = ''
let arr = []
mapData = []
let mapDataObj = {
type: 'Feature',
properties: { name: item },
geometry: { type: 'Polygon', coordinates: [] }
}
if (data.length === 0) {
resolve('')
}
// 子层的轮廓可能不是；连续的
for (let m = 0; m < data.length; m++) {
arr = []
dataStrArr = data[m].split(';')
// 每个类型的数据不一样
switch (params.type) {
case 'all': mapDataObj = {
type: 'FeatureCollection',
features: []
}
break
case 'province': mapDataObj = {
type: 'Feature',
geometry: { type: 'Polygon', coordinates: [] },
properties: { name: m === 0 ? nameData : nameData + ':' + m }
}
break
case 'city': mapDataObj = {
type: 'Feature',
properties: { name: m === 0 ? nameData : nameData + ':' + m },
geometry: { type: 'Polygon', coordinates: [] }
}
break
}
// 轮廓的每个点，经纬度组合一个点的数组
for (let i = 0; i < dataStrArr.length; i++) {
arr.push([Number(dataStrArr[i].split(',')[0]), Number(dataStrArr[i].split(',')[1])])
}
mapDataObj.geometry.coordinates = [arr]
if (data.length === 1) {
resolve(mapDataObj)
} else {
mapData.push(mapDataObj)
}
}
if (data.length > 1) {
resolve(mapData)
}
})
})
})
Promise.all(PromiseArr).then(res => {
let data = res.filter(function (item) {
return item
})
let isNotArea = false
if (data.length === 1) {
isNotArea = true
}
data = data.reduce((r, item) => r.concat(item), [])
mapObj.features = [...data]
// echart渲染区域
echarts.registerMap(params.mapName, mapObj)
bdary = null
PromiseArr = null
mapObj = null
mapData = null
params.callback(params.callbackData, data, isNotArea)
}).catch(() => {
bdary = null
PromiseArr = null
mapObj = null
mapData = null
})
}
mapCityArea.js为：部分真实地区的名字与实际区需要使用的搜索的名字映射表，如：搜索'广东省深圳市光明新区'的时候，需要把名称改为'光明区'；
mapCityArea.js内容
export const cityArea = {
'北京': '北京市',
'北京市': '北京市',
'上海': '上海市',
'上海市': '上海市',
'重庆': '重庆市',
'重庆市': '重庆市',
'天津': '天津市',
'天津市': '天津市',
'广东省深圳市光明新区': '光明区',
'广东省佛山市南海区': '南海区'
}
三、vue组件的使用
html部分
.map-chart部分为地图显示容器, .scatter部分为自定义弹窗的显示
百度地图api的函数引用
utils.drawing为echarts地图的方法
drawing方法为
export function drawing (options) {
let option = null
let arr = []
// 每个省份的缩放不一样，看地图是否对称
const mapObj = {
'西藏': 100,
'广西': 100,
'湖北': 120,
'吉林': 100,
'青海': 100,
'湖南': 150,
'福建': 150,
'云南': 150,
'重庆': 150,
'天津': 150,
'海南': 180,
'江西': 180,
'河北': 180,
'安徽': 180,
'宁夏': 180,
'陕西': 210,
'山西': 230,
'澳门': 230,
'广东': 120,
'浙江': 120,
'贵州': 120,
'四川': 120,
'新疆': 120,
'内蒙古': 120,
'河南': 120,
'江苏': 120,
'山东': 120,
'上海': 120,
'北京': 120,
'辽宁': 120,
'黑龙江': 120,
'香港': 120,
'台湾': 120
}
for (let i = 0; i < options.citys.length; i++) {
arr.push({
name: options.citys[i].cityName,
itemStyle: {
color: '#25a9e1',
areaColor: '#25a9e1',
opacity: 1,
borderWidth: 1,
borderColor: '#333'
},
emphasis: {
itemStyle: {
color: '#25a9e1',
areaColor: '#25a9e1',
opacity: 1,
borderWidth: 1,
borderColor: '#333'
}
}
})
}
option = {
series: [
{
name: 'map3D',
type: 'map3D',
map: options.provincesName,
itemStyle: {
color: '#07517e',
areaColor: '#07517e',
opacity: 0.5,
borderWidth: 0.4,
borderColor: '#11c6db'
},
viewControl: {
projection: 'perspective',
maxBeta: 0, // 地图左右移动
minBeta: 0, // 地图左右移动
minAlpha: 50, // 地图上下移动
maxAlpha: 50, // 地图上下移动
alpha: 50, // 地图上下移动初始值
beta: 0, // 地图左右移动初始值
distance: mapObj[options.provincesName], // 看地图的远近
zoomSensitivity: 0, // 设置为0无法进行缩放
orthographicSize: 100// 地图投影
},
label: {
show: false
},
emphasis: {// 当鼠标放上去 地区区域是否显示名称
label: {
show: false
},
itemStyle: {
color: '#07517e',
areaColor: '#07517e'
}
},
light: { // 光照阴影
main: {
color: '#fff', // 光照颜色
intensity: 1.2, // 光照强度
shadow: false, // 是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
},
data: arr
}
]
}
return option
}
下面我们看看效果，我们写点数据上去，假设是广东省的
// 省份下有数据的城市
export const cityList = [
{
regionId: '342',
regionIdName: '广州市',
communityNums: '4'
},
{
regionId: '342',
regionIdName: '深圳市',
communityNums: '4'
}
]
// 省份下的所有地级市
export const allCityList = [
'广州市', '深圳市', '东莞市', '佛山市', '惠州市', '汕尾市', '汕头市', '潮州市', '揭阳市', '河源市', '梅州市', '韶关市',
'清远市', '肇庆市', '云浮市', '中山市', '珠海市', '江门市', '阳江市', '茂名市', '湛江市'
]
城市的地图渲染
// 城市下的区
// options.areas数组，
// options.areas[i].areaName区名字
// options.currentAreaName选中的当前区，选传
export function drawCity (options) {
let option
let arr = []
let areaColor
for (let i = 0; i < options.areas.length; i++) {
areaColor = options.currentAreaName ? options.areas[i].areaName.indexOf(options.currentAreaName) > -1 ? '#c8f6fe' : '#25a9e1' : '#25a9e1'
arr.push({
name: options.areas[i].areaName,
itemStyle: {
color: areaColor,
areaColor: areaColor,
opacity: 1,
borderWidth: 1,
borderColor: '#333'
},
emphasis: {
itemStyle: {
color: areaColor,
areaColor: areaColor,
opacity: 1,
borderWidth: 1,
borderColor: '#333'
}
}
})
}
option = {
series: [
{
name: 'map3D',
type: 'map3D',
map: options.cityName,
itemStyle: {
color: '#07517e',
areaColor: '#07517e',
opacity: 0.5,
borderWidth: 0.4,
borderColor: '#11c6db'
},
viewControl: {
projection: 'perspective',
maxBeta: 0, // 地图左右移动
minBeta: 0, // 地图左右移动
minAlpha: 90, // 地图上下移动
maxAlpha: 90, // 地图上下移动
alpha: 90, // 地图上下移动初始值
beta: 0, // 地图左右移动初始值
distance: 200, // 看地图的远近
// zoomSensitivity: 0, // 设置为0无法进行缩放
orthographicSize: 100// 地图投影
},
label: {
show: false
},
emphasis: {// 当鼠标放上去 地区区域是否显示名称
label: {
show: false
},
itemStyle: {
color: '#07517e',
opacity: 0.5,
areaColor: '#07517e'
}
},
light: { // 光照阴影
main: {
color: '#fff', // 光照颜色
intensity: 1.2, // 光照强度
shadow: false, // 是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
},
data: arr
}
]
}
return option
}
深圳市的数据
// 城市下面有数据的区
export const areaList = [
{
regionId: '302',
regionIdName: '南山区',
communityNums: '2'
},
{
regionId: '303',
regionIdName: '福田区',
communityNums: '1'
}
]
// 城市下所有的区
export const allAreaList = [
'罗湖区', '福田区', '南山区', '宝安区', '光明区', '龙华区', '龙岗区', '盐田区', '大鹏新区', '坪山区',
]