onEachFeature 不绑定传单中的事件（点击，onmouseover ..） Angular 11

Question

我正在使用带有 Angular 11 的 Leaflet 1.7.1。我有下一个代码：

渲染组件的html是这样的：

 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">

 <div id="map" style="height: 100vh;"></div>

这是组件本身：

@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) {}

map: L.Map;
geojson: L.GeoJSON;

ngOnInit() {        

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

    L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "ATTRIBUTION",
        tileSize: 512,
        zoomOffset: -1
    }).addTo(this.map);


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

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


function resetHighlight(e) {
this.geojson.resetStyle(e.target);

}

function zoomToFeature(e) {
this.map.fitBounds(e.target.getBounds());
}

function highlightFeature(e) {
const layer = e.target;

layer.setStyle({
    weight: 5,
    color: "#666",
    dashArray: "",
    fillOpacity: 0.2
});

if (!L.Browser.ie && !L.Browser.edge) {
    layer.bringToFront();
 }

 }

function style(feature) {
return {
    fillColor: getColor(feature.properties.density),
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7
 };
 }

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

所以问题是无论我在 onEachFeature 方法中使用什么来处理层上的事件，例如

 layer.on({
    click: layer.setStyle({fillColor: 'red'}),
    mouseover: layer.setStyle({fillColor: 'blue'}),
    mouseout: layer.setStyle({fillColor: 'green'})     
  });

所有图层都将填充颜色绿色

如果我使用这个：

  layer.on('click', function(e) {
    layer.setStyle({fillColor: 'red'})
  });

不会触发任何点击事件，也就是说，什么都不会发生。

我尝试将代码放在不同的 Angular 生命周期方法 ngOnInit()、ngAfterViewInit() 中，发生了相同的行为。

PC：我用官方传单网站的代码替换了商业代码：https://leafletjs.com/examples/choropleth/

**我看到几个类似的问题，但是，或者没有回答，或者没有考虑Angular版本11中的Leaflet。

Answer 1

问题是传单文件没有被很好地引用。在我的旧项目中，它在 HTML 中被引用如下：

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">

但实际上正确的方法是通过 angular.json 文件：

 "styles": [
                "node_modules/leaflet/dist/leaflet.css",
                "src/styles.css"
            ],

此外，我还想指出一件让我在 Angular TS:

中遇到引用问题的事情

 L.geoJSON(statesData, {style: style, onEachFeature: onEachFeature.bind(this)}).addTo(this.map);

使用

.bind(this)，因此我们可以在 onEachFeature 方法中获取组件中的元素。

例如：

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature.bind(this),
        mouseout: resetHighlight.bind(this),
        click: zoomToFeature.bind(this)
    });
}

Component 属性 this.map 如果没有 .bind(this)

将是未定义的

function zoomToFeature(e) {
    this.map.fitBounds(e.target.getBounds());
}

整个例子在Angular11:

这里实现

https://stackblitz.com/edit/angular-mkxfub

这是传单教程：

https://leafletjs.com/examples/choropleth/

对 .bind(this)

的引用

onEachFeature 不绑定传单中的事件（点击，onmouseover ..） Angular 11

onEachFeature not binding Events (click, onmouseover..) in Leaflet with Angular 11

javascript

leaflet

angular