Open Layers 6 - Image Layer combine with Vector Layer

Question

I'm trying to have an image layer combined with a vector layer but when I add projection to View the vectors disappear. Am I doing something wrong?

Here is an example of what I'm trying to achieve: https://stackblitz.com/edit/react-ol6

I want these two layers below to be together in View.

Vector Layer

Image Layer

You are unlikely to see any because you have 50 features randomly scattered over 4500000 units when the image is only 2048 units across. If you make the two extents similar the features will overlap the image. — Mike, May 27 '20 at 13:50
I understand what you are saying but even if I change that they are not in the correct position. What should I do then? — GeorgeCodeHub, May 27 '20 at 14:09
`extent = [-e, -e, e, e];` would fit all the features inside the image https://stackblitz.com/edit/react-ol6-xw1x9l — Mike, May 27 '20 at 14:12
You are right. That did the trick actually. Thank you so much! — GeorgeCodeHub, May 28 '20 at 06:40

score 0 · Accepted Answer · answered Jun 09 '20 at 11:41

For those searching for an answer, Mike gave a great solution where you set up the extent value equal to the extend of the vector layer. Thank you again.

var extent = [-e,-e,e,e];
var source = new VectorSource({});

var vectorLayer = new VectorLayer({
    source: source,
});

var imageLayer = new ImageLayer({
    source: new Static({
        url: "https://imgs.xkcd.com/comics/online_communities.png",
        projection: new Projection({
            units: "pixels",
            extent: extent
        }),
        imageExtent: extent,
    }),
});
vectorLayer.setZIndex(1);
imageLayer.setZIndex(0);

var olMap = new Map({
    target: null,
    layers: [imageLayer, vectorLayer],

    view: new View({


    projection: new Projection({
          units: "pixels",
              extent: extent,
       }),
        center: getCenter(extent),
   // center: [0,0],
        zoom: 0,
    }),
});

class App extends Component {
    componentDidMount() {
    olMap.setTarget("olmap");
        vectorLayer.getSource().addFeatures(features);
    }

    render() {
        return (
            <div className="App">
                <div id="olmap" style={{ width: "100%", height: "80%" }} />
            </div>
        );
    }
}

Also here is a stackblitz he shared: https://stackblitz.com/edit/react-ol6-xw1x9l

Open Layers 6 - Image Layer combine with Vector Layer

1 Answers1