MapLibre GL JS第47课：添加动画图标

最新推荐文章于 2026-06-20 22:27:38 发布

原创最新推荐文章于 2026-06-20 22:27:38 发布 · 173 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #Mapbox #GIS #MapLibre #动画

MapLibre GL JS教程专栏收录该内容

62 篇文章

订阅专栏

📌 学习目标

掌握添加动画图标的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

向地图添加动画图标。

💻 完整代码

代码示例

const map = new maplibregl.Map({
    container: "map",
    style: "https://demotiles.maplibre.org/style.json",
});

const size = 200;

const pulsingDot = {
    width: size,
    height: size,
    data: new Uint8Array(size * size * 4),

    onAdd() {
        const canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;
        this.context = canvas.getContext("2d");
    },

    render() {
        const duration = 1000;
        const t = (performance.now() % duration) / duration;

        const radius = (size / 2) * 0.3;
        const outerRadius = (size / 2) * 0.7 * t + radius;
        const context = this.context;

        context.clearRect(0, 0, this.width, this.height);
        context.beginPath();
        context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
        context.fillStyle = `rgba(255, 200, 200, ${1 - t})`;
        context.fill();

        context.beginPath();
        context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
        context.fillStyle = "rgba(255, 100, 100, 1)";
        context.strokeStyle = "white";
        context.lineWidth = 2 + 4 * (1 - t);
        context.fill();
        context.stroke();

        this.data = context.getImageData(0, 0, this.width, this.height).data;
        map.triggerRepaint();
        return true;
    },
};

map.on("load", () => {
    map.addImage("pulsing-dot", pulsingDot, { pixelRatio: 2 });

    map.addSource("points", {
        type: "geojson",
        data: {
            type: "FeatureCollection",
            features: [{ type: "Feature", geometry: { type: "Point", coordinates: [0, 0] } }],
        },
    });
    map.addLayer({
        id: "points",
        type: "symbol",
        source: "points",
        layout: { "icon-image": "pulsing-dot" },
    });
});

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>向地图添动态图标</title>
    <meta property="og:description" content="向地图添加使用 Canvas API 在运行时生成的动画图标。" />
    <meta property="og:created" content="2025-06-25" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css" />
    <script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        const map = new maplibregl.Map({
            container: "map",
            style: "https://demotiles.maplibre.org/style.json",
        });

        const size = 200;

        const pulsingDot = {
            width: size,
            height: size,
            data: new Uint8Array(size * size * 4),

            onAdd() {
                const canvas = document.createElement("canvas");
                canvas.width = this.width;
                canvas.height = this.height;
                this.context = canvas.getContext("2d");
            },

            render() {
                const duration = 1000;
                const t = (performance.now() % duration) / duration;

                const radius = (size / 2) * 0.3;
                const outerRadius = (size / 2) * 0.7 * t + radius;
                const context = this.context;

                context.clearRect(0, 0, this.width, this.height);
                context.beginPath();
                context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
                context.fillStyle = `rgba(255, 200, 200, ${1 - t})`;
                context.fill();

                context.beginPath();
                context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
                context.fillStyle = "rgba(255, 100, 100, 1)";
                context.strokeStyle = "white";
                context.lineWidth = 2 + 4 * (1 - t);
                context.fill();
                context.stroke();

                this.data = context.getImageData(0, 0, this.width, this.height).data;
                map.triggerRepaint();
                return true;
            },
        };

        map.on("load", () => {
            map.addImage("pulsing-dot", pulsingDot, { pixelRatio: 2 });

            map.addSource("points", {
                type: "geojson",
                data: {
                    type: "FeatureCollection",
                    features: [{ type: "Feature", geometry: { type: "Point", coordinates: [0, 0] } }],
                },
            });
            map.addLayer({
                id: "points",
                type: "symbol",
                source: "points",
                layout: { "icon-image": "pulsing-dot" },
            });
        });
    </script>
</body>
</html>

🔍 代码解析

初始化地图

使用 new maplibregl.Map() 创建地图实例，配置基本参数。本示例的核心特色是展示如何使用 StyleImageInterface 接口创建动态动画图标。

关键配置项

container: 地图容器的 DOM 元素 ID
style: 使用 MapLibre 官方样式 https://demotiles.maplibre.org/style.json

StyleImageInterface 接口实现

const pulsingDot = {
    width: size,
    height: size,
    data: new Uint8Array(size * size * 4),

    onAdd() {
        const canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;
        this.context = canvas.getContext("2d");
    },

    render() {
        const duration = 1000;
        const t = (performance.now() % duration) / duration;
        
        // 绘制外圈脉冲效果
        const radius = (size / 2) * 0.3;
        const outerRadius = (size / 2) * 0.7 * t + radius;
        
        // 更新图像数据并触发重绘
        this.data = context.getImageData(0, 0, this.width, this.height).data;
        map.triggerRepaint();
        return true;
    },
};

添加动画图标到地图

map.on("load", () => {
    map.addImage("pulsing-dot", pulsingDot, { pixelRatio: 2 });
    
    map.addSource("points", {
        type: "geojson",
        data: { type: "FeatureCollection", features: [...] }
    });
    
    map.addLayer({
        id: "points",
        type: "symbol",
        source: "points",
        layout: { "icon-image": "pulsing-dot" }
    });
});

⚙️ 参数说明

参数	类型	必填	默认值	说明
container	string	是	-	地图容器元素的 ID
style	string/object	是	-	地图样式 URL 或内联样式对象

StyleImageInterface 属性

属性	类型	必填	说明
width	number	是	图像宽度（像素）
height	number	是	图像高度（像素）
data	Uint8Array	是	像素数据，RGBA 格式
onAdd	function	是	图层添加时调用，初始化 Canvas
render	function	是	每帧调用，返回 true 表示图像已更新