Emulieren klicken Sie auf die Broschüre map item

Mit dem Leaflet Choropleth tutorial muss ich ein Klickereignis auf einem bestimmten Kartenbereich emulieren. Zum Beispiel: muss ich eine Funktion wie clickOnMapItem(itemId) haben, die auf einer Karte Bereich klicken, werden die durch den folgenden Code definiert istEmulieren klicken Sie auf die Broschüre map item

{"type":"Feature","id":"05","properties":{"name":"Arkansas","density":56.43},"geometry":{"type":"Polygon","coordinates":[...}

wo „id“: „05“ ist die ID muss ich klicken auf

der Rest meines Codes ist wie im Beispiel:

state-data.js:

var statesData = {"type":"FeatureCollection","features":[ 
{"type":"Feature","id":"01","properties":{"name":"Alabama","density":94.65},"geometry":{"type":"Polygon","coordinates":[[[-87.359 and so on

html:

... header ommited

<!-- language:lang-html --> 
    <body> 
     <div id="map"></div> 

     <script src="dist/leaflet.js"></script> 

     <script type="text/javascript" src="us-states.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script type="text/javascript"> 

      var map = L.map('map').setView([37.8, -96], 4); 

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


      // control that shows state info on hover 
      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>US Population Density</h4>' + (props ? 
        '<b>' + props.name + '</b><br />' + props.density + ' people/mi<sup>2</sup>' 
        : 'Hover over a state'); 
      }; 

      info.addTo(map); 


      // get color depending on population density value 
      function getColor(d) { 
       return d > 1000 ? '#800026' : 
         d > 500 ? '#BD0026' : 
         d > 200 ? '#E31A1C' : 
         d > 100 ? '#FC4E2A' : 
         d > 50 ? '#FD8D3C' : 
         d > 20 ? '#FEB24C' : 
         d > 10 ? '#FED976' : 
            '#FFEDA0'; 
      } 

      function style(feature) { 
       return { 
        weight: 2, 
        opacity: 1, 
        color: 'white', 
        dashArray: '3', 
        fillOpacity: 0.7, 
        fillColor: getColor(feature.properties.density) 
       }; 
      } 
      //ON HOVER HANDLER 
      function highlightFeature(e) { 
       var layer = e.target; 
       layer.setStyle({ 
        weight: 5, 
        color: '#666', 
        dashArray: '', 
        fillOpacity: 0.7 
       }); 

       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()); 
      } 
      //setting click handlers 
      function onEachFeature(feature, layer) { 

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

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

      map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>'); 


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

      legend.onAdd = function (map) { 

       var div = L.DomUtil.create('div', 'info legend'), 
        grades = [0, 10, 20, 50, 100, 200, 500, 1000], 
        labels = [], 
        from, to; 

       for (var i = 0; i < grades.length; i++) { 
        from = grades[i]; 
        to = grades[i + 1]; 

        labels.push(
         '<i style="background:' + getColor(from + 1) + '"></i> ' + 
         from + (to ? '&ndash;' + to : '+')); 
       } 

       div.innerHTML = labels.join('<br>'); 
       return div; 
      }; 

      legend.addTo(map); 


     </script> 
    </body>

Vielen Dank im Voraus!

Quelle

2013-02-07 Ostap Koziy

Sie möchten also ein Klickereignis emulieren? Warum nicht Leaflet's fireEvent wie map.fireEvent('click',{latlng:[x,y]})

verwenden

Sie müssen wahrscheinlich LayerPoint und ContainerPoint in die Parameter des Objekts ausfüllen.

Siehe http://leafletjs.com/reference.html#mouse-event

Quelle

2013-04-10 10:58:49 snkashis

Ich fand, dass das Event-Argument nicht die 'Layer'-Eigenschaft: http://StackOverflow.com/q/44053812/688080 – ziyuang

zu @snkashis hinzu: fireEvent nur die richtigen Typen, wenn Sie Eingabe funktioniert. , dass dies tun würde bedeuten:

var latlngPoint = new L.LatLng(x, y); 
    map.fireEvent('click', { 
     latlng: latlngPoint, 
     layerPoint: map.latLngToLayerPoint(latlngPoint), 
     containerPoint: map.latLngToContainerPoint(latlngPoint) 
    });

Sie auch diese für eine bestimmte Marker/Schicht, was tun kann, wenn sie auf der Karte hinzugefügt wird.

Quelle

2014-06-03 08:44:20 fritzvd

Sorry, es ist eine 3 Jahre alte Frage, aber ich werde versuchen, es hier zu beantworten:

Zuerst aktualisieren Sie den Code unten:

//setting click handlers 
function onEachFeature(feature, layer) { 
    layer.on({ 
    mouseover: highlightFeature, 
    mouseout: resetHighlight, 
    click: zoomToFeature 
    }); 
    //add this line 
    layer._leaflet_id = feature.id; 
}

Die neue Linie oben wird ‚zuweisen‘, um Ihre GeoJSON der ‚id‘ als Schicht des leaflet_id, machen dann eine neue Funktion wie folgt aus:

function clickOnMapItem(itemId) { 
    var id = parseInt(itemId); 
    //get target layer by it's id 
    var layer = geojson.getLayer(id); 
    //fire event 'click' on target layer 
    layer.fireEvent('click'); 
}

Also, es gibt keine Notwendigkeit t o bevölke alle Koordinaten überhaupt !!!

Hoffe es hilft!

Quelle

2016-01-08 04:47:11 bayu

Emulieren klicken Sie auf die Broschüre map item

Antwort

Verwandte Themen