使用 OpenLayers WebGL 渲染托管的 GeoTIFF 文件未正确可视化
Rendering hosted GeoTIFF file using OpenLayers WebGL not visualized properly
在 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;
我的问题是实现如下目标:
更多信息
我要渲染的图像是一个 .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
interpolate
是 GeoTIFF 构造函数的一个选项,不适用于个别来源
const source = new GeoTIFF({
sources: [
{
url: "http://../my_image.tif";
},
],
interpolate: false,
normalize: false,
});
在 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;
我的问题是实现如下目标:
更多信息
我要渲染的图像是一个 .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
interpolate
是 GeoTIFF 构造函数的一个选项,不适用于个别来源
const source = new GeoTIFF({
sources: [
{
url: "http://../my_image.tif";
},
],
interpolate: false,
normalize: false,
});