将 GeoTiff 文件渲染为地图文件上的叠加层

Question

我正在使用 OpenLayers 渲染一个 GeoTiff 文件，现在我想显示一个 ariel/satellite 地图作为它的 baseLayer。问题是由于某种原因我只能渲染一层，

这是我的代码

    const baseSource = new TileJSON({
      url: `https://api.maptiler.com/maps/hybrid/tiles.json?key=${key}`, 
      tileSize: 512,
      crossOrigin: "anonymous",
    });

    const baseLayer = new TileLayer({
      source: baseSource,
    });

    const source = new GeoTIFF({ sources: [{ url: props.src }] });
    const layer = new TileLayer({ source });


    const map = new Map({
      target: mapRef.current,
      layers: [baseLayer, layer],
      view: source.getView().then((viewConfig) => {
        viewConfig.showFullExtent = true;
        viewConfig.zoom = 0;
        viewConfig.center = [0, 0];

        return viewConfig;
      }),
    });

    map.on("loadstart", function () {
      if (spinRef.current?.style) spinRef.current.style.display = "inline-bock";
    });
    map.on("loadend", function () {
      if (spinRef.current?.style) spinRef.current.style.display = "none";
    });

这只渲染 geoTiff 文件， 当我这样做

    const baseSource = new TileJSON({
      url: `https://api.maptiler.com/maps/hybrid/tiles.json?key=${key}`, 
      tileSize: 512,
      crossOrigin: "anonymous",
    });

    const baseLayer = new TileLayer({
      source: baseSource,
    });

    const source = new GeoTIFF({ sources: [{ url: props.src }] });
    const layer = new TileLayer({ source });


    const view = new View({
      constrainResolution: true,
      center: fromLonLat([5.0703139, 52.2250361]), 
      zoom: 14, 
    });
    const map = new Map({
      target: mapRef.current,
      layers: [baseLayer, layer],
      view,
    });
    layer.setOpacity(1);

    map.on("loadstart", function () {
      if (spinRef.current?.style) spinRef.current.style.display = "inline-bock";
    });
    map.on("loadend", function () {
      if (spinRef.current?.style) spinRef.current.style.display = "none";
    });

这只渲染 baseLayer

Answer 1

来自@mike评论的例子

import GeoTIFF from 'ol/source/GeoTIFF.js';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import proj4 from 'proj4';
import {fromEPSGCode, register} from 'ol/proj/proj4.js';
import {getCenter, getHeight, getWidth} from 'ol/extent.js';
import {transformExtent} from 'ol/proj.js';

register(proj4);

const sourceNames = ['B04', 'B03', 'B02', 'B08'];
const source = new GeoTIFF({
  sources: sourceNames.map(function (name) {
    return {
      url: `https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/31/T/GJ/2022/7/S2A_31TGJ_20220703_0_L2A/${name}.tif`,
      max: 3000,
    };
  }),
});

const layer = new TileLayer({
  source: source,
});

const map = new Map({
  target: 'map',
  layers: [new TileLayer({source: new OSM()}), layer],
  view: source.getView().then((viewConfig) => {
    return fromEPSGCode(viewConfig.projection.getCode()).then(() => {
      const projection = 'EPSG:3857';
      const extent = transformExtent(
        viewConfig.extent,
        viewConfig.projection,
        projection
      );
      const size = map.getSize();
      return {
        projection: projection,
        center: getCenter(extent),
        resolution: Math.max(
          getWidth(extent) / size[0],
          getHeight(extent) / size[1]
        ),
      };
    });
  }),
});