vue openlayers地图加载大量点位时优化如果一次性加载上万个带标题的点位,会造成地图卡顿, 优化方法是只加载当前视口内的点位,且只显示屏幕中心的点位的标题, 每次拖动地图只加载视口内的点位工具类OlViewportPointUtil.jsimportVectorLayerfromol/layer/Vector;importVectorSourcefromol/source/Vector;importPointfromol/geom/Point;importFeaturefromol/Feature;importStylefromol/style/Style;importIconfromol/style/Icon;importTextfromol/style/Text;importFillfromol/style/Fill;importStrokefromol/style/Stroke;import{containsCoordinate,intersects}fromol/extent;import{fromLonLat}fromol/proj;/** * 显示可见范围内的点位 */exportdefaultclassOlViewportPointUtil{constructor(map,options{}){this.mapmap;this.allPoints[];this.vectorSourcenull;this.vectorLayernull;this.options{style:this.getDefaultStyle.bind(this),debounceTime:100,minZoom:3,...options,};this.initLayer();this.bindMapEvent();}initLayer(){this.vectorSourcenewVectorSource();this.vectorLayernewVectorLayer({source:this.vectorSource,zIndex:999,declutter:true,declutterMode:label,style:this.options.style,});this.map.addLayer(this.vectorLayer);}getDefaultStyle(feature,resolution){// 最小缩放等级判断constcurrentZoomthis.map.getView().getZoom();if(currentZoomthis.options.minZoom){returnnull;}// 文字显示判断中心区域才显示constshowLabelgetIsShowFeatureText(this.map,feature);constpointDatafeature.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.length0)return;this.allPointspoints;this.refreshView();}refreshView(){this.vectorSource.clear();constextentthis.map.getView().calculateExtent(this.map.getSize());constfeatures[];for(constpointofthis.allPoints){constjdparseFloat(point.jd);constwdparseFloat(point.wd);// const coord fromLonLat([jd, wd]);constcoord[jd,wd];if(containsCoordinate(extent,coord)){constfeaturenewFeature({geometry:newPoint(coord),data:point,// 把数据存到 feature 里});features.push(feature);}}console.log(当前视口内点位数量,features.length);this.vectorSource.addFeatures(features);}bindMapEvent(){lettimernull;this.map.on(moveend,(){clearTimeout(timer);timersetTimeout((){this.refreshView();},this.options.debounceTime);});}clear(){this.vectorSource.clear();this.allPoints[];}destroy(){this.clear();this.map.removeLayer(this.vectorLayer);}}/** * 只显示屏幕中心附近的名称 */functiongetIsShowFeatureText(map,feature){constviewmap.getView();constmapSizemap.getSize();if(!mapSize)returnfalse;constviewExtentview.calculateExtent(mapSize);const[minx,miny,maxx,maxy]viewExtent;constwmaxx-minx;consthmaxy-miny;constcenterBuffer0.3;constcenterExtent[minxw*centerBuffer,minyh*centerBuffer,maxx-w*centerBuffer,maxy-h*centerBuffer];constgeomfeature.getGeometry();returngeomintersects(geom.getExtent(),centerExtent);}使用importOlViewportPointUtilfrom./olViewportPointUtil.js;constlist[{name:点位1,jd:经度,wd:纬度},......]this.pointUtilnewOlViewportPointUtil(this.map);this.pointUtil.setDataSource(list);