echarts地图移动缩放卡顿问题

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 &amp;&amp; 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'
     }
   ]