当前位置：首页 > news >正文

vue openlayers地图加载大量点位时优化

news 2026/4/18 6:03:57

如果一次性加载上万个带标题的点位,会造成地图卡顿, 优化方法是只加载当前视口内的点位,且只显示屏幕中心的点位的标题, 每次拖动地图只加载视口内的点位

工具类OlViewportPointUtil.js

importVectorLayerfrom'ol/layer/Vector';importVectorSourcefrom'ol/source/Vector';importPointfrom'ol/geom/Point';importFeaturefrom'ol/Feature';importStylefrom'ol/style/Style';importIconfrom'ol/style/Icon';importTextfrom'ol/style/Text';importFillfrom'ol/style/Fill';importStrokefrom'ol/style/Stroke';import{containsCoordinate,intersects}from'ol/extent';import{fromLonLat}from'ol/proj';/** * 显示可见范围内的点位 */exportdefaultclassOlViewportPointUtil{constructor(map,options={}){this.map=map;this.allPoints=[];this.vectorSource=null;this.vectorLayer=null;this.options={style:this.getDefaultStyle.bind(this),debounceTime:100,minZoom:3,...options,};this.initLayer();this.bindMapEvent();}initLayer(){this.vectorSource=newVectorSource();this.vectorLayer=newVectorLayer({source:this.vectorSource,zIndex:999,declutter:true,declutterMode:'label',style:this.options.style,});this.map.addLayer(this.vectorLayer);}getDefaultStyle(feature,resolution){// 最小缩放等级判断constcurrentZoom=this.map.getView().getZoom();if(currentZoom<this.options.minZoom){returnnull;}// 文字显示判断（中心区域才显示）constshowLabel=getIsShowFeatureText(this.map,feature);constpointData=feature.get('data');returnnewStyle({image:newIcon({src:require('../assets/点位图标.png'),scale:0.5,anchor:[0.5,1],}),text:showLabel?newText({text:pointData?.name||'',// 从 feature 里取标题font:'14px Microsoft YaHei',fill:newFill({color:'#ffffff'}),stroke:newStroke({color:'#1a5a96',width:2}),offsetY:-25,textAlign:'center',}):null,});}setDataSource(points=[]){if(!points||points.length===0)return;this.allPoints=points;this.refreshView();}refreshView(){this.vectorSource.clear();constextent=this.map.getView().calculateExtent(this.map.getSize());constfeatures=[];for(constpointofthis.allPoints){constjd=parseFloat(point.jd);constwd=parseFloat(point.wd);// const coord = fromLonLat([jd, wd]);constcoord=[jd,wd];if(containsCoordinate(extent,coord)){constfeature=newFeature({geometry:newPoint(coord),data:point,// 把数据存到 feature 里});features.push(feature);}}console.log('当前视口内点位数量：',features.length);this.vectorSource.addFeatures(features);}bindMapEvent(){lettimer=null;this.map.on('moveend',()=>{clearTimeout(timer);timer=setTimeout(()=>{this.refreshView();},this.options.debounceTime);});}clear(){this.vectorSource.clear();this.allPoints=[];}destroy(){this.clear();this.map.removeLayer(this.vectorLayer);}}/** * 只显示屏幕中心附近的名称 */functiongetIsShowFeatureText(map,feature){constview=map.getView();constmapSize=map.getSize();if(!mapSize)returnfalse;constviewExtent=view.calculateExtent(mapSize);const[minx,miny,maxx,maxy]=viewExtent;constw=maxx-minx;consth=maxy-miny;constcenterBuffer=0.3;constcenterExtent=[minx+w*centerBuffer,miny+h*centerBuffer,maxx-w*centerBuffer,maxy-h*centerBuffer];constgeom=feature.getGeometry();returngeom&&intersects(geom.getExtent(),centerExtent);}

使用

importOlViewportPointUtilfrom'./olViewportPointUtil.js';constlist=[{name:'点位1',jd:'经度',wd:'纬度'},......]this.pointUtil=newOlViewportPointUtil(this.map);this.pointUtil.setDataSource(list);