传单图像插件从传单地图生成一个空图像答案

【问题标题】：leaflet image plugin generate an empty image from leaflet map传单图像插件从传单地图生成一个空图像
【发布时间】：2022-01-05 14:09:00
【问题描述】：

我正在尝试将传单地图转换为图像：

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>

我创建了一张传单地图：

var map = L.map('map').setView([startup_latitude, startup_longitude], 14);

然后我从地图生成了一张图片：

leafletImage(map, function (err, canvas) {
            var img = document.createElement('img');
            var dimensions = map.getSize();
            img.width = dimensions.x;
            img.height = dimensions.y;
            console.log(canvas.toDataURL())
            img.src = canvas.toDataURL();
            document.getElementById('images').innerHTML = '';
            document.getElementById('images').appendChild(img);
        });

地图显示正确但生成的图像为空：

【问题讨论】：

标签： javascript leaflet mapbox

【解决方案1】：

我在移动代码后解决了这个问题：

var map = L.map('map').setView([startup_latitude, startup_longitude], 14);



        map.touchZoom.disable();
        //map.doubleClickZoom.disable();
        map.scrollWheelZoom.disable();
        map.boxZoom.disable();
        map.keyboard.disable();


        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1Ijoia2hhbGVkYnNmIiwiYSI6ImNreDh4am56eTAyNmoyb213Mnl2bzg4NzAifQ.I-xlHMqKPZy7TijmHZ6SRA'
        }).addTo(map);

        var marker = L.marker([startup_latitude, startup_longitude]).addTo(map);

        leafletImage(map, function (err, canvas) {
            // now you have canvas
            // example thing to do with that canvas:
            var img = document.createElement('img');
            var dimensions = map.getSize();
            img.width = dimensions.x;
            img.height = dimensions.y;
            img.src = canvas.toDataURL();
            document.getElementById('images').innerHTML = '';
            document.getElementById('images').appendChild(img);
        });

我目前正在使用这个版本的小册子图片

https://github.com/mapbox/leaflet-image/edit/gh-pages/leaflet-image.js

【讨论】：