पत्ती के साथ मल्टीफोलगन पर ऑटो ज़ूम

Question

मेरे पास मल्टीप्लगॉन के साथ एक जियोजोन है और मैं इस मल्टीप्लगॉन को नक्शे में फिट करना चाहता हूं। केवल बहुभुज पर नहीं एक बहुभुज पर नक्शा केंद्र।

यहां मेरी स्क्रिप्ट है

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

और स्क्रिप्ट से पहले मेरा जियोजोन कॉल:

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 ] ] ] ] } }]};

आपकी सहायताके लिए धन्यवाद!

Answer 1

आजकल, आप getBoundsएक मल्टीपॉलीगॉन ऑब्जेक्ट की विधि का उपयोग कर सकते हैं और उपयोग कर सकते हैं जो मानचित्र की सीमा निर्धारित करने के लिए है।

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

Answer 2

मुझे पत्रक के साथ बहुत कम अनुभव है, लेकिन मल्टीप्लगॉन के साथ काम करते समय गेटबाउंड्स में यह बग जैसा लगता है।

यहाँ एक बहुभुज के पूर्ण सीमा की गणना करने के लिए एक समाधान है:

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

Comments

आपका स्वागत है। बस जिज्ञासु, क्या आपने इसे कैटल के साथ बग के रूप में लॉग किया?

— डेरेक स्विंगली