Zoom otomatis pada multipoligon dengan selebaran

Saya memiliki geojson dengan multipoligon dan saya ingin mencocokkan multipoligon ini ke peta. Pusat peta hanya pada satu poligon, bukan pada multipoligon.

Ini skrip saya

    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);

Dan My Geojson memanggil sebelum 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 ] ] ] ] } }]};

Terima kasih atas bantuan Anda!

Saat ini, Anda dapat menggunakan getBoundsmetode objek MultiPolygon dan menggunakannya untuk menetapkan batas peta.

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

Saya memiliki sedikit pengalaman dengan selebaran, tetapi ini seperti bug di getBounds ketika berhadapan dengan multipolygon.

Berikut ini solusinya untuk menghitung batas penuh dari suatu multipolygon:

<!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>