Question

我正在尝试使用ngx-leaflet在Angular6中执行类似的操作，如下所述： https://leafletjs.com/examples/choropleth/

我已经可以显示默认弹出窗口并更改样式onmouseover，但是无法使resetStyle正常工作。

我正在加载多个GeoJSON数据集，并使用通用函数将它们添加为单独的图层。在这些图层上，我想更改样式“ onmouseover”并将其重置为“ onmouseout”，当单击该功能时，我想在页面右上角的div中显示一个图表。另外，点击事件在我的代码中不起作用。

我从后端获取GeoJSON数据的通用函数：

private loadGeoJsonDataSet(path: string, dataset: string, geometryType: string, layerName: string, fitBounds: boolean): void {
  this.mapService.getGeoJson(path, dataset).pipe(first()).subscribe(json => {
    // Create layer and add to map:
    const geoJsonLayer = L.Proj.geoJson(null, {
        // onEachFeature: (feature, layer) => {
        //   layer.bindPopup('<h5> Test:' + feature.properties.gid + '</h5>');
        // },
        onEachFeature: this.onEachFeature.bind(this),
        attribution: 'CloudHydro'
      }
    ).addTo(this.map);

    // Set options:
    switch (geometryType) {
      case 'point': {
        geoJsonLayer.options.style = this.getPointStyle;
        geoJsonLayer.options.pointToLayer = (feature, latlng) => {
          return L.circleMarker(latlng, this.circleMarkerOptions);
        };
        break;
      }
      case 'polyline': {
        geoJsonLayer.options.style = this.getPolylineStyle;
        break;
      }
      case 'polygon': {
        geoJsonLayer.options.style = this.getPolygonStyle;
        break;
      }
      default: {
        geoJsonLayer.options.style = this.getPolygonStyle;
        break;
      }
    }
    // Add data to the layer:
    geoJsonLayer.addData(json);
    // Add layer to the layer control:
    this.layersControl.overlays[layerName] = geoJsonLayer;
    if (fitBounds) {
      this.map.flyToBounds(geoJsonLayer.getBounds());
      this.map.fitBounds(geoJsonLayer.getBounds());
    }
  });
}

我的onEachFeature和样式功能：

private highlightFeature(e) {
  const layer = e.target; 
  layer.setStyle({
    weight: 3, color: '#333',
  });
  if (!L.Browser.ie && !L.Browser.opera12) {
    layer.bringToFront();
  }
}

private resetHighlight(e) {
  const layer = e.target;
  --> Not working: layer.resetStyle(layer);
}

private clickedOnFeature(feature, layer) {
  --> Not working: console.log('In clickedOnFeature', feature);
}

private onEachFeature(feature, layer) {
  layer.bindPopup('<h5> GID:' + feature.properties.gid + '</h5>');
  layer.on({
    mouseover: this.highlightFeature,
    mouseout: this.resetHighlight,
    click: this.clickedOnFeature(feature, layer)
  });
}

任何帮助将不胜感激。将示例从leafletjs.com转换为Angular + ngx-leaflet也会对像我这样的新手有所帮助。

Answer 1

我自己找到了解决方案：

df = pd.DataFrame({'Name':['John','David'],
                   'Occupation':['CEO','Dep Dir'],
                   'Contact':['HP No-Mobile Ph 123:456','Off-Mobile Ph']},)

print(df)
    Name Occupation                  Contact
0   John        CEO  HP No-Mobile Ph 123:456
1  David    Dep Dir            Off-Mobile Ph

df[['Contact1','Contact2']] = df.Contact.str.split('[-]',expand=True)
print(df)

    Name Occupation                  Contact Contact1           Contact2
0   John        CEO  HP No-Mobile Ph 123:456    HP No  Mobile Ph 123:456
1  David    Dep Dir            Off-Mobile Ph      Off          Mobile Ph

df['Contact2'] = df.Contact2.str.extract('([a-zA-Z ]+)')[0].str.rstrip()
print(df)

    Name Occupation                  Contact Contact1   Contact2
0   John        CEO  HP No-Mobile Ph 123:456    HP No  Mobile Ph
1  David    Dep Dir            Off-Mobile Ph      Off  Mobile Ph

诀窍是不要对this.mapService.getGeoJson(path, dataset).pipe(first()).subscribe(json => { // Create layer and add to map: const geoJsonLayer = L.Proj.geoJson(null, { onEachFeature: (feature, layer) => { // Create popup with all properties of the layer: let popupContent = '<h5>' + layerName + '</h5><p style="width: 100%; line-height: 1.5;">'; for (const key in feature.properties) { popupContent += '<b style="min-width:25%; margin-right: 5px; display: block; float: left;">' + key + '</b>' + '<span>' + feature.properties[key] + '</span><br>'; } popupContent += '</p>'; layer.bindPopup(popupContent, {minWidth: 250, maxWidth: 400}); layer.on('mouseover', (e) => this.highlightFeature(e)); layer.on('mouseout', (e) => geoJsonLayer.resetStyle(e.target)); layer.on('click', () => this.selectedFeature(feature)); }, attribution: layerName + ' © CloudHydro' } ).addTo(this.map);使用单独的函数，而要使用内联函数。然后，您可以访问onEachFeature所需的geoJsonLayer对象。

无法使resetStyle在ngx-leaflet中工作

1 个答案: