Mapbox 地图赢得'；不要使人无头
我有一个工作的nodejs/puppeter解决方案，用于将地图渲染到屏幕截图。该代码在交互式/可见浏览器中运行良好，但在无头运行时不会呈现页面。如果我退回到一个古老的mapbox（Build25），那么它确实渲染了headless，但是mapbox缺少我需要的那个旧版本中的其他功能 我能做些什么来让这一切顺利进行吗。下面是要重新编程的代码Mapbox 地图赢得'；不要使人无头,mapbox,mapbox-gl-js,Mapbox,Mapbox Gl Js,我有一个工作的nodejs/puppeter解决方案，用于将地图渲染到屏幕截图。该代码在交互式/可见浏览器中运行良好，但在无头运行时不会呈现页面。如果我退回到一个古老的mapbox（Build25），那么它确实渲染了headless，但是mapbox缺少我需要的那个旧版本中的其他功能 我能做些什么来让这一切顺利进行吗。下面是要重新编程的代码 (async() => { console.log("test starting"); const puppeteer =
(async() => {
console.log("test starting");
const puppeteer = require('puppeteer');
const browser = await puppeteer.launch({headless: false,userDataDir: "data"});
const page = (await browser.pages())[0];
await page.goto('file://map.html');
await page.waitForFunction('document.querySelector("#sync").textContent.includes("sync")');
await page.setViewport({ width: 800, height: 480 });
await page.screenshot({path: 'map.png'});
await browser.close();
})();
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:800px; height:480px; }
</style>
</head>
<body>
<div id='map'></div>
<div id='sync'></div>
<script>
const outputContainer = document.getElementById('sync');
mapboxgl.accessToken = '**token**';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-122.3351,47.6080],
zoom: 7
});
map.once('idle', (e) => {
console.log("map loaded");
outputContainer.innerHTML += `sync<br>`;
});
</script>
</body>
</html>
（异步（）=>{
控制台日志（“测试启动”）；
const puppeter=require（'puppeter'）；
const browser=wait puppeter.launch（{headless:false，userDataDir:“data”}）；
常量页面=（等待browser.pages（））[0]；
等待页面。转到（'file://map.html');
wait page.waitForFunction（'document.querySelector（'sync'）.textContent.includes（“sync”））；
等待page.setViewport（{宽度：800，高度：480}）；
等待page.screenshot（{path:'map.png'}）；
等待浏览器关闭（）；
})();
正文{margin:0；padding:0；}
#地图{位置：绝对；顶部：0；底部：0；宽度：800px；高度：480px；}
const outputContainer=document.getElementById（'sync'）；
mapboxgl.accessToken='**token**'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v9',
中心：[-122.3351,47.6080]，
缩放：7
});
映射一次（'空闲'，（e）=>{
控制台日志（“地图加载”）；
outputContainer.innerHTML+=`sync
`；
});