Question

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

注意：我正在使用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 ...）并将投诉Json.filter更改为.map，它可以处理所有传入的数据。

关于如何创建多个变量，将其从我的投递文件中分配给不同类别的任何建议，然后为它们提供自定义标记？

  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

因为过滤器返回原始数组的子集（仅包含函数向其返回真实值的元素），所以您无法像使用map那样更改元素本身。

我想你要做的是：

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

过滤Json并添加自定义标记

1 个答案: