লিফলেট সহ মাল্টিপলিগনে অটো জুম

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

আপনাকে স্বাগতম. শুধু কৌতূহলী, আপনি লিফলেট দিয়ে বাগ হিসাবে এটি লগইন করেছেন?

— ডেরেক সুইংলে