Question

我在将mouseover，mouseout和click事件附加到leaflet geojson功能时遇到问题。我不能让他们工作。

这是我的代码：

import React, { Component } from 'react';
import L from 'leaflet';
import $ from 'jquery';
    L.Icon.Default.imagePath = '.';
    L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
    });
class App extends Component {
  constructor(props) {
    super(props);
  }  
  componentDidMount() {
    var map = L.map('mapcontainer').setView([40, 0], 2);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);
    var i=0;
    function getColor(i) {
      // for "random colors"
      return  i > 20   ? '#ff5555: '#ffee00';
    }    
    function style(i) {
      return {
        fillColor: getColor(i),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
      };
    }    
    function highlightFeature(e) {
      var layer = e.target;
      layer.setStyle({fillColor: '#ff0000',fillOpacity: 1,weight: 5,opacity: 1,color: '#666',dashArray: ''});
      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {layer.bringToFront();}
    }    
    function highlight (layer) {
        layer.setStyle({
          weight: 5,
          color: 'black'
        });
        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }
    }    
    function notsohighlight (layer) {
        layer.setStyle({
          weight: 2,
          color: 'white'
        });
    }    
    var layer;
    $.getJSON('./data/world.geojson', function(geojson) {
      var i=0;
      layer = L.geoJson(geojson, {
          onEachFeature: function(feature, layer) {
            layer.setStyle(style(i));
            if (i<20) { 
              layer.on({
                'mouseover': function (e) {
                  highlight(e.target);
                },
                'mouseout': function (e) {
                    notsohighlight(e.target);
                }
              });
            }
            if (i===50) {
              layer.on({
                mouseover: "alert('xxx')"
              });
            } 
            if (i===1 || i===20 || i===50) {
              // for check layer._events
              console.log('i:'+i+' country:'+feature.properties.name+' layer._events:'+JSON.stringify(layer._events));
              // i:1 country:Angola layer._events:{"mouseover":[{}],"mouseout":[{}]}
              // i:20 country:Belize layer._events:undefined
              // i:50 country:Spain layer._events:{"mouseover":[{"fn":"alert('xxx')"}]}
            }
            i++;
          }
      }).addTo(map)
    });  
  }
  render() {
        var mapStyle = {
            height: '600px',
            width: '1000px',
            margin: '0 auto'
        };    
    return (
      <div className="App">
        <div className="App-header">
          <h2>Leaflet</h2>
        </div>
        <div id="mapcontainer" style={mapStyle}></div>
      </div>
    );
  }
}

export default App;

从这里你可以看到layer._events上的内容（我猜我需要在这里获得正确的代码）： // i：1国家：安哥拉layer._events：{“mouseover”：[{}]，“mouseout”：[{}]}
// i：20国家：伯利兹layer._events：undefined
// i：50国家：西班牙layer._events：{“mouseover”：[{“fn”：“alert（'xxx'）”}]}

因此，如果我不满20岁，我有：

layer.on({
  'mouseover': function (e) {
    highlight(e.target);
}

所以它至少试图把东西放在那里。出于测试原因，我没有尝试将任何东西放在20以上（50除外）。

对于i = 50（只是用于测试的东西，鼠标悬停应该像i＆lt; 20那样工作。但至少有一些东西）

layer.on({
  mouseover: "alert('xxx')"
});

我正在制作反应应用程序，但还没有成功制作反应传单。根本无法附加geojson。所以，如果我能得到这项工作，那将是一个不错的开始（也许我根本不需要反应传单？

这是我用过的geojson： https://github.com/johan/world.geo.json/blob/master/countries.geo.json?short_path=64005ce

如果有人能在这里帮助我，我会很高兴。谢谢！

Leaflet（geojson）鼠标悬停不起作用

0 个答案: