mapbox内存优化

有玉微凉，是为樱琅

已于 2024-01-15 17:48:17 修改

阅读量1.2k

点赞数 2

分类专栏： mapbox+leaflet 文章标签： mapbox webgis vue.js javascript 前端

于 2023-05-26 23:07:50 首次发布

本文链接：https://blog.csdn.net/Sakura1998gis/article/details/130895212

版权

mapbox+leaflet 专栏收录该内容

64 篇文章

订阅专栏

贴个群号

WebGIS学习交流群461555818，欢迎大家。

geojson数据源

删除无用属性源数据上就删干净，没用的就删了
小数点保留位数，尤其是经纬度，6位就可以，这个在geoserver上可以设置
利用url获取geoserver，一个十五万网格要素两个字段的geojson占磁盘40M，占内存400M，尽量别存在内存中
不用重复调用，存到indexedDB中

加载

尽量使用同一source，同一layer
参考上文

https://blog.csdn.net/Sakura1998gis/article/details/130718766?spm=1001.2014.3001.5501

渲染

表达式尽量简洁
能少些一些表达式就少写一些
fill-outline-color这个，能省则省

    {
        id: "MaxWDepth",
        name:'最大水深',
        source: "playLayer",
        type:'fill',
        popup:true,
        messageBox:true,
        filter:['>',["to-number",["get","MaxWDepth"]],0],
        // filter:['>',["to-number","{MaxWDepth}"],0],  //错误写法  得写get
        // filter:['>',["to-number","MaxWDepth"],0],  错误写法  得写get
        // filter:['>',["get","MaxWDepth"],0],   错误写法 属性不对,得写to-number
        // filter:['any', ['==',["to-number",["get","MaxWDepth"]],0],['>',["to-number",["get","MaxWDepth"]],1]],  成功写法  any是或运算  all是与运算
        paint: {
            'fill-opacity': 0.4,
            // 'fill-outline-opacity':0.4,
            'fill-color':["step",["to-number",["get","MaxWDepth"]],'rgb(179,204,255)',0.5,'rgb(128,153,255)',1,'rgb(89,128,255)',2,'rgb(38,115,242)',3,'rgb(0,77,204)'],
            // 'fill-outline-color':["step",["to-number",["get","MaxWDepth"]],'rgba(179,204,255,0.4)',0.5,'rgba(128,153,255,0.4)',1,'rgba(89,128,255,0.4)',2,'rgba(38,115,242,0.4)',3,'rgba(0,77,204,0.4)']
        },
        layout: {
            visibility: 'visible'
        },
    },

及时销毁

大数据不要隐藏，直接删除图层
地图组件关闭前，beforedestroy要销毁地图 map.remove()


    beforeDestroy () {
      //销毁事件总线
      Utils.$off('MAP_EVENTS.DRAGEND')
      Utils.$off('MAP_EVENTS.ZOOMEND')
      
      if(this.map.getSource('playLayer')){
        this.map.getSource('playLayer').setData({
          "type": "FeatureCollection",
          "features": []
        })
      }
      this.map.remove()
      //销毁地图
      this.map = null
      this.$store.commit('DESTROY_MAP', this.mapId)
    }

mapbox有bug，销毁地图前，大数据的geojson可以提前先手动清除source的数据
手动清除存在内存中的geojson
刷新页面不会经过beforedetroy，要手动监听刷新事件，同时销毁上面提到的部分

      window.addEventListener("beforeunload",(e)=> {
          //销毁事件总线
          Utils.$off('MAP_EVENTS.DRAGEND')
          Utils.$off('MAP_EVENTS.ZOOMEND')

          if(self.map.getSource('playLayer')){
            self.map.getSource('playLayer').setData({
              "type": "FeatureCollection",
              "features": []
            })
          }
          
          self.map.remove()
          //销毁地图
          self.map = null
          self.$store.commit('DESTROY_MAP', self.mapId)
          window.removeEventListener('beforeunload', ()=>{})//移除这个监听
      });