代码编织梦想

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', ()=>{})//移除这个监听
      });

参考资料

https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/

https://docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Sakura1998gis/article/details/130895212