时间戳

首页 > 解决方案 > mapbox styledata 事件触发 3 次，我只需要触发 1 次，如何？

mapbox - mapbox styledata 事件触发 3 次，我只需要触发 1 次，如何？

问题描述

mapbox styledata 事件触发 3 次，我只需要触发 1 次，如何？

 map.on("styledata", loadTiles);    // will fire multiple 3 times, whenever style changed.  
                                    // event.stopPropagation(); does not work.


 map.on("load", loadTiles);       // only fire 1 time. but when you change base map, use below

      map.setStyle('mapbox://styles/mapbox/' + layerId, {diff: false});

 //  on load event will not fire, which I need it fire to re-load geojson layer. 


 map.on("styledata"    // works fine, but it fire 3 same event at same time, cause load 3 times geojson layer, cause other error when you load 3 times geojson layer at same time.


    //   How to make styledata on fire 1 times instead of 3?

标签： mapboxmapbox-gl-js

解决方案

发现以下事件组合仅可用于触发 1 而不是 3 styledata 事件：

map.on('styledataloading', function() {
    console.log('A styledataloading event occurred.');
    map.once('styledata', function() {
        console.log('A styledata event occurred.');
        loadTiles();
    });
});

解释：

第一个事件（styledataloading）在地图样式开始改变时触发。

styledataloading：当地图的样式开始异步加载或更改时触发。所有 styledataloading 事件都跟随着 styledata 或错误事件。

作为回调，您可以使用 map.once(...) 设置仅针对第一个 styldata 事件触发的事件侦听器。

一次：将只调用一次的侦听器添加到指定的事件类型。注册侦听器后第一次触发事件时将调用侦听器。

这样，您就不会在第一次更改后丢失样式更改的事件侦听器，就像您只使用map.once('styledata', loadTiles);.

推荐阅读