MapboxGL 根据从文件加载的数据的属性设置可见性

Question

我正在尝试遵循https://www.mapbox.com/mapbox-gl-js/example/filter-markers/ 发布的示例，但在我的情况下，GeoJSON 数据是从外部文件加载的：

map.on('load', function() {
    map.addSource("cacheData", {
        type: "geojson",
        data: "./data.geojson",

如果我按照示例进行操作，我似乎无法访问“标记”变量来迭代并将每个标记添加到图层。

在 Mapbox.js 的原始版本中，我能够启用/禁用单个功能.. 我似乎无法在 mapboxGL 中以同样的方式做到这一点。

在加载数据时，我是否可以使用事件或其他东西来修改数据以将文件中的每个标记添加到图层？

Answer 1

在您发布的example from Mapbox 中，有var markers = {} 声明。例如，

var markers = {
  // properties snipped, see link for GeoJson data
}

但是在您的map.on() 调用中，它引用了./data.geojson。因此，您实际上没有可使用的 markers 对象。

将map.addsource() 与从磁盘中拉入 GeoJson 分开可能更容易。

这是一种方法，您可以先使用来自本地路径或 URL 的 Jquery 到 getJSON 数据，然后您可以使用 map.on 中的结果。

    <!-- 1. Add these JavaScript inclusions in the head of your page -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.0.0.min.js">
      </script>

    <script type="text/javascript">
    $(document).ready(function() {

      var geoJsonFile = "./data.geojson";


      $.getJSON(geoJsonFile, function(markers){

        console.log(markers.type);

      }); // getJSON
    });  // $(document)