echarts渲染地图的两种方式
1.通过省市区的json文件进行渲染
如果没有使用geo坐标系的时候,使用series.type:map,渲染的地图在拖拽移动缩放非常的丝滑,但如果要通过坐标系来渲染地图上的点,必须使用geo坐标系,此时,移动缩放很卡,可能是因为geo坐标系在发生变化的时候需要重新渲染?可以通过设置以下配置,可以变得丝滑很多。
//配置项
geo: {
map: map,
show:false,//不显示地图的坐标系,但是其坐标系的功能依旧存在,可大大提高移动缩放的体验感,不会很卡顿
roam:true,//开启缩放平移
},
animationDurationUpdate:0,//地图移动的时候,渲染的点跟着移动,但是会有延迟,设置为0,则没有延迟
series: [
//地区数据
{
type: 'map',
map: map,
roam:true,//开启缩放平移
data: [
{ name: '北京', value: null },
{ name: '天津', value: Math.round(Math.random() * 500) },
]
},
//地图上的点数据
{
name: 'pm2.5',
type: 'scatter',
roam:true,//开启缩放平移
coordinateSystem: 'geo',//通过经纬度在坐标系定位
data: data,//数组
symbolSize: function (val) {
return val[2] / 10;
},
encode: {
value: 2
},
label: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
label: {
show: true
}
}
},
]
//放缩移动代码
//监听geo的移动放缩事件
const that = this
this.mapEchartInstance.on('georoam', function (params) {
var option = that.mapEchartInstance.getOption()//获得option对象
if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
option.geo[0].zoom = option.series[0].zoom//下层geo的缩放等级跟着上层的geo一起改变
option.geo[0].center = option.series[0].center//下层的geo的中心位置随着上层geo一起改变
option.series[1].zoom = option.series[0].zoom//下层geo的缩放等级跟着上层的geo一起改变
option.series[1].center = option.series[0].center//下层的geo的中心位置随着上层geo一起改变
} else {//捕捉到拖曳时
option.series[1].center = option.series[0].center//下层的geo的中心位置随着上层geo一起改变
option.geo[0].center = option.series[0].center//下层的geo的中心位置随着上层geo一起改变
}
that.mapEchartInstance.setOption(option, true)//设置option true是为了让地图下钻之后重置中心位置
})
2.使用bmap,百度地图进行渲染(一点也不卡顿,但是bmap渲染各种省市区的地图数据目前还没有找到,一般通过设置以下)
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [
{
featureType: 'water',//railway,subway水,铁路,公路等
elementType: 'all',
stylers: {
color: '#d1d1d1'
}
},
]
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'bmap'
}
]