Объединение ImageLayer и VectorLayer в OpenLayers 6

Question

Я использую OpenLayers 6.3.1, пытаясь создать VectorLayer с некоторыми базовыми c формами поверх простого stati c ImageLayer.

В основном я пытаюсь поместить фигуры из этого примера поверх этого состояния c пример изображения .

Когда я добавить пользовательские настройки проекции вида, я вижу свое изображение. Когда я его удаляю (пусть по умолчанию это «EPSG: 3857»), я могу видеть фигуры.

Я пытался добавить фигуры с разными координатами, но не могу отобразить их сверху моего изображения!

Вот мой код инициализации. Я оставил некоторые комментарии, чтобы вы могли видеть некоторые вещи, с которыми я пытаюсь связываться. Может кто-нибудь помочь мне настроить это? Я не работаю с картами или картографическими данными для этого приложения. Это система аннотаций изображений, и я просто хочу иметь дело с простыми декартовыми координатами.

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 рассматривает их как пиксельные координаты, так как вы определили пользовательскую проекцию с пиксельными координатами. Так что вы не увидите эту функцию, потому что она выходит за ваши пределы.

Кажется, что координаты вашей второй функции обозначены как географические c координаты, но эти числа достаточно малы, чтобы отображаться в пикселях координаты внутри экстента. (Но, возможно, они не отображаются там, где вы ожидаете их появления.) Ваша вторая функция отображается в левом нижнем углу изображения, используя этот код:

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"
    })