Newer
Older
HuangJiPC / src / utils / gis / mvtImageProvider.js
@zhangdeliang zhangdeliang on 21 Jun 5 KB update
const o = document.createElement('canvas');
let MVTImageryProvider = class {
  mapboxRenderer;
  ready;
  readyPromise;
  rectangle;
  tileSize;
  tileWidth;
  tileHeight;
  maximumLevel;
  minimumLevel;
  tileDiscardPolicy;
  Credit;
  proxy;
  hasAlphaChannel;
  sourceFilter;
  tilingScheme;
  _destroyed = !1;
  _error;
  _style;
  _accessToken;
  _enablePickFeatures;
  constructor(t) {
    (this.ready = !1),
      (this.tilingScheme = t.tilingScheme ?? new Cesium.WebMercatorTilingScheme()),
      (this.rectangle = this.tilingScheme.rectangle),
      (this.tileSize = this.tileWidth = this.tileHeight = t.tileSize || 512),
      (this.maximumLevel = t.maximumLevel ?? 19),
      (this.minimumLevel = t.minimumLevel ?? 0),
      (this.tileDiscardPolicy = void 0),
      (this._error = new Cesium.Event()),
      (this.Credit = new Cesium.Credit(t.Credit || '', !1)),
      (this.proxy = new Cesium.DefaultProxy('')),
      (this.hasAlphaChannel = t.hasAlphaChannel ?? !0),
      (this.sourceFilter = t.sourceFilter),
      (this._accessToken = t.mapboxAccessToken),
      (this._enablePickFeatures = t.enablePickFeatures ?? !0),
      (this.readyPromise = this._preLoad(t.style)
        .then(
          (e) => (
            (this._style = e),
            (this.mapboxRenderer = new window['mvt-basic-render'].BasicRenderer({
              style: e,
              canvas: o,
              token: this._accessToken,
              transformRequest: t.transformRequest,
            })),
            t.showCanvas && this.mapboxRenderer.showCanvasForDebug(),
            this.mapboxRenderer
          )
        )
        .then((e) => {
          e._style.loadedPromise.then(() => {
            this.ready = !0;
          });
        }));
  }
  get style() {
    return this._style;
  }
  get isDestroyed() {
    return this._destroyed;
  }
  get errorEvent() {
    return this._error;
  }
  _preLoad(e) {
    let t = e;
    return (
      (e =
        'string' == typeof e
          ? new Cesium.Resource({
              url: e,
              queryParameters: {
                access_token: this._accessToken,
              },
            })
          : e) instanceof Cesium.Resource &&
        (e.url.startsWith('mapbox://') && (e.url = e.url.replace('mapbox://', 'https://api.mapbox.com/')),
        this._accessToken &&
          e.appendQueryParameters({
            access_token: this._accessToken,
          }),
        (t = e.fetchJson())),
      Promise.resolve(t).catch((e) => {
        throw (this._error.raiseCesium.Event(e), e);
      })
    );
  }
  _createTile() {
    var e = document.createElement('canvas');
    return (e.width = this.tileSize), (e.height = this.tileSize), (e.style.imageRendering = 'pixelated'), e;
  }
  _resetTileCache() {
    Object.values(this.mapboxRenderer._style.sourceCaches).forEach((e) => e._tileCache.reset());
  }
  _getTilesSpec(e, a) {
    var { x: l, y: i, level: s } = e,
      r = this.tileSize,
      n = [],
      p = this.tilingScheme.getNumberOfXTilesAtLevel(s) - 1,
      c = this.tilingScheme.getNumberOfYTilesAtLevel(s) - 1;
    for (let o = -1; o <= 1; o++) {
      let t = l + o;
      (t = t < 0 ? p : t) > p && (t = 0);
      for (let e = -1; e <= 1; e++) {
        var m = i + e;
        m < 0 ||
          c < m ||
          n.push({
            source: a,
            z: s,
            x: t,
            y: m,
            left: 0 + o * r,
            top: 0 + e * r,
            size: r,
          });
      }
    }
    return n;
  }
  requestImage(o, a, l, i = !0) {
    if (!(l < this.minimumLevel || l > this.maximumLevel)) {
      this.mapboxRenderer.filterForZoom(l);
      const s = this.mapboxRenderer.getVisibleSources(l).reduce(
        (e, t) =>
          e.concat(
            this._getTilesSpec(
              {
                x: o,
                y: a,
                level: l,
              },
              t
            )
          ),
        []
      );
      return new Promise((t, o) => {
        const a = this._createTile();
        var e = a.getContext('2d');
        e && (e.globalCompositeOperation = 'copy');
        const l = this.mapboxRenderer.renderTiles(
          e,
          {
            srcLeft: 0,
            srcTop: 0,
            width: this.tileSize,
            height: this.tileSize,
            destLeft: 0,
            destTop: 0,
          },
          s,
          (e) => {
            'string' != typeof e || e.endsWith('tiles not available')
              ? i
                ? ((l.consumer.ctx = null), t(a), this.mapboxRenderer.releaseRender(l), this._resetTileCache())
                : t(l)
              : o(void 0);
          }
        );
      });
    }
  }
  pickFeatures(e, t, i, s, r) {
    if (this._enablePickFeatures)
      return this.requestImage(e, t, i, !1)?.then((e) => {
        var t = this.mapboxRenderer.getVisibleSources(i),
          t = this.sourceFilter ? this.sourceFilter(t) : t;
        const o = [],
          a = Cesium.Math.toDegrees(s),
          l = Cesium.Math.toDegrees(r);
        return (
          t.forEach((e) => {
            var t = new Cesium.ImageryLayerFeatureInfo(),
              e =
                ((t.data = this.mapboxRenderer.queryRenderedFeatures({
                  source: e,
                  renderedZoom: i,
                  lng: a,
                  lat: l,
                  tileZ: i,
                })),
                Object.keys(t.data)[0]),
              e = ((t.name = e), t.data[e]);
            e && (t.configureDescriptionFromProperties(1 === e?.length ? e[0] : e), o.push(t));
          }),
          (e.consumer.ctx = void 0),
          this.mapboxRenderer.releaseRender(e),
          this._resetTileCache(),
          o.length ? o : void 0
        );
      });
  }
  destroy() {
    this.mapboxRenderer._cancelAllPendingRenders(), this._resetTileCache(), (this._destroyed = !0);
  }
};
export default MVTImageryProvider;