openlayers 3 zoom combiné à mesure

J'utilise openlayers 3 pour créer une carte avec un vecteur de caractéristiques sur le dessus. Pour l'instant, donc bon.

J'ai plusieurs couches vectorielles, regroupés dans une variable appelée projecten.

var projecten = new ol.layer.Group({

            title: 'Projecten',
            layers: [

                new ol.layer.Vector({
                title: 'EVZ Den Dungen',
                source: new ol.source.GeoJSON(
                            /** @type {olx.source.GeoJSONOptions} */({
                              object: EVZDenDungen,
                              projection: 'EPSG:3857'
                        })),
                style: function(feature, resolution) {
                    return lookup[feature.get('landschapselement')];
                }
                }),

                new ol.layer.Vector({
                title: 'EVZ Croy',
                source: new ol.source.GeoJSON(
                            /** @type {olx.source.GeoJSONOptions} */({
                              object: EVZCroy,
                              projection: 'EPSG:3857'
                        })),
                style: function(feature, resolution) {
                    return lookup[feature.get('landschapselement')];
                }
                }),

                new ol.layer.Vector({
                title: 'Natuurcompensatie Gasselsbroek',
                source: new ol.source.GeoJSON(
                            /** @type {olx.source.GeoJSONOptions} */({
                              object: NatuurcompensatieGasselsbroek,
                              projection: 'EPSG:3857'
                        })),
                style: function(feature, resolution) {
                    return lookup[feature.get('landschapselement')];
                }
                }),

                new ol.layer.Vector({
                title: 'Ebben',
                source: new ol.source.GeoJSON(
                            /** @type {olx.source.GeoJSONOptions} */({
                              object: Ebben,
                              projection: 'EPSG:3857'
                        })),
                style: function(feature, resolution) {
                    return lookup[feature.get('landschapselement')];
                }
                }),

                new ol.layer.Vector({
                title: 'Zionsburg',
                source: new ol.source.GeoJSON(
                            /** @type {olx.source.GeoJSONOptions} */({
                              object: Zionsburg,
                              projection: 'EPSG:3857'
                        })),
                style: function(feature, resolution) {
                    return lookup[feature.get('landschapselement')];
                }
                })


            ]
})

Maintenant, je veux en quelque sorte la boucle à travers la projecten variables, en boucle par le biais de ses calques un par un, obtenez-en la mesure de chaque couche de la fonction, et s'arrête lorsque la dernière couche a été atteint. Ensuite, je veux un zoom à cette combinés de mesure.

C'est ma configuration de base (je ne suis pas bon avec du javascript et des boucles):

projecten.getLayers()
     for (var i = 0, ii = layers.length; i < ii; ++i) {
         layer = layers[i];
         ol.extent.boundingExtend(extent, layer.getBounds());
     }
    map.getView().fitExtent(extent,map.getSize());

Des idées sur comment je peut obtenir que cela fonctionne?

Je ne sais pas étendues assez bien pour créer une réponse, mais je pense que dans votre boucle, vous pouvez utiliser l'ol.mesure.getBottomLeft et l'ol.mesure.getTopRight pour la couche de la mesure. Stocker les valeurs minimales en bas à gauche et les valeurs maximales de haut, à droite et utilisez-les pour créer votre nouvelle mesure.
Comment? Pouvez-vous lui donner un essai?

OriginalL'auteur user1697335 | 2015-05-08

  1. 20

    Vous devriez être en mesure de le faire:

    var extent = ol.extent.createEmpty();
projecten.getLayers().forEach(function(layer) {
  ol.extent.extend(extent, layer.getSource().getExtent());
});
map.getView().fitExtent(extent, map.getSize());

    Utiliser le ol.mesure.createEmpty() fonction pour initialiser votre mesure. Puis la boucle à travers la collection de couches et de les utiliser ol.mesure.extend() pour générer une mesure qui comprend toutes les fonctions dans l'ensemble de votre vecteur des sources. Enfin, l'ajustement de la carte pour cette mesure.

    Il y a quelques choses à noter ici. Le groupe.getLayers() méthode retourne un ol.Collection de couches. Ceci est similaire à un régulière JavaScript Array sauf qu'il est observable. Vous pouvez utiliser le de la collection.forEach() méthode pour itérer sur chaque couche de la collection.

    Notez également que vous devez appeler source.getExtent() pour obtenir la mesure de tous actuellement chargé de fonctionnalités dans une source.

    Enfin, les liens ci-dessus sont pertinents pour la version 3.5.0 et au-dessus. Vous devrez adapter votre code pour travailler avec ol.source.Vector des objets à la place de l'expérimentation (et maintenant supprimé) ol.source.GeoJSON objets. Voir la Notes de version 3.5.0 pour plus de détails sur la mise à niveau vers le nouveau vecteur de l'API.

    Superbe Tim! Merci beaucoup!
    de toute façon je ne peut pas charger un objet dans la nouvelle ol.source.vecteur?
    new ol.layer.Vector({ title: 'Natuurcompensatie Gasselsbroek', source: new ol.source.Vector({ url: NatuurcompensatieGasselsbroek, format: new ol.format.GeoJSON() }), style: function(feature, resolution) { return lookup[feature.get('landschapselement')]; } }),
    J'ai aussi essayé de object: NatuurcompensatieGasselsbroek
    À partir de 3.8.0 il devrait être map.getView().fit(extent, map.getSize());

    OriginalL'auteur Tim Schaub