javascript - 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",

如果我遵循该示例，我似乎无法访问“markers”变量来迭代并将每个标记添加到图层。

在 Mapbox.js 的原始版本中，我能够启用/禁用单个功能..我似乎无法在 mapboxGL 中以相同的方式执行此操作。

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

Answer 1

在 example from Mapbox您发布的内容中有 varmarkers = {} 声明。例如，

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

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

将 map.addsource() 与从磁盘提取 GeoJson 分开可能会更容易。

这是您可以使用的一种方法 Jquery首先从本地路径或 URL 获取 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)