公司大屏项目需要完成一个含有飞线图功能的地图,经过查询资料借鉴,写了一个区的demo
1、准备数据,因为我是画的区县地图,所以得自己去找数据
经纬度数据获取:https://lbs.amap.com/tools/picker
//地图数据
var chinaGeoCoordMap = {
'龙岗街道': [105.71, 29.70],
'龙滩子街道': [105.79, 29.49],
'双路街道': [105.77, 29.49],
'通桥街道': [105.77, 29.52],
'智凤街道': [105.79, 29.65],
'龙水镇': [105.77, 29.56],
'邮亭镇': [105.74, 29.43],
'宝顶镇': [105.76, 29.75],
'万古镇': [105.94, 29.68],
'珠溪镇': [105.67, 29.54],
'中敖镇': [105.67, 29.76],
'三驱镇': [105.62, 29.63],
'石马镇': [105.83, 29.63],
'雍溪镇': [105.99, 29.74],
'玉龙镇': [105.82, 29.54],
'宝兴镇': [105.70, 29.62],
'拾万镇': [105.90, 29.61],
'铁山镇': [105.57, 29.69],
'回龙镇': [105.87, 29.73],
'国梁镇': [105.93, 29.76],
'金山镇': [105.89, 29.66],
'高升镇': [105.58, 29.72],
'季家镇': [105.54, 29.63],
'龙石镇': [105.62, 29.56],
'高坪镇': [105.67, 29.84],
'古龙镇': [106.01, 29.70],
}
//飞线点数据
var chinaDatas = [
[{name: '龙岗街道', value: 0}],
[{name: '龙滩子街道', value: 0}],
[{name: '双路街道', value: 0}],
[{name: '通桥街道', value: 0}],
[{name: '智凤街道', value: 0}],
[{name: '龙水镇', value: 0}],
[{name: '邮亭镇', value: 0}],
[{name: '宝顶镇', value: 0}],
[{name: '万古镇', value: 0}],
[{name: '珠溪镇', value: 0}],
[{name: '中敖镇', value: 0}],
[{name: '三驱镇', value: 0}],
[{name: '石马镇', value: 0}],
[{name: '雍溪镇', value: 0}],
[{name: '玉龙镇', value: 0}],
[{name: '宝兴镇', value: 0}],
[{name: '拾万镇', value: 0}],
[{name: '铁山镇', value: 0}],
[{name: '回龙镇', value: 0}],
[{name: '国梁镇', value: 0}],
[{name: '金山镇', value: 0}],
[{name: '高升镇', value: 0}],
[{name: '季家镇', value: 0}],
[{name: '龙石镇', value: 0}],
[{name: '高坪镇', value: 0}],
[{name: '古龙镇', value: 0}],
]
2、绘制地图
geo: [{
map: 'dazu',
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "50%"],
layoutSize: "180%",
roam: false, //是否允许缩放
show: true,
silent: true, //鼠标移入区域变色 如果设置为true则无法高亮
emphasis: {
label: {
show: false,
},
},
itemStyle: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.9,
colorStops: [{
offset: 0,
color: 'RGBA(40, 99, 113, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'RGBA(28, 79, 105, 0.6)' // 100% 处的颜色
}],
},
borderColor: "#c0f3fb",
borderWidth: 1,
shadowColor: "#8cd3ef",
shadowOffsetY: 10,
shadowBlur: 120,
},
},
// 重影
{
type: "map",
map: "dazu",
zlevel: -1,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "51%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
borderWidth: 1,
borderColor: "rgba(58,149,253,0.8)",
shadowColor: "rgba(172, 122, 255,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,