该文章介绍了如何从DataV.GeoAtlas获取地图JSON数据，并利用Echarts库在网页中渲染地图。通过fetchAPI处理跨域问题，动态展示和高亮地图区域，以及实现提示框的循环显示。文章还提供了具体的JavaScript代码示例来说明地图的交互功能，如点击高亮和显示数据。
一、下载地图json数据
进入以下网站，获取你所需地区的地图json数据
DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.230594564932193&lng=98.316650390625&zoom=6以广州为例，左边点击选择地图，右边就会生成相应的json链接
下载json文件到你的项目之中 ，就可以开始渲染地图了
二、使用echarts渲染地图
CenterMap(temp) {
var myCenterMap = echarts.init(document.getElementById("center-echart-map"));
//防止跨域，使用fetch引入地图数据
fetch('/json/baiyun-map.json', {
method: 'GET',
header: new Headers({
'Accept': 'application/json'
})
}).then((res) => {
return res.json()
}).then((res) => {
echarts.registerMap('白云区', res)
//此处的temp为自己想要在tooltip上显示的数据，格式如defaultP
var BaiyunMap = temp
//将每块区域的坐标使用名字与数据对应起来
var convertData = function (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
// console.log(res)
}
}
return res
}
var defaultP = [
[{
name: 'xx街',
value: 81,
selected: true
}]
]
let index = -1;
var alwaysShowContent = false
//写一个定时任务，使tooltip循环出现，对应区域高亮
var timer = setInterval(function () {
//隐藏上一个tooltip
myCenterMap.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index
});
//取消上一个高亮
myCenterMap.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
});
//显示当前tooltip
myCenterMap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index + 1
});
//高亮当前区域
myCenterMap.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index + 1
});
index++;
if (index >= optioncenter.series[0].data.length) {
index = -1
myCenterMap.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index
});
}
}, 1000)
if (myCenterMap._$handlers.click) {
myCenterMap._$handlers.click.length = 0;
}
//点击对应区域的方法
myCenterMap.on('click', params => {
//确定点击的为地图
if (params.seriesType === 'map') {
clearInterval(timer);
const selectData = convertData([
{
name: params.name,
value: params.data.value[2]
}
])
optioncenter.geo.regions = [{
name: params.name,
selected: true,
}]
optioncenter.series[1].data = selectData
alwaysShowContent = true
myCenterMap.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
myCenterMap.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
myCenterMap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex
});
timer = setInterval(function () {
// 隐藏提示框
myCenterMap.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index
});
// 显示提示框
myCenterMap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index + 1
});
// 取消高亮指定的数据图形
myCenterMap.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
});
// 高亮指定的数据图形
myCenterMap.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index + 1
});
index++;
if (index >= optioncenter.series[0].data.length) {
index = -1;
}
}, 2000);
}
myCenterMap.setOption(optioncenter)
})
//开始渲染地图
var optioncenter = {
tooltip: {
show: true,
trigger: 'item',
triggerOn: 'click',
alwaysShowContent: alwaysShowContent,
formatter: function (params) {
var name = params.name
var str = params.data.value[2]
return name + ':' + '<br/>' + str
}
},
geo: {
type: 'map',
map: '白云区',
silent: true,
tooltip: {
show: false
},
label: {
show: true,
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
show: true,
textStyle: {
show: 0,
color: '#fff'
}
}
},
zoom: 1.16,
// regions: convertData(BaiyunMap),
aspectScale: 1.0, //长宽比
z: 13,
itemStyle: {
show: true,
normal: {
opacity: 0.4,
areaColor: 'rgba(122,193,254,0.2)',
borderColor: '#03c5ff',
borderWidth: 2,
},
emphasis: { // 鼠标移动上去变色
areaColor: '#19CE7B',
borderColor: '#ffffff',
textStyle: {
show: 0
}
}
}
},
series: [
{
type: 'map',
map: '白云区',
data: convertData(BaiyunMap),
zoom: 1.26, //大小
aspectScale: 1.2, //长宽比
// silent: true, //不显示hover等事件
z: 12,
label: {
show: false
},
itemStyle: {
normal: {
show: true,
areaColor: '#064f96',
},
emphasis: {
areaColor: '#19CE7B',
borderColor: '#ffffff',
label: {
show: false
}
}
},
},
{
z: 13,
name: '上报数',
type: 'scatter', //散点图
coordinateSystem: 'geo',
data: convertData(defaultP),
symbolSize: 30,
symbol: 'image://img/choose.png',
label: {
show: false,
formatter: '{@[2]}',
position: 'top',
color: '#fff'
}
}
]
}
myCenterMap.setOption(optioncenter)
})
},效果图如下：
扫一扫
2385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
