过滤 Json 并添加自定义标记

Question

我正在尝试从我的数据库中导入一个 json 文件并添加具有不同标记样式的自定义图层。当我导入 json 并执行 json.map 时，它作为包含所有 lat/lng 数据的一层。当我执行 json.filter 时，如果 category == "what i want"，添加标记...它会提取数据，将其放入变量中，但不会将其用作图层。

注意： 我正在使用 Javascript 和 Sequelize。我的传单地图是从 mapbox 导入的。该程序功能齐全，但我正在尝试添加额外的功能来排序数据和查看乐趣。

  fetch('https://agile-mesa-12521.herokuapp.com/api')
    .then(function(response) {
      return response.json();
    }).then(function(complaintJson){
      let lMarkerArray = complaintJson.filter((complaint) => {
        if(complaint.category == "pothole"){
        return L.marker([complaint.lat, complaint.long])
      }
    })
    console.log(lMarkerArray)
      let overlayMaps = { "Complaints": L.layerGroup(lMarkerArray)}
      let streetView = {"Street View": L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          minZoom: 10,
          id: 'mapbox.streets',
          accessToken: 'pk.eyJ1IjoicmxvcmVuemluaSIsImEiOiJjanR5Z3R2bjQxNjlxM3lvNTV4ZnMxOXAyIn0.xxNzHRkLduHYsYIMoCvGCA'
      }).addTo(mymap)}
      L.control.layers(streetView, overlayMaps).addTo(mymap)
    })
})

取出 if(complaint...) 并将complaintJson.filter 更改为 .map ，它适用于所有传入的数据。

关于如何创建多个变量、将它们分配到我的投诉Json 文件中的不同类别、然后给它们自定义标记的任何建议？

  fetch('https://agile-mesa-12521.herokuapp.com/api')
    .then(function(response) {
      return response.json();
    }).then(function(complaintJson){
      let lMarkerArray = complaintJson
  .filter(complaint => complaint.category == "pothole")
  .map(complaint => L.marker([complaint.lat, complaint.long]));
        // return L.marker([complaint.lat, complaint.long])
    // })
    console.log(lMarkerArray)
      let overlayMaps = { "Complaints": L.layerGroup(lMarkerArray)}
      let streetView = {"Street View": L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          minZoom: 10,
          id: 'mapbox.streets',
          accessToken: 'pk.eyJ1IjoicmxvcmVuemluaSIsImEiOiJjanR5Z3R2bjQxNjlxM3lvNTV4ZnMxOXAyIn0.xxNzHRkLduHYsYIMoCvGCA'
      }).addTo(mymap)}
      L.control.layers(streetView, overlayMaps).addTo(mymap)
    })
})

更新了代码，建议过滤然后映射。

Oxnoob 解决了我的问题。谢谢！

Answer 1

因为 filter 返回原始数组的子集（只有函数返回真值的元素），所以您不能像使用 map 那样更改元素本身。

我想你想做的是：

let lMarkerArray = complaintJson
  .filter(complaint => complaint.category == "pothole")
  .map(complaint => L.marker([complaint.lat, complaint.long]));