openlayers 添加视口范围内的矢量图层, 删除视口外的图层

openlayers 添加视口范围内的矢量图层, 删除视口外的图层

import GeoJSON from 'ol/format/GeoJSON';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as SourceVec, Cluster, OSM, TileArcGISRest, TileWMS } from 'ol/source';
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from 'ol/style';
import 'ol/ol.css';
import { createEmpty, extend, containsExtent, intersects } from 'ol/extent';


  /**
   * 添加视口范围内的矢量图层, 删除视口外的图层
   * @param {*} map
   * @param {*} dataList 数据列表 格式: [{id: '',layerName: '', geojson: null, }]
   */
  addVectorLayersFollowingViewport(map, dataList) {
    let inlist = [];        // 在视口内的图层
    let addList = [];       // 需要新加的图层
    let outNamelist = [];   // 在视口外的图层

    // 获取当前视口范围
    const viewportExtent = map.getView().calculateExtent(map.getSize());
    // 所有图层
    var layers = map.getLayers().getArray();

    // 找出视口内/外的图层
    for (let i = 0; i < dataList.length; i++) {
      const element = dataList[i];
      if (element.geojson) {
        const format = new GeoJSON();
        const features = format.readFeatures(element.geojson, {
          featureProjection: map.getView().getProjection(),
        });
        const totalExtent = createEmpty();
        features.forEach((feature) => {
          extend(totalExtent, feature.getGeometry().getExtent());
        });
        const isInViewport = intersects(viewportExtent, totalExtent);
        if (isInViewport) {
          inlist.push(element);
        } else {
          outNamelist.push(element.layerName);
        }
      }
    }

    // 找出地图上现在不存在, 需要新加的图层
    for (let i = 0; i < inlist.length; i++) {
      const element = inlist[i];
      for (let j = 0; j < layers.length; j++) {
        const layer = layers[j];
        if (layer.get('name') != element.layerName) {
            addList.push(element);
        }
      }
    }

    // 添加图层
    if (addList.length > 0) {
        addList.forEach((element) => {
        if (element.geojson) {
            let vectSec = new SourceVec({
              features: new GeoJSON({
                featureProjection: 'EPSG:4326',
              }).readFeatures(element.geojson),
              format: new GeoJSON(),
              wrapX: true,
            });

            let layer = new VectorLayer({
              source: vectSec,
              name: element.layerName,
              style: function (feature, resolution) {
                return new Style({
                  stroke: new Stroke({
                    color: '#ff0000',
                    width: 3,
                  }),
                  fill: new Fill({
                    color: '#ff0000',
                  }),
                  text: new Text({
                    font: '12px 微软雅黑',
                    placement: 'line',
                    text: feature.get('NAME'),
                    fill: new Fill({
                      color: '#fff',
                    }),
                    stroke: new Stroke({
                      color: '#ff0000',
                      width: 3,
                    }),
                    overflow: true, 
                  }),
                });
              },
            });
            map.addLayer(layer);
        } 
      });
    }

    // 删除视口外的图层
    if (outNamelist.length > 0) {
      for (let i = 0; i < layers.length; i++) {
        const layer = layers[i];
        if (outNamelist.includes(layer.get('name'))) {
          map.removeLayer(layer);
        }
      }
    }
  }