Mapboxgl 生成飞行动画GIF

搞GIS图形的sky.

于 2024-07-15 13:11:05 发布

阅读量1.1k

点赞数 18

分类专栏： mapboxgl 文章标签： mapbox

本文链接：https://blog.csdn.net/u013929284/article/details/140003884

版权

mapboxgl 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在这里插入图片描述

更多精彩内容尽在数字孪生平台，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123

在这里插入图片描述

根据两点生成动画的工具。
首先，找到你想要开始的视图，点击“设置起点视图”，然后调整到目的视图，点击“设置终点视图”。
点击“开始动画”来创建一张gif图。

源码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Fly to a location</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
<script>
   const map = new mapboxgl.Map({
        container: 'map',
        center: [-74.5, 40],
        zoom: 4,
        preserveDrawingBuffer: true
    });

    let guiData

    async function makeAnimation(frames, duration) {
        async function dataURLtoBlob(dataURL) {
            var arr = dataURL.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);

            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }

            return new Blob([u8arr], { type: mime });
        }

        async function saveBlobToFile(blob, fileName) {
            var a = document.createElement('a');
            document.body.appendChild(a);
            a.style = 'display: none';
            var url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = fileName;
            a.click();
            window.URL.revokeObjectURL(url);
        }

        async function startAnimation(frames, duration) {
            return new Promise((resolve, reject) => {
                let msRemaining = duration
                let frameCounter = 0
                let images

                if (guiData.exportPngs) {
                    images = new JSZip();
                } else {
                    images = []
                }

                async function assembleFrame(dataUrl) {
                    return new Promise((resolve, reject) => {
                        const img = new Image();
                        img.src = dataUrl;
                        resolve(img)
                    })
                }

                async function makeImage() {
                    frameCounter++
                    msRemaining = msRemaining - duration / frames;

                    if (msRemaining <= 0) {
                        clearInterval(intervalId);
                        resolve(images)
                    }

                    let dataUrl = map.getCanvas().toDataURL('image/png')
                    if (guiData.exportPngs) {
                        let blob = dataURLtoBlob(dataUrl);
                        images.file(`image${String(frameCounter).padStart(3, '0')}.png`, blob);
                    } else {
                        assembleFrame(dataUrl).then((img) => {
                            images.push(img)
                        })
                    }
                }
                const intervalId = setInterval(makeImage, duration / frames);
            })
        }


        startAnimation(frames, duration).then((images) => {
            if (guiData.exportPngs) {
                images.generateAsync({ type: 'blob' }).then(function (content) {
                    saveBlobToFile(content, 'images.zip');
                });
            } else {
                const gif = new GIF({
                    workers: 5,
                    quality: 10,
                    width: images[0].width,
                    height: images[0].height
                });

                for (var i = 0; i < images.length; i++) {
                    gif.addFrame(images[i], { delay: guiData.frameDelay });
                }

                gif.on('finished', function (blob) {
                    window.open(URL.createObjectURL(blob));
                });

                gif.render();
            }
        })
    }

    let startPosition, endPosition, directoryHandle;

    function addTerrainSource() {
        map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
            'tileSize': 512,
            'maxzoom': 14
        });
    }

    function toggleTerrain(value) {
        if (value) {
            map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
        } else {
            map.setTerrain()
        }
    }

    map.on('load', (e) => {
        addTerrainSource()

        guiData = {
            setStart: function () {
                setStartPosition()
            },
            setEnd: function () {
                setEndPosition()
            },
            duration: 20000,
            frames: 100,
            frameDelay: 100,
            exportPngs: false,
            dryRun: true,
            mapStyle: 'Streets',
            terrain: true,
            startAnimation: function () {
                startAnimation()
            },
            showHelp: function () {
                showHelp()
            },
        };

        let mapStyles = {
            'Light': 'light-v10',
            'Dark': 'dark-v10',
            'Outdoors': 'outdoors-v11',
            'Satellite': 'satellite-v9',
            'Sat Streets': 'satellite-streets-v11',
            'Standard': 'standard',
            'Streets': 'streets-v11',
        }

        const gui = new dat.GUI()
        const positionsFolder = gui.addFolder('位置设置')
        positionsFolder.open()
        let setStart = positionsFolder.add(guiData, "setStart").name('设置起点视图');
        let setEnd = positionsFolder.add(guiData, "setEnd").name('设置终点视图');
        const mapFolder = gui.addFolder('地图设置')
        let mapStyle = mapFolder.add(guiData, "mapStyle", mapStyles).name('地图样式').setValue('standard').onChange(function (value) {
            let mapStylePath = `mapbox://styles/mapbox/${value}`
            map.setStyle(mapStylePath);
            map.once('idle', (e) => {
                addTerrainSource()
                toggleTerrain(guiData.terrain)
            })
        });
        let terrain = mapFolder.add(guiData, "terrain").name('地形').setValue(true).onChange(function (value) {
            toggleTerrain(value)
        })
        const animationFolder = gui.addFolder('动画设置')
        let durationGUI = animationFolder.add(guiData, "duration", 0, 30000, 100).name('持续时间 (ms)');
        let framesGUI = animationFolder.add(guiData, "frames", 0, 1000, 10).name('帧数');
        let frameDelay = animationFolder.add(guiData, "frameDelay", 1, 1000, 10).name('帧延迟');
        let exportPngs = animationFolder.add(guiData, "exportPngs").name('导出 PNG').onChange(function (value) {
            if (value) {
                alert("图片将下载为zip包，帧数太多的话文件也会很大.")
            }
        });
        let dryRun = animationFolder.add(guiData, "dryRun").name('只运行动画').onChange(function (value) { });
        let startAnimationGUI = gui.add(guiData, "startAnimation").name('开始动画');
        let showHelpGUI = gui.add(guiData, "showHelp").name('帮助');

        function setStartPosition() {
            startPosition = map.getFreeCameraOptions();
        }

        function setEndPosition() {
            endPosition = {
                center: map.getCenter(),
                bearing: map.getBearing(),
                pitch: map.getPitch(),
                zoom: map.getZoom()
            }
        }

        function showHelp() {
            alert(`根据两点生成动画的工具。
            首先，找到你想要开始的视图，点击“设置起点视图”，然后调整到目的视图，点击“设置终点视图”。
            点击“开始动画”来创建一张gif图。
                `)
        }

        function startAnimation() {
            if (endPosition == undefined) {
                alert("请设置起止点.")
            } else {
                function fly() {
                    map.flyTo({
                        center: endPosition.center,
                        bearing: endPosition.bearing,
                        pitch: endPosition.pitch,
                        zoom: endPosition.zoom,
                        essential: true,
                        duration: guiData.duration,
                        maxDuration: Infinity
                    });
                    if (!guiData.dryRun) {
                        makeAnimation(guiData.frames, guiData.duration)
                    }
                }

                if (startPosition !== undefined) {
                    map.setFreeCameraOptions(startPosition);
                    map.once('idle', (e) => {
                        fly()
                    })
                } else {
                    fly()
                }
            }
        }
    })


</script>
</body>

</html>

搞GIS图形的sky.

关注

18
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Mapboxgl 生成飞行动画GIF

更多精彩内容尽在数字孪生平台，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123根据两点生成动画的工具。首先，找到你想要开始的视图，点击“设置起点视图”，然后调整到目的视图，点击“设置终点视图”。点击“开始动画”来创建一张gif图。源码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Fly to
复制链接

扫一扫