GeoJSON事件处理程序无法触发

问题描述

我有以下.tsx代码。我正在关注interactive choropleth tutorial from the docs，试图将其移植到React和TypeScript。地图以每个美国州的预期颜色进行渲染，但是将光标移到多边形上时，mouseover事件永远不会触发。

.gif of issue in action: hovering over the map fires an event handler,but hovering over the polygons does not

import React,{ Component } from 'react'
import { Map,TileLayer,GeoJSON } from 'react-leaflet'
import { LatLngTuple,PathOptions,Layer,LeafletEvent } from 'leaflet'
import * as states from './states';

type State = {
  lat: number,lng: number,zoom: number,}
export default class Choropleth extends Component<{},State> {
  state = {
    lat: 41.881832,lng: -87,zoom: 5,}

  getColor(d: number) {
    return d > 1000 ? '#800026' :
      d > 500 ? '#BD0026' :
      d > 200 ? '#E31A1C' :
      d > 100 ? '#FC4E2A' :
      d > 50 ? '#FD8D3C' :
      d > 20 ? '#FEB24C' :
      d > 10 ? '#FED976' :
      '#FFEDA0';
  }

  style (feature: GeoJSON.Feature): PathOptions {
    if (feature && feature.properties) {
      return {
        fillColor: this.getColor(feature.properties.density),weight: 2,opacity: 1,color: 'white',dashArray: '3',fillOpacity: 0.7
      };
    }
    return {}
  }

  highlightFeature(e: LeafletEvent) {
    console.log('Event handler fired!');
    if (e.target) {
      var layer = e.target;
      layer.setStyle({
        weight: 5,color: '#666',dashArray: '',fillOpacity: 0.7
      });

    }
  }

  onEachFeature(feature: GeoJSON.Feature,layer: Layer) { 
    // layer.on('mouseover',(e: any) => {console.log('Moused over a polygon!')})
    layer.on({
      mouseover: this.highlightFeature,});
  }

  render() {
    const position: LatLngTuple = [this.state.lat,this.state.lng]
    return (
      <Map center={position} zoom={this.state.zoom} style={{ width: '100%',height: '100vh' }} onmouseover={(e: any) => { console.log('Hovered over the map!') }}>
        <TileLayer
          attribution='&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>,&copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
          url='https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'
        />
        <GeoJSON key='my-geojson' data={states.statesData} style={(poly: any) => { return this.style(poly) }} onEachFeature={(feature: GeoJSON.Feature,layer: Layer) => this.onEachFeature(feature,layer)} />
      </Map>
    )
  }
}

这是单个多边形的多边形数据（在states.ts中）：

export const statesData: GeoJSON.FeatureCollection   = {
    "type": "FeatureCollection","features": [
{"type":"Feature","id":"01","properties":{"name":"Alabama","density":94.65},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[-85.431413,34.124869],[-85.184951,32.859696],[-85.069935,32.580372],[-84.960397,32.421541],[-85.004212,32.322956],[-84.889196,32.262709],[-85.058981,32.13674],[-85.053504,32.01077],[-85.141136,31.840985],[-85.042551,31.539753],[-85.113751,31.27686],31.003013],[-85.497137,30.997536],[-87.600282,[-87.633143,30.86609],[-87.408589,30.674397],[-87.446927,30.510088],[-87.37025,30.427934],[-87.518128,30.280057],[-87.655051,30.247195],[-87.90699,30.411504],[-87.934375,30.657966],[-88.011052,30.685351],[-88.10416,30.499135],[-88.137022,30.318396],[-88.394438,30.367688],[-88.471115,31.895754],[-88.241084,33.796253],[-88.098683,34.891641],[-88.202745,34.995703],[-87.359296,35.00118]]]}},]};

解决方法

我睡着了，意识到问题出在使用CDN中过时的.css文件。

index.html的传单css文件的v版本为0.7.7，在撰写本文时，最新版本为v 1.6.0。更改为较新版本会立即解决此问题。

更新：我的问题似乎与该用户遇到的问题相同：https://github.com/Leaflet/Leaflet/issues/4852

再次更新：万一有人想做一些类似的事情，我已经将交互式Choropleth示例移植到了React和TypeScript：https://github.com/davidjmstewart/Leaflet-Interactive-Choropleth-React-TypeScript