Zoom automático en multipolígono con folleto

9

Tengo un geojson con un multipolígono y quiero ajustar este multipolígono al mapa. El centro del mapa solo en un polígono no en el multipolígono.

Aquí está mi guión

    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 My Geojson llama antes del guión:

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

Henri Labarre
fuente

Respuestas:

7

Hoy en día, puede usar el getBoundsmétodo de un objeto MultiPolygon y luego usarlo para establecer los límites de un mapa.

var multipolygon = L.geoJson(foret);
multipolygon.addTo(map);
map.fitBounds(multipolygon.getBounds());
Milan Cermak
fuente
2

Tengo poca experiencia con el folleto, pero esto parece un error en getBounds cuando se trata de un multipolígono.

Aquí hay una solución para calcular los límites completos 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>
Derek Swingley
fuente
De nada. Por curiosidad, ¿registraste esto como un error con Leaflet?
Derek Swingley