首页 前端知识 echarts地图移动缩放卡顿问题

echarts地图移动缩放卡顿问题

2024-06-06 00:06:56 前端知识 前端哥 875 444 我要收藏

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'
     }
   ]
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10997.html
标签
评论
发布的文章

js 指定光标位置

2024-06-10 23:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!