矢量瓦片 单个要素存储 openlayer ,cesium nginx 配置

1、矢量瓦片 openlayer

// 添加矢量图层
 let vectorSource = new VectorTileSource({
        format: new MVT({}),
        url: "tdly_v_3857/{z}/{x}/{y}.pbf",
   
    
      });

      let vectorLayer = new VectorTileLayer({
        source: vectorSource,
        wrapX: false,
       
        minZoom: 14,
        maxZoom: 17,
      });

 // 监听瓦片加载事件
      map.getLayers().forEach(layer => {
        const source = layer.getSource();
        if (source instanceof VectorTileSource) {
          source.on('tileloadend', event => {

            const features = event.tile.getFeatures(); // 获取瓦片中的要素
            features.forEach(feature => {
              that.addFeature(feature); // 将要素添加到集合
            });
          });

          source.on('tileunload', event => {
            const features = event.tile.getFeatures();
            features.forEach(feature => {
              that.removeFeature(feature); // 移除卸载的要素
            });
          });
        }
      });

2、nginx 配置跨域问题

添加跨域add_header 'Access-Control-Allow-Origin' '*';

    server {
        listen       8099;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
			add_header 'Access-Control-Allow-Origin' '*';
        }
}

3、cesium 单个要素存储

function loadFeature(feature: any,showFeature:any) {
  const element = getElement(feature);

  let features = elementMap[element];

  if (!Cesium.defined(features)) {
    features = [];
    elementMap[element] = features;
  }

  features.push(feature);

 
  feature.show = showFeature;
  if (hiddenElements.indexOf(element) > -1) {
    feature.show = false;
  }
}

function unloadFeature(feature: any) {
  unselectFeature(feature);
  const element = getElement(feature);
  const features = elementMap[element];
  const index = features.indexOf(feature);
  if (index > -1) {
    features.splice(index, 1);
  }
}

 var tilesetModel = await Cesium.Cesium3DTileset.fromUrl(url, {
      maximumScreenSpaceError: 20, //最大的屏幕空间误差
      //   maximumNumberOfLoadedTiles: 40000, //最大加载瓦片个数
      // // modelMatrix: m //形状矩阵

      baseScreenSpaceError: 1024,
      skipScreenSpaceErrorFactor: 16,
      skipLevels: 0,
      skipLevelOfDetail: false,

      preferLeaves: true,
      // immediatelyLoadDesiredLevelOfDetail: false,
      loadSiblings: true, // 如果为true则不会在已加载完模型后，自动从中心开始超清化模型
      cullWithChildrenBounds: true,
      cullRequestsWhileMoving: true,
      cullRequestsWhileMovingMultiplier: 1, // 值越小越能够更快的剔除
      preloadWhenHidden: true,

      // maximumMemoryUsage: 10240, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验
      progressiveResolutionHeightFraction: 1, // 数值偏于0能够让初始加载变得模糊
      dynamicScreenSpaceErrorDensity: 1, // 数值加大，能让周边加载变快
      dynamicScreenSpaceErrorFactor: 1, // 不知道起了什么作用没，反正放着吧先
      dynamicScreenSpaceError: true // 根据测试，有了这个后，会在真正的全屏加载完之后才清晰化房屋

    })


    tileset.tileLoad.addEventListener(function (tile: any) {
      that.processTileFeatures(tile, loadFeature,showFeature);
    });

    tileset.tileUnload.addEventListener(function (tile: any) {
      that.processTileFeatures(tile, unloadFeature,showFeature);
    });



  processTileFeatures(tile: any, callback: Function,showFeature:any) {
    const content = tile.content;
    const innerContents = content.innerContents;
    if (Cesium.defined(innerContents)) {
      const length = innerContents.length;
      for (let i = 0; i < length; ++i) {
        this.processContentFeatures(innerContents[i], callback,showFeature);
      }
    } else {
      this.processContentFeatures(content, callback,showFeature);
    }
  }



  processContentFeatures(content: any, callback: Function,showFeature:any) {
    const featuresLength = content.featuresLength;
    for (let i = 0; i < featuresLength; ++i) {
      const feature = content.getFeature(i);
      callback(feature,showFeature)
    }
  }