Combining an ImageLayer and VectorLayer in OpenLayers 6

Question

I'm using OpenLayers 6.3.1, trying to create a VectorLayer with some basic shapes on top of a simple static ImageLayer.

Basically, I'm trying to put the shapes from this example on top of this static image example.

When I add the view's custom projection setting, I can see my image. When I remove it (let it default to 'EPSG:3857'), I can see the shapes.

I've tried adding shapes with different coordinates, but I can't get them to show up on top of my image!

Here's my initialization code. I left some comments in so you can see some of the things I'm trying to mess with. Can anyone help me set this up? I'm not working with any maps or map data for this application. It's an image annotation system, and I just want to be dealing with simple Cartesian co-ordinates.

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

The projection extent needs to be big enough to fit your largest polygon — Mike

imre imre · Accepted Answer · 2020-04-15T09:53:11

Your image has to be georeferenced to display it in a map projection.

If you are using a custom projection with pixel coordinates, then your vector features have to use pixel coordinates too.

Your first feature uses EPSG:3857 coordinates, but OpenLayers treats them as pixel coordinates, since you've defined a custom projection with pixel coordinates. So you won't see this feature because it's out of your extent.

The coordinates of your second feature are seem to be meant as geographic coordinates, but these numbers are low enough to be displayed as pixel coordinates inside the extent. (But maybe they aren't displayed where you would expect them to appear.) Your second feature is displayed at the bottom left of the image, using this code:

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

Combining an ImageLayer and VectorLayer in OpenLayers 6

1 Answers