0

I'm trying to load multiple shapefiles as GeoJSON and display them on OpenLayers.

This is the code:

        var map = new ol.Map({
        layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
        })],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        overlays: [overlay],
        view: new ol.View({
            projection: 'EPSG:4326',
            center: center,
            zoom: zoom,
            rotation: rotation
        })
    });


    loadshp({
            url: './10tnvillage.zip',
            encoding: 'big5',
            EPSG: 3826
        },
        function (data) {

            var vectorLayer = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: (new ol.format.GeoJSON()).readFeatures(data,{
                        featureProjection: 'EPSG:4326'
                    })
                }),
                style: setStyle
            });

            map.addLayer(vectorLayer);
        });

    loadshp({
            url: './abadan.zip',
            encoding: 'big5',
            EPSG: 3826
        },
        function (data1) {

            var vectorLayer1 = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: (new ol.format.GeoJSON()).readFeatures(data1,{
                        featureProjection: 'EPSG:4326'
                    })
                }),
                style: setStyle
            });

            map.addLayer(vectorLayer1);
        });

It's show the Tile layer and the latest shapefile, but not all of them.

I did used a Array List and pass it to Map object, but didn't work.

        var layers = [];
    layers.push(new ol.layer.Tile({
        source: new ol.source.OSM()
    }));
    ...
    layers.push(vectorLayer);
    ...
    layers.push(vectorLayer1);
    ....
    var map = new ol.Map({
        layers: layers,
    ...

So, how can I display all my layers in OpenLayers?

1

You could try something like below to create all the Layers using GeoJSON individually

   // create the map
    var map = new ol.Map({
    layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: {
            collapsible: false
        }
    }),
    overlays: [overlay],
    view: new ol.View({
        projection: 'EPSG:4326',
        center: center,
        zoom: zoom,
        rotation: rotation
    })
});


//First create a Vector source from GeoJSON
var shapefileSource= new ol.source.Vector
({
  url: YOU-GEOJSON-URL
  format: new ol.format.GeoJSON()
});

// create the Vector layer based on the source 

var Vector_map_layer =  new ol.layer.Vector
({
  source: shapefileSource,
});   

After, add layers to the map

map.addLayer(Vector_map_layer)

If you could see some but not all of the layer, I would suggest you to use

map.getLayers();

to figure out what layers you have in the map, maybe you didn't add them in correctly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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