openlayer实现上万个点的分屏实时组装

一、设计思路

初始加载上万条点位数据-----获取当前屏幕的四至-------组装屏幕内可视的点位

二、图层配置代码

point1: {
  layerCode: 'point1',
  isRLayerPanel: true,
  sourceType: 'Vector',
  title: '图标点',
  url: '/static/geojson/station1.json',
  dataPath: 'data/stationList/list',
  dataLongitudeField: 'longitude',
  dataLatitudeField: 'latitude',
  dataIdField: 'stationId',
  geoType: 'point',
  labelField: 'aqi',
  groupLayers:[],
  outRes:[],
  isGroupLayer: true,
  isProcess:false,
  maxZoom: Infinity,
  minZoom: 7,
  wrapX: false,
  opacity: 1,
  location: {longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834},
  visible: true
}

三、关键代码实现

export function refreshCv(res, map, layersInfo, layerCode){
  if (layersInfo[layerCode].geoType === 'point') {
    let count = 0
    let cMExent = map.getView().calculateExtent(map.getSize())
    for(let i=0;i<res.length;i++){
      if(res[i].longitude<cMExent[0]||res[i].longitude>cMExent[2]||res[i].latitude<cMExent[1]||res[i].latitude>cMExent[3]){
        continue
      }
      let lc=layerCode + generateUUID()
      if(count >= layersInfo[layerCode].groupLayers.length) {
        let ly=new VectorLayer({
          source: new VectorSource({
            wrapX: layersInfo[layerCode].wrapX
          }),
          opacity: layersInfo[layerCode].opacity || 1,
          maxZoom: layersInfo[layerCode].maxZoom || Infinity,
          minZoom: layersInfo[layerCode].minZoom || -Infinity,
          title: layersInfo[layerCode].title,
          code: lc,
          group:layerCode,
          visible: layersInfo[layerCode].visible || false
        })
        map.addLayer(ly)
        if (layersInfo[layerCode].isModify) {
          layersInfo[layerCode]["modifyInteraction"] = new Modify({source: getLayerByCode(map,layerCode).getSource()});
          map.addInteraction(layersInfo[layerCode]["modifyInteraction"])
        }
        layersInfo[layerCode].groupLayers.push(getLayerByCode(map,lc))
      }
      lc=layersInfo[layerCode].groupLayers[count].values_.code
      let lrs={}
      lrs[lc]=LayersRenderSet[layerCode]
      let lys={}
      lys[lc]=layersInfo[layerCode]
      layersInfo[layerCode].groupLayers[count].getSource().clear()
      commonCreatePoint(map, lys, lc, lrs, [res[i]], layersInfo[layerCode].dataLongitudeField, layersInfo[layerCode].dataLatitudeField,layersInfo[layerCode].dataIdField)
      count++
    }
  }//技术合作交流qq:2401315930
  console.log('drawrend',new Date().toString())
  layersInfo[layerCode].isProcess = false
  layersInfo[layerCode].outRes = res
}

四、地图鼠标移动新区域绑定刷代码

icolMap.on('moveend', function (evt) {
  //缩放等级控制解析器

let laysers = Object.keys(layersInfo); for (let i = 0; i < laysers.length; i++) { let cZoom = icolMap.getView().getZoom() if (layersInfo[laysers[i]].sourceType === "Overlay" && layersInfo[laysers[i]].visible == true ) { if(layersInfo[laysers[i]].minZoom < cZoom && cZoom <= layersInfo[laysers[i]].maxZoom){ _this.setLayerVisibleOverly(laysers[i],true) }else { _this.setLayerVisibleOverly(laysers[i],false) } } if(layersInfo[laysers[i]].isGroupLayer||false == true) { if(layersInfo[laysers[i]].minZoom < cZoom && cZoom <= layersInfo[laysers[i]].maxZoom && layersInfo[laysers[i]].outRes.length>0) { refreshCv(layersInfo.point1.outRes,icolMap,layersInfo,laysers[i]) } } } // var pixel = icolMap.getPixelFromCoordinate([115.783878,34.308761]) })

五、实现效果

六、拖动效果