echarts地图放大会出现空白echarts effectScatter配置项内容和展示
在地图进行放大缩小的时候会出现空白和闪屏，应该怎么处理这个问题才能不出现空白
配置项如下
var provinceData = [{
"name": "北京",
"value": 95
},
{
"name": "天津",
"value": 95
},
{
"name": "石家庄",
"value": 95
},
{
"name": "太原",
"value": 95
},
{
"name": "呼和浩特",
"value": 95
},
{
"name": "沈阳",
"value": 95
},
{
"name": "长春",
"value": 95
},
{
"name": "哈尔滨",
"value": 95
},
{
"name": "上海",
"value": 95
},
{
"name": "南京",
"value": 95
},
{
"name": "杭州",
"value": 95
},
{
"name": "合肥",
"value": 95
},
{
"name": "福州",
"value": 95
},
{
"name": "南昌",
"value": 95
},
{
"name": "济南",
"value": 95
},
{
"name": "郑州",
"value": 95
},
{
"name": "武汉",
"value": 95
},
{
"name": "长沙",
"value": 95
},
{
"name": "广州",
"value": 95
},
{
"name": "南宁",
"value": 95
},
{
"name": "海口",
"value": 95
},
{
"name": "重庆",
"value": 95
},
{
"name": "成都",
"value": 95
},
{
"name": "贵阳",
"value": 95
},
{
"name": "昆明",
"value": 95
},
{
"name": "拉萨",
"value": 95
},
{
"name": "西安",
"value": 95
},
{
"name": "兰州",
"value": 95
},
{
"name": "西宁",
"value": 95
},
{
"name": "银川",
"value": 95
},
{
"name": "乌鲁木齐",
"value": 95
},
{
"name": "香港",
"value": 95
},
{
"name": "澳门",
"value": 95
},
{
"name": "台北",
"value": 95
}
]
var geoCoordMap = {
"北京": [116.41667, 39.91667],
"天津": [117.20000, 39.13333],
"石家庄": [114.48333, 38.03333],
"太原": [112.53333, 37.86667],
"呼和浩特": [111.41, 40.48],
"沈阳": [123.38333, 41.80000],
"长春": [125.35000, 43.88333],
"哈尔滨": [126.63333, 45.75000],
"上海": [121.47, 31.23],
"南京": [118.78333, 32.05000],
"杭州": [120.20000, 30.26667],
"合肥": [117.17, 31.52],
"福州": [119.30000, 26.08333],
"南昌": [115.90000, 28.68333],
"济南": [117.00, 36.40],
"郑州": [113.65000, 34.76667],
"武汉": [114.31667, 30.51667],
"长沙": [113.00000, 28.21667],
"广州": [113.23333, 23.16667],
"南宁": [108.19, 22.48],
"海口": [110.35000, 20.01667],
"重庆": [106.45000, 29.56667],
"成都": [104.06667, 30.66667],
"贵阳": [106.71667, 26.56667],
"昆明": [102.73333, 25.05000],
"拉萨": [91.00000, 29.60000],
"西安": [108.95000, 34.26667],
"兰州": [103.73333, 36.03333],
"西宁": [101.75000, 36.56667],
"银川": [106.26667, 38.46667],
"乌鲁木齐": [87.68333, 43.76667],
"香港": [114.10000, 22.20000],
"澳门": [113.50000, 22.20000],
"台北": [121.30, 25.03]
}
var redData = [{
TERMINALID: 5160,
LNG: "114.63542833",
LAT: "38.85213000"
},
{
TERMINALID: 5159,
LNG: "117.40644333",
LAT: "36.70698000"
},
{
TERMINALID: 5198,
LNG: "119.00581500",
LAT: "36.74808500"
},
{
TERMINALID: 5063,
LNG: "121.56084333",
LAT: "28.53989333"
},
{
TERMINALID: 4949,
LNG: "127.04210333",
LAT: "48.92415667"
},
{
TERMINALID: 4569,
LNG: "119.80362833",
LAT: "36.28255333"
},
{
TERMINALID: 5013,
LNG: "110.53226833",
LAT: "39.41139667"
},
{
TERMINALID: 5187,
LNG: "116.90111833",
LAT: "36.34795333"
},
{
TERMINALID: 4884,
LNG: "100.49562833",
LAT: "25.99675667"
},
{
TERMINALID: 5057,
LNG: "110.15494833",
LAT: "21.05169500"
},
{
TERMINALID: 4972,
LNG: "119.19481667",
LAT: "36.69799833"
},
{
TERMINALID: 4666,
LNG: "121.23984000",
LAT: "31.21873833"
},
{
TERMINALID: 4709,
LNG: "114.30411500",
LAT: "39.45558500"
},
{
TERMINALID: 5167,
LNG: "116.78687000",
LAT: "35.85875000"
},
{
TERMINALID: 4506,
LNG: "121.74533167",
LAT: "31.12406500"
},
{
TERMINALID: 5016,
LNG: "106.80564833",
LAT: "33.06385500"
}
]
var optionData = {
x: 0,
y: 15,
zoom: 3
};
var bmap = {
center: [optionData.x, optionData.y],
zoom: optionData.zoom,
roam: 'scale',
mapStyle: {
styleJson: [{
"featureType": "water",
"elementType": "all",
"stylers": {
// "color": "#07243dff"
"color": "#051625ff"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#07243dff",
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#147a92",
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000",
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry.stroke",
"stylers": {
"color": "#0b3d51",
"visibility": "off"
}
},
{
"featureType": "local",
"elementType": "geometry",
"stylers": {
"color": "#000000",
"visibility": "off"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
// "color": "#295a84"
"color": "#092742"
}
},
{
"featureType": "railway",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "railway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#08304b",
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"lightness": -70,
"visibility": "off"
}
},
{
"featureType": "building",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000",
"visibility": "off"
}
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": {
"color": "#2d5e88ff"
}
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#08253fff"
}
},
{
"featureType": "building",
"elementType": "geometry",
"stylers": {
"color": "#022338"
}
},
{
"featureType": "green",
"elementType": "geometry",
"stylers": {
"color": "#062032"
}
},
{
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#6290b7ff"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": {
"color": "#2da0c6",
"visibility": "on"
}
},
{
"featureType": "boundary",
"elementType": "geometry.stroke",
"stylers": {
"color": "#08253fff"
}
}
]
}
}
option = {
bmap: bmap,
backgroundColor: 'transparent',
geo: {
map: 'bmap',
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'bmap',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
itemStyle: {
/*color: "#dd3a03"*/
color: "#e3e5e9"
},
data: provinceData.map(function(dataItem) {
return {
name: dataItem.name,
value: geoCoordMap[dataItem.name].concat(80)
};
})
},
{
type: 'scatter',
coordinateSystem: 'bmap',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
symbolSize: 8,
itemStyle: {
color: "#dd3a03"
},
hoverAnimation: false,
emphasis: {
itemStyle: {
color: "#fa0500",
shadowBlur: 15,
shadowColor: '#fa0605'
}
},
large: true,
data: redData.map(function(dataItem) {
return {
name: dataItem.TERMINALID,
value: [dataItem.LNG, dataItem.LAT, 80]
};
})
}
]
};
截图如下
