4

I want to add multiple vector source to single vector layer. For adding single vector source to vector layer I am using below code and its working perfectly fine:

const vectorSource1 = new VectorSource({
      format: new GeoJSON(),
      url: 'http://localhost:8085/geoserver/test/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=test%3Aebs&maxFeatures=50&outputFormat=application%2Fjson'
      
    });
    const vectorlayer1 = new VectorLayer({
      source: vectorSource1,
      style: new Style({
        stroke: new Stroke({
          color: 'rgba(0, 0, 255, 1.0)',
          width: 2,
        }),
      }),
    });

Though documentation clearly states that a single source can be added. https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html

But is there a way to add multiple vectorSource1,vectorSourc2, vectorSource3 and so on to vectorlayer1 or do I have to add multiple vectorlayer2, vectorlayer3, vectorlayer4 and so on correpondingly for each vector source?

1 Answer 1

7

You can have a single source, fetch and parse from multiple data urls and add the features to the same source. You will need to specify the data and view projections.

const format = new GeoJSON();
const vectorSource = new VectorSource();
const vectorlayer = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2,
    }),
  }),
});

function loadFromUrl (url) {
  fetch(url).then(function (response) {
    response.json().then(function (result) {
      vectorSouce.addFeatures(
        format.readFeatures(result, {
          dataProjection: 'EPSG:4326',
          featureProjection: map.getView().getProjection(),
        })
      }
    });
}

loadFromUrl('http://localhost:8085/....');
loadFromUrl('http://localhost:8085/....');
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.