地图框 gl js 是否有任何空闲事件

Question

我需要某种谷歌地图"空闲"事件来获取mapbox gl。当每个事件触发并且地图停止放大/缩小拖动等并且每个图层都已加载并且地图处于空闲状态时。我必须使用此代码

  map.on("render", function(e) {
            if(map.loaded() && triggerOnce === true) {
//fires on zoomin runing
                triggerOnce = false;
                console.log("Render end")
                setTimeout(somefunc(),1000)
            }
          })

Answer 1

是的，从mapbox-gl-js v0.52.0开始，现在可以使用一个空闲事件。根据文档：

在地图进入"空闲"之前渲染的最后一帧之后触发 州：

• 没有正在进行相机转换
• 所有当前请求的切片都已加载
• 所有淡入淡出/过渡动画均已完成

要使用它：

map.once('idle', (e) => {
    // do things the first time the map idles
});
map.on('idle', (e) => {
    // do things every time the map idles
});

演示：http://jsfiddle.net/godoshian/yrf0b9xt/

// Data from http://geojson.xyz/
const geojsonSource = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_populated_places.geojson';
const outputContainer = document.getElementById('output-container');
mapboxgl.accessToken = 'pk.eyJ1IjoiY2NoYW5nc2EiLCJhIjoiY2lqeXU3dGo1MjY1ZXZibHp5cHF2a3Q1ZyJ9.8q-mw77HsgkdqrUHdi-XUg';
function createMap(container, layer = null) {
	const map = new mapboxgl.Map({
    container,
    style: 'mapbox://styles/mapbox/light-v9',
  });
  map.on('idle', () => {
    outputContainer.innerHTML += `${container} idle<br>`;
  });
  if (layer) {
  	map.on('load', () => {
    	map.addLayer(layer);
    });
  }
  return map;
}
const map = createMap('map1');
setTimeout(() => {
	fetch(geojsonSource)
    .then(response => {
      if (response.ok) return response.json();
      throw Error(response);
    })
    .then(json => {
      let layer = {
        id: 'populated-places',
        source: {
          type: 'geojson',
          data: json,
        },
        type: 'circle',
      }
      map.addLayer(layer);
      createMap('map2', layer);
    })
    .catch(error => {
    	console.log(error);
    })
}, 5000);

#demo {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
#demo #output-container {
  flex: 1;
}
#demo .map {
  height: 300px;
  flex: 2;
}

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<div id="demo">
  <div id="output-container">
  </div>
  <div id="map1" class="map">
  </div>
  <div id="map2" class="map">
  </div>
</div>

相关公关：https://github.com/mapbox/mapbox-gl-js/pull/7625

文档：https://www.mapbox.com/mapbox-gl-js/api/#map.event:idle

Answer 2

只需收听moveend事件，它将在地图上的任何移动(如拖动，缩放，旋转和俯仰(后触发。

Answer 3

空闲，不工作，因为它每 1 秒触发一次事件，继续触发事件。

 map.on('idle', (e) => { 

请改用 MoveEnd 事件。

     map.on('moveend', (e) => { 

Answer 4

通过使用 setTimeout 监视 onViewPortChange 事件，可以具有类似的事件

var changingViewPortTimeout; 
onViewportChange(viewport) {
    if (changingViewPortTimeout) {
      clearTimeout(changingViewPortTimeout);
    }
    changingViewPortTimeout = setTimeout(function () {
        onIdle(viewport);
      }, 200)
    });
}