mapbox gl js 有空闲事件吗?
Is there any idle event for mapbox gl js?
我需要某种 google 地图 "idle" mapbox gl 事件。
当每个事件触发并且地图停止 zoomin/out 拖动等时,每个图层都已加载,地图处于空闲状态。
我必须使用此代码
map.on("render", function(e) {
if(map.loaded() && triggerOnce === true) {
//fires on zoomin runing
triggerOnce = false;
console.log("Render end")
setTimeout(somefunc(),1000)
}
})
只需监听 moveend 事件,它会在地图上的任何移动(如拖动、缩放、旋转和俯仰)后触发。
你可以通过setTimeout监听onViewPortChange事件来实现类似的事件
var changingViewPortTimeout;
onViewportChange(viewport) {
if (changingViewPortTimeout) {
clearTimeout(changingViewPortTimeout);
}
changingViewPortTimeout = setTimeout(function () {
onIdle(viewport);
}, 200)
});
}
是的,从 mapbox-gl-js v0.52.0 开始,您现在可以使用空闲事件。根据文档:
Fired after the last frame rendered before the map enters an "idle"
state:
- No camera transitions are in progress
- All currently requested tiles have loaded
- All fade/transition animations have completed
使用方法:
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>
空闲,不工作,因为它每 1 秒触发一次事件,继续触发事件。
map.on('idle', (e) => {
改用 moveend 事件。
map.on('moveend', (e) => {
我需要某种 google 地图 "idle" mapbox gl 事件。 当每个事件触发并且地图停止 zoomin/out 拖动等时,每个图层都已加载,地图处于空闲状态。 我必须使用此代码
map.on("render", function(e) {
if(map.loaded() && triggerOnce === true) {
//fires on zoomin runing
triggerOnce = false;
console.log("Render end")
setTimeout(somefunc(),1000)
}
})
只需监听 moveend 事件,它会在地图上的任何移动(如拖动、缩放、旋转和俯仰)后触发。
你可以通过setTimeout监听onViewPortChange事件来实现类似的事件
var changingViewPortTimeout;
onViewportChange(viewport) {
if (changingViewPortTimeout) {
clearTimeout(changingViewPortTimeout);
}
changingViewPortTimeout = setTimeout(function () {
onIdle(viewport);
}, 200)
});
}
是的,从 mapbox-gl-js v0.52.0 开始,您现在可以使用空闲事件。根据文档:
Fired after the last frame rendered before the map enters an "idle" state:
- No camera transitions are in progress
- All currently requested tiles have loaded
- All fade/transition animations have completed
使用方法:
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>
空闲,不工作,因为它每 1 秒触发一次事件,继续触发事件。
map.on('idle', (e) => {
改用 moveend 事件。
map.on('moveend', (e) => {