2

I am trying to use OpenLayers to show some road features that I drew on a non geographical image in qgis. The output geojson I am using looks as follows (only one feature shown for demonstration).

{"type": "FeatureCollection",
"name": "roads",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3857" } },
"features": [
{ "type": "Feature", "properties": { "id": 1, "name": "Prospect Way", "type": "medium", "fwy": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 611.149016387208121, -4979.219450327811501 ], [ 705.113328259223067, -4984.793604421914097 ], [ 796.954152857294275, -4983.997296694185025 ], [ 899.943285643570562, -4978.954014418568477 ], [ 1019.654880712154409, -4970.990937141278664 ], [ 1172.015092617624987, -4972.05268077825076 ], [ 1256.423711756892772, -4979.219450327810591 ], [ 1326.49879179703953, -4979.750322146296639 ], [ 1430.018796401801865, -4978.954014418567567 ] ] ] } }, etc. etc.

These features were drawn in qgis over a 2d image. This is non geographical data from a fictional game world. When I try to load and show the geojson in Openlayers, it appears as a tiny little dot in the middle of the frame, which has to be zoomed into in order to see.
Images:
Regular, initial zoom value of 2
What it's meant to look like

This is my code. I've tried an assortment of different things - such as including projections, not including them, swapping them around. This code is from following simple tutorials so I don't understand why it doesn't work - when I try to load the image layer separately, it works at the correct scale just fine. Any help would be much appreciated - it's worth noting that yes, the Y axis in the geojson file is negative, that's something to do with how co-ordinates are referenced with raster images in qgis.

const extent = [0, 0, 4532, -5754];

const projection= new ol.proj.Projection({
            units: "pixels",
            extent: extent
        })

const image = new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: '/static/assets/geo/boulderbeta2.png',
        imageSize: [4532, 5754],
        projection: projection,
        imageExtent: extent

      })
    })


const roads = new ol.layer.Vector({
    title: 'Roads',
    source: new ol.source.Vector({
        url: '/static/assets/geo/roads.geojson',
        format: new ol.format.GeoJSON()
      })
  })
image.setZIndex(0);
roads.setZIndex(1);


roads.setStyle([
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#d21212',
            width: 2
         })
     })
 ]);



var map = new ol.Map({
    target: 'map',
    layers: [image,roads],
    view: new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 1.5,
        minZoom: -1,
        maxZoom:100
    }),
});

Edit: Added image layer and projection to code.

Jetpackb
  • 21
  • 2
  • The coordinates you have shown are within 5km of the equator / Greenwich meridian intersection if they are EPSG:3857, so the scale is as expected at global zoom level of 2. But there are no roads in that part of the Atlantic, so either the coordinates or their projection is wrong., If it is a custom projection you should define a custom view projection with extent to match the features you are displaying, as in https://openlayers.org/en/latest/examples/static-image.html – Mike Jul 24 '22 at 18:57
  • @Mike Thanks for the reply - I think that makes sense, using that means I managed to get the vector layer centred. However, now the image layer won't show up at all, I'm assuming it's something to do with incorrect co-ordinates/projection, even though I use the custom projection as you recommended. Edited original code to update with the image layer. – Jetpackb Jul 24 '22 at 19:29

0 Answers0