OpenLayers 7中GeoTIFF图层上多边形无法显示问题求助

我使用Vue.js开发，尝试在OpenLayers 7的GeoTIFF图层上绘制多边形。单独在OSM图层显示多边形或GeoTIFF图像均正常，但两者结合时多边形无法显示。该GeoTIFF图像的投影为EPSG:4326，坐标采用经纬度格式，请问无法显示的原因是什么？

相关代码如下：

async function addImage() {
    const source = await loadSource();
    const sourceView = await source.getView()
    const projection = sourceView.projection
    const epsgCode = projection.code_
 
    await fromEPSGCode(epsgCode);

    const newView = source.getView()

    const imageLayer = new WebGLTile({
        source: source,
    });

    map.value.addLayer(imageLayer)
    map.value.setView(newView);
}

function addPolygon() {
    // doesn't work with fromLonLat(coord, 'EPSG:4326')
    const openLayersCoords = polygonCoords.map(coord => fromLonLat(coord));
    // doesn't work with the polygonCoords as well
    const polygonGeometry = new Polygon([openLayersCoords]);
    const transformedGeometry = polygonGeometry.clone().transform('EPSG:3857', 'EPSG:4326')

    const polygonFeature = new Feature({
        type: "Polygon",
        geometry: transformedGeometry,
    });

    const vectorSource = new VectorSource({
        features: [polygonFeature],
    });

    const vectorLayer = new VectorLayer({
        source: vectorSource,
        style: new Style({
            stroke: new Stroke({
                color: 'red',
                width: 3,
            }),
        }),
    });

    map.value.addLayer(vectorLayer);
    map.value.getView().fit(vectorSource.getExtent(), {
        padding: [50, 50, 50, 50],
        maxZoom: 15,
    });
}

register(proj4);
const map = ref(null); // map object

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

async function loadSource() {
    const source = new GeoTIFF({
        sources: [
            {
                url: 'link-to-image',
            },
        ],
    });
    return source;
}

onMounted(async () => {
    map.value = new Map({
        target: "map",
        layers: [OSMlayer],
        view: new View({
            center: fromLonLat([10, 51]),
            zoom: 8,
        }),
    });

原因分析 #

• 投影不匹配：添加GeoTIFF后，地图视图被切换到了EPSG:4326，但你的多边形坐标转换逻辑混乱：
  1. fromLonLat(coord)默认是将EPSG:4326的经纬度转换为EPSG:3857（OSM的默认投影）
  2. 随后你又调用transform('EPSG:3857', 'EPSG:4326')把坐标转回去，如果polygonCoords本身就是EPSG:4326的经纬度，这两步操作等于做了无效转换，甚至可能因为精度问题导致坐标偏移。
• 视图适配逻辑失效：如果坐标转换错误，vectorSource.getExtent()得到的范围可能不在当前EPSG:4326视图的有效范围内，调用fit后地图会定位到错误区域，自然看不到多边形。

解决方案 #

假设polygonCoords本身就是EPSG:4326的经纬度坐标，直接创建多边形即可，无需多余转换，确保多边形的投影与当前地图视图一致：

修改后的addPolygon函数：

function addPolygon() {
    // 直接使用原始经纬度坐标（EPSG:4326）创建多边形
    const polygonGeometry = new Polygon([polygonCoords]);

    const polygonFeature = new Feature({
        type: "Polygon",
        geometry: polygonGeometry,
    });

    const vectorSource = new VectorSource({
        features: [polygonFeature],
    });

    const vectorLayer = new VectorLayer({
        source: vectorSource,
        style: new Style({
            stroke: new Stroke({
                color: 'red',
                width: 3,
            }),
        }),
    });

    map.value.addLayer(vectorLayer);
    map.value.getView().fit(vectorSource.getExtent(), {
        padding: [50, 50, 50, 50],
        maxZoom: 15,
    });
}

如果polygonCoords是EPSG:3857的坐标，则需要转换为EPSG:4326：

function addPolygon() {
    const openLayersCoords = polygonCoords.map(coord => transform(coord, 'EPSG:3857', 'EPSG:4326'));
    const polygonGeometry = new Polygon([openLayersCoords]);

    // 后续代码不变...
}

关键原则：确保多边形的几何坐标投影与当前地图视图的投影完全一致。

内容的提问来源于stack exchange，提问作者Taraman