Zoom automático en multipolígono con el prospecto

Question

Tengo un geojson con un multipolígono y quiero que se ajustan a esta multipolígono para el mapa. El centro del mapa sólo en un polígono no en el multipolygon.

Aquí está mi script

    var map = L.map('map',{ zoomControl:false })
              .setView([<?php echo $lat; ?>, <?php echo $lng; ?>], 12);


            var zoomFS = new L.Control.ZoomFS(); 
    map.addControl(zoomFS);

    var defaultLayer = new L.TileLayer.MapBox.Light({minZoom: 10, maxZoom: 16});
    map.addLayer(defaultLayer);

    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>Massifs forestiers près de </h4>' +  (props ?
            '<b>' + props.LLIB_FRT +'</b><br />'
            : 'Survolez une zone colorée');
    };

    info.addTo(map);


    // get color depending on population density value
    function getColor(d) {
        return d == 'OUI' ? '#238B45' :
               d == 'NON'  ? '#74C476' :
               '';
    }

    function style(feature) {
        return {
            weight: 1,
            opacity: 1,
            color: 'white',
            dashArray: '',
            fillOpacity: 0.7,
            fillColor: getColor(feature.properties.CDOM_FRT)
        };
    }

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 3,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7,
            fillColor: '#C7E9C0'
        });

        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

    var geojson;

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }


    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });
    }

    geojson = L.geoJson(foret, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);

            map.fitBounds(map.getBounds());

    var legend = L.control({position: 'bottomright'});

    legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
            grades = ['OUI','NON'],
            labels = [],
            from, to;


            labels.push(
                '<i style="background:' + getColor('OUI') + '"></i> Forêt domaniale<br />' + '<i style="background:' + getColor('NON') + '"></i> Autre forêt'
                 );


        div.innerHTML = labels.join('<br />') + '<br /><small>Source ONF</small>';
        return div;
    };


    legend.addTo(map);

Y Mi Geojson llamada antes de que el script :

var foret = {"type": "FeatureCollection","features": [{ "type": "Feature","id":"28", "properties": { "LLIB_FRT":"Forêt communale d'Hinsingen", "CDOM_FRT":"NON"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 6.9943980558132, 48.946433094078 ], [ 6.994620292006, 48.946654797086 ], [ 6.9946440493621, 48.946769064939 ], [ 6.9942757111879, 48.947051596133 ], [ 6.994525224939, 48.947130121777 ], [ 6.9949682000749, 48.946963549201 ], [ 6.9953766392947, 48.947023616958 ], [ 6.9957374325074, 48.946813022271 ], [ 6.9965129612099, 48.946224218666 ], [ 6.9961325523574, 48.945968748319 ], [ 6.9957770974676, 48.945782611345 ], [ 6.9957646870665, 48.945668975401 ], [ 6.9959606190443, 48.945511036547 ], [ 6.9946195521361, 48.94466102012 ], [ 6.994630665892, 48.944546885841 ], [ 6.9947706431545, 48.944451927805 ], [ 6.9943890358713, 48.943557180488 ], [ 6.9939647083228, 48.942850378597 ], [ 6.9936098649794, 48.943031218817 ], [ 6.990978273955, 48.944169736953 ], [ 6.9907916915416, 48.944275487598 ], [ 6.9906590303195, 48.944540260439 ], [ 6.9903122282768, 48.945515871105 ], [ 6.9899779107984, 48.945891734939 ], [ 6.9897536964784, 48.946062513595 ], [ 6.9906082903887, 48.946007229028 ], [ 6.9907530326376, 48.946038714842 ], [ 6.9908245833021, 48.94612737104 ], [ 6.9909366304299, 48.946984068611 ], [ 6.9928842027716, 48.947039217107 ], [ 6.9929248400957, 48.946763159392 ], [ 6.9930024317067, 48.946669408079 ], [ 6.9931592044754, 48.946642240938 ], [ 6.9939125945186, 48.946695983544 ], [ 6.9940803721788, 48.946467213889 ], [ 6.9942616812201, 48.946401938807 ], [ 6.9943980558132, 48.946433094078 ] ],[ [ 7.0132518064932, 48.954701866676 ], [ 7.0130792746756, 48.955281720291 ], [ 7.0131097085661, 48.955406738419 ], [ 7.0134535050459, 48.956019942767 ], [ 7.0136768179147, 48.956641121897 ], [ 7.0136432241135, 48.956891471012 ], [ 7.013391660559, 48.95756050072 ], [ 7.0164377304443, 48.958126765886 ], [ 7.0173343130064, 48.958220743678 ], [ 7.0180405329659, 48.958235207654 ], [ 7.0180712371346, 48.957763530194 ], [ 7.018466890148, 48.957337559452 ], [ 7.0183245760167, 48.957321560691 ], [ 7.0182167345232, 48.957234693134 ], [ 7.0176940753708, 48.955926500229 ], [ 7.0171570061764, 48.955918750115 ], [ 7.0170252455885, 48.955885108994 ], [ 7.0165780794306, 48.955358357152 ], [ 7.016549105281, 48.955117411187 ], [ 7.0159152497559, 48.95481071823 ], [ 7.0155138192773, 48.954679378104 ], [ 7.015287839558, 48.954917146081 ], [ 7.015151253069, 48.954947663459 ], [ 7.0142533774551, 48.954711047176 ], [ 7.012862311613, 48.954409014242 ], [ 7.013130198481, 48.95455616266 ], [ 7.0132518064932, 48.954701866676 ] ] ] ] } }]};

Gracias por su ayuda!

