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 中，有 var markers = {} 声明。例如，

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

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

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

这是一种方法，您可以先使用 Jquery 到 getJSON 来自本地路径或 URL 的数据，然后您可以在 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)

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

MapboxGL set visibility based on property from data loaded from file

javascript

mapbox

mapbox-gl-js

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