将标记链接到传单中的等值线多边形层

Question

我想为 choropleth 图层创建一个单击事件，以在其多边形坐标中显示标记。我已经使用 leaflet 插件创建了 choropleth 层，并且正在寻找一种方法来显示多边形内的点 - 类似于我使用 turf-js 插件 pointsWithinPolygon join 看到的方式 - 大多数示例我然而，我在网上看到 link 用这些点创建一个多边形。我拥有的两个文件（县和点坐标的多边形属性）具有类似属性的功能，我可以替代 linkage (countyID) - 但是我不确定用于处理的动态方法绑定。假设 - 如果我在 1 个州内有 100 多个县，link 将点指向每个县，而不是为每个县手动创建 var featureCollection 和一组对应点。

这是我的分区统计代码，即州输出到每个县边界的多边形坐标：

let plethstate = new L.layerGroup()

geojson = L.choropleth(countydata, {
  valueProperty: "Amount", 
  scale: ["#ffffb2", "#b10026"],
  steps: 10,
  mode: "q",
  style: {
    color: "#fff",
    weight: 1,
    fillOpacity: 0.8
  },
  onEachFeature(feature, layer) {
    layer.bindPopup("CountyID: " + feature.properties.IDcounty + "<br>County: " + feature.properties.NAME + "<br># : " + feature.properties.Number);
    var state = feature.properties.IDcounty.slice(0,2);
    if (state == '51') layer.addTo(plethstate);
}
})

我想使用 turf Js 将此层引用为 featureCollection 并在每个县边界内找到点标记，以便使用县的 onclick() 事件，使用我的点层显示标记：

  var pts = L.geoJson('/data', {
    pointToLayer: function (feature){
      return new L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {
      radius: getRadius(feature.properties.Amount),
      fillOpacity:0.8,
      color: getColor(feature.properties.Name),
  })
  }
})

点击功能将多边形绑定到点层：

  $("#mybutton").click(function (event) { 
  var ptsWithin = turf.within(pts.toGeoJSON(), plethstate.toGeoJSON());
  console.log(ptsWithin)
  })

但是，我可能不理解 turf-js 方法的内在功能：它是否将点绑定到 var plethstate 作为单个层？或者它是否固有地将点绑定到图层组中对应的多边形图层（每个县）（在转换为 geoJson 之后）？

Answer 1

对于任何好奇的人 - 我能够使用这种方法将标记绑定到等值线数据文件中的每个多边形图层：

var group = L.featureGroup();
let plethstate = new L.layerGroup()

geojson = L.choropleth(countydata, {
  valueProperty: "Amount", 
  scale: ["#ffffb2", "#b10026"],
  steps: 10,
  mode: "q",
  style: {
    color: "#fff",
    weight: 1,
    fillOpacity: 0.8
  },
  onEachFeature(feature, layer) {
    layer.bindPopup("CountyID: " + feature.properties.IDcounty + "<br>County: " + feature.properties.NAME + "<br># : " + feature.properties.Number);
    layer.on("click", function (e){
          pointsInBuffer = L.geoJSON().addTo(group);
          var ptswithin = turf.pointsWithinPolygon(pts.toGeoJSON(), layer.toGeoJSON())
          console.log(ptswithin)
          pointsInBuffer.addData(ptswithin);
        })
    var state = feature.properties.IDcounty.slice(0,2);
    if (state == '51') layer.addTo(plethstate);
}
})

请注意，上面代码中的点击功能并未启用标记，而是将数据发送到 featureGroup。为了将特征组启用为可选层，我附加了一个复选框（选中时单击渲染标记，取消选中时删除）。添加了一个可选按钮以在单击时刷新功能组中的标记。

将标记链接到传单中的等值线多边形层

linking markers to choropleth polygon layer in leaflet

javascript

leaflet

turfjs