贴个群号
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', ()=>{})//移除这个监听
});
参考资料
https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/
https://docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/