在 OpenLayers 6 中结合 ImageLayer 和 VectorLayer

Question

我正在使用OpenLayers 6.3.1，试图在一个简单的静态ImageLayer 之上创建一个带有一些基本形状的VectorLayer。

基本上，我试图将this example 中的形状放在this static image example 之上。

当我添加视图的自定义投影设置时，我可以看到我的图像。当我删除它时（让它默认为 'EPSG:3857'），我可以看到形状。

我尝试添加具有不同坐标的形状，但无法让它们显示在我的图像顶部！

这是我的初始化代码。我留下了一些 cmets，这样你就可以看到我试图弄乱的一些东西。谁能帮我设置一下？我没有使用此应用程序的任何地图或地图数据。这是一个图像标注系统，我只想处理简单的笛卡尔坐标。

const thumbnail = this.asset.getThumbnail();
const img = this.asset.getImage();

const extent = [
    0, 0,
    img.width, img.height
];

const projection = new Projection({
    code: 'Flatland:1',
    units: 'pixels',
    extent: extent
});

const styles = [
    new Style({
        stroke: new Stroke({
            color: 'blue',
            width: 3
        }),
        fill: new Fill({
            color: 'rgba(0, 0, 255, 0.1)'
        })
    }),
    new Style({
        image: new CircleStyle({
            radius: 5,
            fill: new Fill({
                color: 'orange'
            })
        }),
        geometry: function(feature) {
            var coordinates = feature.getGeometry().getCoordinates()[0];
            return new MultiPoint(coordinates);
        }
    })
];

const geojsonObject = {
    type: 'FeatureCollection',
    crs: {
        type: 'name',
        properties: {
            //name: 'EPSG:3857'                                                                                                                                           
            name: 'Flatland:1'
        }
    },
    features: [
        {
            type: 'Feature',
            geometry: {
                type: 'Polygon',
                coordinates: [[
                    [-5e6, 6e6],
                    [-5e6, 8e6],
                    [-3e6, 8e6],
                    [-3e6, 6e6],
                    [-5e6, 6e6]
                ]]
            }
        },
        {
            type: 'Feature',
            geometry: {
                type: 'Polygon',
                coordinates: [[
                    [63, 19.5],
                    [63, 5.5],
                    [28, 5.5],
                    [30, 19.5],
                    [63, 19.5],
                    [75, 22.5]
                ]]
            }
        }
    ]
};

this.map = new Map({
    target: `map-${this.props.asset.id}`,
    controls: [],
    interactions: [],
    layers: [
        new ImageLayer({
            source: new Static({
                url: thumbnail,
                projection: projection,
                imageExtent: extent
            })
        }),
        new VectorLayer({
            source: new VectorSource({
                features: (
                    new GeoJSON(/*{dataProjection: 'Flatland:1'}*/)
                ).readFeatures(
                    geojsonObject
                    /*, {dataProjection: 'Flatland:1',                                                                                                                    
                      featureProjection: 'Flatland:1'                                                                                                                     
                      }*/
                )
            }),
            style: styles
        })
    ],
    view: new View({
        projection: projection,
        center: getCenter(extent),
        //center: [0, 3000000],                                                                                                                                           
        //center: [0, 300],                                                                                                                                               
        zoom: 1
    })
});

Answer 1

您的图像必须经过地理参考才能在地图投影中显示。

如果您使用像素坐标的自定义投影，那么您的矢量特征也必须使用像素坐标。

您的第一个功能使用 EPSG:3857 坐标，但 OpenLayers 将它们视为像素坐标，因为您已经使用像素坐标定义了自定义投影。因此，您不会看到此功能，因为它超出了您的范围。

您的第二个要素的坐标似乎是地理坐标，但这些数字足够低，可以在范围内显示为像素坐标。 （但也许它们没有显示在您期望它们出现的位置。） 您的第二个特征显示在图像的左下角，使用以下代码：

https://i.stack.imgur.com/80RZs.jpg

var extent = [0, 0, 1024, 968];
    var projection = new ol.proj.Projection({
      code: 'Flatland:1',
      units: 'pixels',
      extent: extent
    });

    var view=new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 1
    });

    const styles = [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 3
            }),
            fill: new ol.style.Fill({
                color: 'rgba(0, 0, 255, 0.1)'
            })
        }),
        new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: 'orange'
                })
            }),
            geometry: function(feature) {
                var coordinates = feature.getGeometry().getCoordinates()[0];
                return new ol.geom.MultiPoint(coordinates);
            }
        })
    ];

    const geojsonObject = {
        type: 'FeatureCollection',
        crs: {
            type: 'name',
            properties: {                                                                                                                                          
                name: 'Flatland:1'
            }
        },
        features: [
            /*{
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [[
                        [-5e6, 6e6],
                        [-5e6, 8e6],
                        [-3e6, 8e6],
                        [-3e6, 6e6],
                        [-5e6, 6e6]
                    ]]
                }
            },*/
            {
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [[
                        [63, 19.5],
                        [63, 5.5],
                        [28, 5.5],
                        [30, 19.5],
                        [63, 19.5],
                        [75, 22.5]
                    ]]
                }
            }
        ]
    };

    const map=new ol.Map({
        view: view,
        layers: [
            new ol.layer.Image({
              source: new ol.source.ImageStatic({
                attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
                url: 'https://imgs.xkcd.com/comics/online_communities.png',
                projection: projection,
                imageExtent: extent
              })
            }),
            new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: (
                        new ol.format.GeoJSON(/*{dataProjection: 'Flatland:1'}*/)
                    ).readFeatures(
                        geojsonObject
                        /*, {dataProjection: 'Flatland:1',                                                                                                                    
                          featureProjection: 'Flatland:1'                                                                                                                     
                          }*/
                    )
                }),
                style: styles
            })
        ],
        target: "map"
    })