Answer 1

Hoy en día, usted puede utilizar el getBounds método de un Multipolígono objeto y que el uso que la definición de un mapa de límites.

var multipolygon = L.geoJson(foret);
multipolygon.addTo(map);
map.fitBounds(multipolygon.getBounds());

Answer 2

Tengo poca experiencia con el prospecto, pero este parece un error en getBounds cuando se trata de un multipolygon.

He aquí una solución para calcular el total de los límites de un multipolígono:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="../dist/leaflet.css" />
  <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
</head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>
  <script>
    var foret = {"type": "FeatureCollection","features": [{ "type": "Feature","id":"28", "properties": { "LLIB_FRT":"Forêt communale d'Hinsingen", "CDOM_FRT":"NON"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 6.9943980558132, 48.946433094078 ], [ 6.994620292006, 48.946654797086 ], [ 6.9946440493621, 48.946769064939 ], [ 6.9942757111879, 48.947051596133 ], [ 6.994525224939, 48.947130121777 ], [ 6.9949682000749, 48.946963549201 ], [ 6.9953766392947, 48.947023616958 ], [ 6.9957374325074, 48.946813022271 ], [ 6.9965129612099, 48.946224218666 ], [ 6.9961325523574, 48.945968748319 ], [ 6.9957770974676, 48.945782611345 ], [ 6.9957646870665, 48.945668975401 ], [ 6.9959606190443, 48.945511036547 ], [ 6.9946195521361, 48.94466102012 ], [ 6.994630665892, 48.944546885841 ], [ 6.9947706431545, 48.944451927805 ], [ 6.9943890358713, 48.943557180488 ], [ 6.9939647083228, 48.942850378597 ], [ 6.9936098649794, 48.943031218817 ], [ 6.990978273955, 48.944169736953 ], [ 6.9907916915416, 48.944275487598 ], [ 6.9906590303195, 48.944540260439 ], [ 6.9903122282768, 48.945515871105 ], [ 6.9899779107984, 48.945891734939 ], [ 6.9897536964784, 48.946062513595 ], [ 6.9906082903887, 48.946007229028 ], [ 6.9907530326376, 48.946038714842 ], [ 6.9908245833021, 48.94612737104 ], [ 6.9909366304299, 48.946984068611 ], [ 6.9928842027716, 48.947039217107 ], [ 6.9929248400957, 48.946763159392 ], [ 6.9930024317067, 48.946669408079 ], [ 6.9931592044754, 48.946642240938 ], [ 6.9939125945186, 48.946695983544 ], [ 6.9940803721788, 48.946467213889 ], [ 6.9942616812201, 48.946401938807 ], [ 6.9943980558132, 48.946433094078 ] ],[ [ 7.0132518064932, 48.954701866676 ], [ 7.0130792746756, 48.955281720291 ], [ 7.0131097085661, 48.955406738419 ], [ 7.0134535050459, 48.956019942767 ], [ 7.0136768179147, 48.956641121897 ], [ 7.0136432241135, 48.956891471012 ], [ 7.013391660559, 48.95756050072 ], [ 7.0164377304443, 48.958126765886 ], [ 7.0173343130064, 48.958220743678 ], [ 7.0180405329659, 48.958235207654 ], [ 7.0180712371346, 48.957763530194 ], [ 7.018466890148, 48.957337559452 ], [ 7.0183245760167, 48.957321560691 ], [ 7.0182167345232, 48.957234693134 ], [ 7.0176940753708, 48.955926500229 ], [ 7.0171570061764, 48.955918750115 ], [ 7.0170252455885, 48.955885108994 ], [ 7.0165780794306, 48.955358357152 ], [ 7.016549105281, 48.955117411187 ], [ 7.0159152497559, 48.95481071823 ], [ 7.0155138192773, 48.954679378104 ], [ 7.015287839558, 48.954917146081 ], [ 7.015151253069, 48.954947663459 ], [ 7.0142533774551, 48.954711047176 ], [ 7.012862311613, 48.954409014242 ], [ 7.013130198481, 48.95455616266 ], [ 7.0132518064932, 48.954701866676 ] ] ] ] } }]};
  </script>
  <script src="../dist/leaflet.js"></script>

  <script>
    var map = L.map('map').setView([48.9390, 6.9797], 14);

    L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
      key: 'BC9A493B41014CAABB98F0471D759707'
    }).addTo(map);

    function onEachFeature(feature, layer) {
      if ( feature.geometry.type === "MultiPolygon" ) {
        // get the bounds for the first polygon that makes up the multipolygon
        var bounds = layer.getBounds();
        // loop through coordinates array
        // skip first element as the bounds var represents the bounds for that element
        for ( var i = 1, il = feature.geometry.coordinates[0].length; i < il; i++ ) {
          var ring = feature.geometry.coordinates[0][i];
          var latLngs = ring.map(function(pair) {
            return new L.LatLng(pair[1], pair[0]);
          });
          var nextBounds = new L.LatLngBounds(latLngs);
          bounds.extend(nextBounds);
        }
        map.fitBounds(bounds);
      }
      var popupContent = "<p>I started out as a GeoJSON " +
          feature.geometry.type + ", but now I'm a Leaflet vector!</p>";

      if (feature.properties && feature.properties.popupContent) {
        popupContent += feature.properties.popupContent;
      }

      layer.bindPopup(popupContent);
    }

    var geoJson = L.geoJson([foret], {

      style: function (feature) {
        return feature.properties && feature.properties.style;
      },
      onEachFeature: onEachFeature

    }).addTo(map);

  </script>
</body>
</html>