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/

无法在Leaflet中使用过滤器选项

1 个答案: