mapbox - 使用外部geojson文件时Mapbox过滤器不起作用

问题描述

我已经使用 Mapbox 过滤器很长时间了，但是一旦我实现了必须采用 geojson 格式的外部文件，过滤器就停止工作了。有人可以看看我做错了什么。

示例 geojson 外部文件。

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"title":"我最后知道的位置","icon":{"iconUrl":"https ://www.myiapps.net/_lib/img/pegs/mylocation.png","iconSize":[30,30],"iconAnchor":[0,25],"popupAnchor":[0,-25] ,"className":"dot"}},"geometry":{"type":"Point","coordinates":[-96.8029594,32.7929756]}},{"type":"Feature","properties": {"title":"2021-02-07 15:03:00 PUSH 144 Crescent Court Dallas Texas United States 75201 的
其他测试","traffic":"false","crime":"false","weather": “错误的”，"ndisaster":"false","other":"true","icon":{"iconUrl":"https://www.myiapps.net/_lib/img/pegs/watch.png","iconSize" :[30,30],"iconAnchor":[0,25],"popupAnchor":[0,-25],"className":"dot"}},"geometry":{"type":"Point" "坐标":[-96.8032256,32.7942144]}}]}

地图框 HTML

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>iSaw Incidents</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
    <style>
    body { margin: 0; padding: 0; } 
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
    </head>
    <meta http-equiv="refresh" content="60">
    <body>
    <style>
    .menu-ui {
      background:#fff;
      position:absolute;
      top:10px;right:10px;
      z-index:1;
      border-radius:3px;
      width:120px;
      border:1px solid rgba(0,0,0,0.4);
      }
      .menu-ui a {
        font-size:13px;
        color:#404040;
        display:block;
        margin:0;padding:0;
        padding:10px;
        text-decoration:none;
        border-bottom:1px solid rgba(0,0,0,0.25);
        text-align:center;
        }
        .menu-ui a:first-child {
          border-radius:3px 3px 0 0;
          }
        .menu-ui a:last-child {
          border:none;
          border-radius:0 0 3px 3px;
          }
        .menu-ui a:hover {
          background:#f8f8f8;
          color:#404040;
          }
        .menu-ui a.active,
        .menu-ui a.active:hover {
          background:#3887BE;
          color:#FFF;
          }
    </style>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <nav class='menu-ui'>
      <a href='#' class='active' data-filter='all'>Show all</a>
      <a href='#' data-filter='traffic'>Traffic</a>
      <a href='#' data-filter='crime'>Crime</a>
      <a href='#' data-filter='weather'>Weather</a>
      <a href='#' data-filter='ndisaster'>Natural Disaster</a>
      <a href='#' data-filter='other'>Other</a>
    </nav>
    <div id='map'></div>
    <script>
    var peccrFilter = GetURLParameter('peccrFilter');
    var rView = GetURLParameter('rView');
    var geoJsonFile = 'https://www.myiapps.net/geoJson/'+peccrFilter;
    L.mapbox.accessToken = ' MY KEY ';
    var loc = rView.split(',');
    var map = L.mapbox.map('map', null, { zoomControl: false })
        .setView(loc, 14)
         .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'))
         .addControl(L.mapbox.geocoderControl('mapbox.places', {
             keepOpen: false
         }));
   new L.Control.Zoom({ position: 'bottomright' }).addTo(map);    
   var myLayer = L.mapbox.featureLayer().addTo(map);
   var myLayer = L.mapbox.featureLayer()
    .loadURL(geoJsonFile)
    .addTo(map);
 
    myLayer.on('layeradd', function(e) {
          var marker = e.layer,
          feature = marker.feature;
       marker.setIcon(L.icon(feature.properties.icon));
    });
    
 featureLayer.on('ready', function() {
        map.fitBounds(featureLayer.getBounds());
    });
    myLayer.setGeoJSON(geoJson);
     $('.menu-ui a').on('click', function() {
        // For each filter link, get the 'data-filter' attribute value.
        var filter = $(this).data('filter');
        $(this).addClass('active').siblings().removeClass('active');
        markers.setFilter(function(f) {
            // If the data-filter attribute is set to "all", return
            // all (true). Otherwise, filter on markers that have
            // a value set to true based on the filter name.
            return (filter === 'all') ? true : f.properties[filter] === true;
        });
        return false;
    });
    
    function GetURLParameter(sParam)
    {
       var sPageURL = window.location.search.substring(1);
       var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++) 
         {
            var sParameterName = sURLVariables[i].split('=');
         if (sParameterName[0] == sParam) 
              {
                 return sParameterName[1];
              }
         }
      }
    
    </script>
    </body>
    </html>

标签： mapboxgeojson

mapbox - 使用外部geojson文件时Mapbox过滤器不起作用

问题描述

解决方案

推荐阅读