無法在傳單中使用過濾器選項

Question

我有一段簡單的代碼。 我正在嘗試使用折線類過濾 geoJson 中的屬性以僅繪制該特征。 控制台沒有記錄錯誤，也沒有繪制線要素。 人們有什么明顯的錯誤嗎？

var featuredTrails = {"type":"FeatureCollection",
"crs":{"type":"name","properties":{"name":"EPSG:4326"}},
"features":[{"type":"Feature","id":0,"geometry":{"type":"LineString","coordinates":[[-122.61021404499996,37.912006417000043],[-122.61030149899995,37.911962580000079],[-122.61032215499995,37.91195437500005],[-122.61034267899998,37.911948396000071],[-122.61037064499999,37.911944185000038],[-122.61044270799999,37.911944840000046],[-122.61048737499999,37.911941983000077],[-122.61051446199997,37.911935416000063],[-122.61056354999999,37.911913854000034],[-122.61058265499997,37.911907477000057],[-122.61060151699996,37.911905097000044],[-122.61065930899997,37.911903652000035],[-122.61068899199995,37.911899589000029],[-122.61071666799995,37.911890815000049],[-122.61076069999996,37.911863463000032],[-122.61100599899999,37.911912114000074],[-122.61115807299996,37.912020056000074]]},"properties":{"FID":0,"OBJECTID":1,"trailName":"West Peak Loop","SHAPE_Leng":0.0010123783761800001,"Length_mi":0}}

  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
  <script src="data/OneTamFeaturedTrailheads.js"></script>
  <script src="data/OneTamFeaturedTrails.js"></script>

    var map = L.map('map', {
      center: [37.887914, -122.578138],
      zoom: 12,
    });

      var tiles = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}{r}.{ext}', {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        subdomains: 'abcd',
        maxZoom: 18,
        ext: 'png'
      });
      tiles.addTo(map);


  var westPeak = L.geoJson(featuredTrailHeads, {
   pointToLayer: function(feature, latLng) {
    return L.circleMarker(latLng);
    },
    // set marker style
    style: function (feature) {
      return {
      color: '#000000',
      fillColor: '#f6c65b',
      weight: 1,
      stroke: 1,
      fillOpacity: 1,
      radius: 5
      }
    }
   }).addTo(map); 

 var trailsLayer =  L.geoJson(featuredTrails, {
   pointToLayer: function(feature, latLngs){
     return L.polyline (feature, latLngs);
   },
  filter: function(feature, latLngs) {
    if (feature.properties.trailName["West Peak Loop"])

          return feature
   },
 }).addTo(map); 

    </script>

Answer 1

首先你的 geoJson 是錯誤的。 您必須在末尾添加]} 。

此外，您的代碼中的 if 是錯誤的。 feature.properties.trailName["West Peak Loop"]與您從對象“trailName”中獲得子“West Peak Loop”，但沒有名稱為“West Peak Loop”的對象。

在過濾器函數中，您必須返回true或false 。

將過濾器更新為：

  filter: function(feature, latLngs) {
    if (feature.properties.trailName == "West Peak Loop"){
          return true;
    }
   },

示例： https : //jsfiddle.net/falkedesign/cLtvgphr/