使用 OpenLayers WebGL 渲染托管 GeoTIFF 文件未正确可视化

Question

在 Web 地图应用程序中，我尝试使用 OpenLayers 6 将 GeoTIFF 文件渲染为 OSM 图层上的覆盖图层。该图层渲染在确切的位置，看起来很好。这是我的结果的屏幕截图：

但如果我放大，在某些区域我可以看到平滑（简化）的边缘，这不是我想要的：

这是我的代码：

import React, { useState, useEffect, useRef } from "react";
import "ol/ol.css";

import GeoTIFF from "ol/source/GeoTIFF";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/WebGLTile";

import OSMLayer from "./OSMLayer";
import { fromLonLat } from "ol/proj";

function App() {
  var mapObjectRef = useRef();
  var tifLayer = useRef();

  const pixelValue = [
    "case",
    ["<=", ["band", 1], 0.0],
    -1,
    ["between", ["band", 1], 0.0, 5.0],
    0,
    ["between", ["band", 1], 5.0, 6.0],
    1,
    ["between", ["band", 1], 6.0, 7.0],
    2,
    ["between", ["band", 1], 7.0, 8.0],
    3,
    ["between", ["band", 1], 8.0, 9.0],
    4,
    ["between", ["band", 1], 9.0, 10.0],
    5,
    6,
  ];

  useEffect(() => {
    const source = new GeoTIFF({
      sources: [
        {
          url: "http://../my_image.tif";
          interpolate: false,
        },
      ],
      normalize: false,
    });

    source.on("change", (e) => {
      mapObjectRef.current.addLayer(tifLayer.current);
    });

    tifLayer.current = new TileLayer({
      style: {
        color: [
          "case",
          ["==", pixelValue, -1],
          [0, 0, 0, 0],
          ["==", pixelValue, 0],
          "#FFFFFF",
          ["==", pixelValue, 1],
          [247, 37, 133, 1],
          ["==", pixelValue, 2],
          [181, 23, 158, 1],
          ["==", pixelValue, 3],
          [114, 9, 183, 1],
          ["==", pixelValue, 4],
          [86, 11, 173, 1],
          ["==", pixelValue, 5],
          [63, 55, 201, 1],
          ["==", pixelValue, 6],
          "#ff0000",
          "#0000ff",
        ],
      },
      source: source,
    });

    mapObjectRef.current = new Map({
      target: "map",
      layers: [OSMLayer()],
      view: new View({
        center: fromLonLat([lat, lng]),
        zoom: 15.5,
      }),
    });
  }, []);

  return (
    <div
      id="map"
      style={{ height: "100vh", width: "100%" }}/>
  );
}

export default App;

我的问题是实现如下目标：

更多信息

我尝试渲染的图像是 < code>.tif 文件并具有以下元数据（使用 gdal.Info()）：

Band 1 Block=161x12 Type=Float32, ColorInterp=Gray
  Min=5.000 Max=10.000 
  Minimum=5.000, Maximum=10.000, Mean=6.864, StdDev=1.788
  NoData Value=-3.39999995214436425e+38
  Metadata:
    STATISTICS_MAXIMUM=10
    STATISTICS_MEAN=6.8642607683353
    STATISTICS_MINIMUM=5
    STATISTICS_STDDEV=1.7880035940136

Answer 1

interpolate 是 GeoTIFF 构造函数的一个选项，不适用于单个源

const source = new GeoTIFF({
  sources: [
    {
      url: "http://../my_image.tif";
    },
  ],
  interpolate: false,
  normalize: false,
});