adopt-mini-h5/src/utils/ol-map/VTLayer.js

import Layer from 'ol/layer/VectorTile';
import Vector from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Source from 'ol/source/VectorTile';
import Common from './Common';
import MVT from 'ol/format/MVT';
import {createXYZ} from 'ol/tilegrid'
import KBaseObject from './KBaseObject'
/**
 * @description KMap.VectorLayer 矢量图层
 */
class VTLayer extends KBaseObject{
  /**
   * @param {string} name 图层名称
   * @param {string} zIndex 图层层级
  */
  constructor(url,options,zIndex,callback,mapInstance = null){
    super(mapInstance)
    const vm = this;
    let styleFunVT = options.styleFunVT;
    let styleFunV = options.styleFunV;
    let funThis = options.funThis;
    var source = new Source({
        format: new MVT(),
        url: url,
        tileGrid: createXYZ({
            tileSize: options.tileSize || 4096 // 瓦片大小
        }),
        tileLoadFunction:(tile, url)=>{
            tile.setLoader(function(extent, resolution, projection) {
                fetch(url).then(function(response) {
                    response.arrayBuffer().then(function(data) {
                        const format = tile.getFormat();
                        const features = format.readFeatures(data, {
                            extent: extent,
                            featureProjection: projection
                        });
                        tile.setFeatures(features);
                        callback(features);
                    });
                });
            });
        }
    });

    let ShowLevel = Common.ShowLevel
    let minZoom = ShowLevel[0]
    let maxZoom = ShowLevel[1]
    if(options && options.minZoom){
      minZoom = options.minZoom
    }
    if(options && options.maxZoom){
      maxZoom = options.maxZoom
    }
    let layer = new Layer({
      source: source,
      zIndex: zIndex,
      minZoom: minZoom,
      maxZoom: maxZoom,
      style:(evt)=>{
        return styleFunVT.call(funThis,evt);
      }
    })
    this.layer = layer
    this.source = source,
    this.vLayer = this.initVectorLayer(styleFunV,funThis,minZoom,maxZoom)
  }
  setMaxZoom(maxZoom){
    this.layer.setMaxZoom(maxZoom);
  }
  setMinZoom(minZoom){
    this.layer.setMinZoom(minZoom);
  }
  initVectorLayer(styleFunV,funThis,minZoom,maxZoom){
    let layer = new Vector({
        source:new VectorSource({}),
        style:(evt)=>{
            return styleFunV.call(funThis,evt);
        },
        minZoom: minZoom,
        maxZoom: maxZoom,
        zIndex:101
    })
    return layer;
  }
}

export default VTLayer