学习：MapVGL 地理信息可视化

Nan_Shu_6142026-08-15 14:03

第 0 章 环境准备

MapVGL 依赖百度地图 JavaScript API 的 GL 版本（BMapGL）。推荐两种引入方式：

方式一：CDN 直接引入

javascript 复制代码 
<!-- 1. 百度地图 GL 版 JS API -->
<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>
<!-- 2. MapVGL 核心库 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
<!-- 3. 使用 Three.js 相关图层（飞线、3D 模型等）时需额外引入 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>

方式二：NPM 安装

javascript 复制代码 
npm i mapvgl
javascript 复制代码 
import { View, PointLayer } from 'mapvgl';
// 注意：使用 Three 相关图层需单独引入 threelayers

引入后，全局对象为 mapvgl（CDN 方式）或对应 ES Module 导出（NPM 方式）。

第 1 章 核心概念：地图、View、Layer、数据规范

1.1 地图（BMapGL）

MapVGL 必须挂载在一个百度地图实例上。先创建 BMapGL.Map 并初始化中心点、缩放级别。

1.2 View（图层管理器）

mapvgl.View 是图层与地图之间的桥梁，负责管理所有可视化图层。

javascript 复制代码 
var view = new mapvgl.View({
    map: bmapgl,                 // 已创建的 BMapGL 地图实例
    // mapType: 'bmap',          // 可选：'bmap'(2D) / 'blank'(空白底图)
    effects: [                   // 可选：后处理特效数组
        new mapvgl.BloomEffect()
    ]
});

常用方法：

方法 说明
addLayer(layer) 添加图层
removeLayer(layer) 移除单个图层
removeAllLayers() 移除全部图层
getAllLayers() 获取所有图层
hide() / show() 隐藏/显示整个 View
hideLayer(layer) / showLayer(layer) 隐藏/显示单个图层
destroy() 销毁容器

1.3 Layer（可视化图层）

每个 Layer 对应一种可视化类型（点、线、面、热力等），通过 view.addLayer(layer) 添加到 View。

1.4 数据规范（GeoJSON 风格）

MapVGL 使用 GeoJSON 风格的 geometry 结构描述坐标：

javascript 复制代码 
// 点
{ geometry: { type: 'Point',       coordinates: [116.403748, 39.915055] } }
// 线
{ geometry: { type: 'LineString',  coordinates: [[lng, lat], [lng, lat], ...] } }
// 面
{ geometry: { type: 'Polygon',     coordinates: [[[lng, lat], ...]] } }
  • coordinates 永远是 [经度, 纬度]
  • 多数图层支持在 properties 中携带附加信息（如文字、权重、图标等）
  • 数据通过 layer.setData(data) 或构造时的 data 参数绑定

第 2 章 示例：Hello MapVGL（PointLayer）

在百度地图上渲染一个蓝色圆点。

javascript 复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>MapVGL Hello Point</title>
    <style>
        #map_container {
            width: 100%;
            height: 600px
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=E4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
    <script>
        // 1. 创建地图实例
        var bmapgl = new BMapGL.Map('map_container');
        bmapgl.centerAndZoom(new BMapGL.Point(116.403748, 39.915055), 17);
        bmapgl.enableScrollWheelZoom(true);

        // 2. 创建 MapVGL 图层管理器 View
        var view = new mapvgl.View({ map: bmapgl });

        // 3. 创建点图层
        var layer = new mapvgl.PointLayer({
            color: 'rgba(50, 50, 200, 1)',
            shape: 'circle',   // circle 圆形(默认) / square 正方形
            blend: 'lighter',
            size: 8
        });
        view.addLayer(layer);

        // 4. 绑定数据
        layer.setData([{
            geometry: { type: 'Point', coordinates: [116.403748, 39.915055] }
        }]);
    </script>
</body>

</html>

第 3 章 点图层 PointLayer

用于展示大数据量的简单点，继承自 Layer，支持鼠标拾取。

配置参数：

参数 说明 默认值
color 颜色（CSS 颜色） rgba(25,25,250,1)
shape circle 圆 / square 方 circle
size 点大小 5
unit px 像素 / m 米 px
borderWidth 边框宽度 0
borderColor 边框颜色 rgba(255,255,255,0.9)
blend 混合模式（如 lighter） ---

批量随机点示例： examples/03-point-layer.html

javascript 复制代码 
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>PointLayer 批量点</title>
<style>#map_container{width:100%;height:600px}</style></head>
<body>
<div id="map_container"></div>
<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>
<script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
<script>
    var bmapgl = new BMapGL.Map('map_container');
    bmapgl.centerAndZoom(new BMapGL.Point(116.40, 39.91), 12);
    bmapgl.enableScrollWheelZoom(true);
    var view = new mapvgl.View({ map: bmapgl });

    var layer = new mapvgl.PointLayer({
        color: 'rgba(255, 80, 80, 0.9)',
        shape: 'circle',
        size: 4,
        blend: 'lighter'
    });
    view.addLayer(layer);

    // 生成 1000 个随机点
    var data = [];
    for (var i = 0; i < 1000; i++) {
        data.push({
            geometry: {
                type: 'Point',
                coordinates: [116.40 + Math.random() * 0.1, 39.91 + Math.random() * 0.1]
            }
        });
    }
    layer.setData(data);
</script>
</body>
</html>

第 4 章 线图层 LineLayer

用于绘制可指定宽度 的线（WebGL 原生只能画 1px 线）。继承自 Layer，支持拾取与动画（蝌蚪线）。

主要参数： color、width、unit、dashArray、lineCap、lineJoin、antialias，以及动画参数 animation / interval / duration / trailLength。

javascript 复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>LineLayer</title>
    <style>
        #map_container {
            width: 100%;
            height: 1000px
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=E4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
    <script>
        var bmapgl = new BMapGL.Map('map_container');
        bmapgl.centerAndZoom(new BMapGL.Point(116.40, 39.91), 13);
        bmapgl.enableScrollWheelZoom(true);
        var view = new mapvgl.View({ map: bmapgl });

        var layer = new mapvgl.LineLayer({
            color: 'rgba(50, 200, 50, 1)',
            width: 4,
            blend: 'lighter'
            // animation: true, duration: 2, trailLength: 0.5   // 开启蝌蚪线动画
        });
        view.addLayer(layer);

        layer.setData([{
            geometry: {
                type: 'LineString',
                coordinates: [
                    [116.394191, 39.91334],
                    [116.404191, 39.92334],
                    [116.417259, 39.913672]
                ]
            }
        }]);
    </script>
</body>

</html>

第 5 章 面图层 PolygonLayer

展示大数据平面多边形，由 ShapeLayer + LineLayer 组合实现，支持拾取。

主要参数： lineColor、lineWidth、lineJoin、dashArray、fillColor、fillOpacity。

javascript 复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>PolygonLayer</title>
    <style>
        #map_container {
            width: 100%;
            height: 600px
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=E4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
    <script>
        var bmapgl = new BMapGL.Map('map_container');
        bmapgl.centerAndZoom(new BMapGL.Point(116.407, 39.919), 13);
        bmapgl.enableScrollWheelZoom(true);
        var view = new mapvgl.View({ map: bmapgl });

        var layer = new mapvgl.PolygonLayer({
            lineColor: 'rgba(250, 250, 25, 0.6)',
            lineWidth: 4,
            fillColor: 'rgba(25, 25, 250, 0.6)'
        });
        view.addLayer(layer);

        layer.setData([{
            geometry: {
                type: 'Polygon',
                coordinates: [[
                    [116.392394, 39.910683],
                    [116.405976, 39.927727],
                    [116.420996, 39.910351]
                ]]
            },
            properties: { height: 0 }   // 多边形高度
        }]);
    </script>
</body>

</html>

第 6 章 飞线图层 FlyLineLayer（Three 图层）

展示轨迹飞线，基于 Three.js ，使用前必须引入 mapvgl.threelayers.min.js。

主要参数： style(normal/chaos)、color、textureColor、textureWidth、textureLength(0-100)、step(越大越快)。

javascript 复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <title>MapVGL · 简单飞线 FlyLineLayer</title>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        #map_container {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak="></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
    <script>
        var bmapgl = new BMapGL.Map('map_container');
        bmapgl.centerAndZoom(new BMapGL.Point(116.40, 39.91), 12);
        bmapgl.enableScrollWheelZoom(true);
        var view = new mapvgl.View({ map: bmapgl });

        var layer = new mapvgl.FlyLineLayer({
            color: 'rgba(90, 215, 255, 1)',
            textureColor: 'rgba(138, 123, 255, 1)',
            textureWidth: 30,
            textureLength: 80,
            step: 0.15
        });
        view.addLayer(layer);

        layer.setData([{
            geometry: {
                type: 'LineString',
                coordinates: [
                    [116.394191, 39.91334],
                    [116.417259, 39.913672]
                ]
            }
        }]);
    </script>
</body>

</html>

第 7 章 热力图 HeatmapLayer

展示热力图效果，适合密度分布可视化。

主要参数： gradient(0~1 键 → 颜色值)、max、min、size、unit、height(3D 高度，默认 0)。

javascript 复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>HeatmapLayer</title>
    <style>
        #map_container {
            width: 100%;
            height: 600px
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak="></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
    <script>
        var bmapgl = new BMapGL.Map('map_container');
        bmapgl.centerAndZoom(new BMapGL.Point(116.40, 39.91), 12);
        bmapgl.enableScrollWheelZoom(true);
        var view = new mapvgl.View({ map: bmapgl });

        var layer = new mapvgl.HeatmapLayer({
            gradient: {
                0.0: 'rgb(50, 50, 256)',
                0.1: 'rgb(50, 250, 56)',
                0.5: 'rgb(250, 250, 56)',
                1.0: 'rgb(250, 50, 56)'
            },
            max: 100,
            // size 为屏幕像素半径，放大后若太小会导致热力块几乎不可见
            size: 40,
            // 低于该权重的点不绘制，避免放大后稀疏点被忽略
            min: 0
        });
        view.addLayer(layer);

        var data = [];
        for (var i = 0; i < 1500; i++) {
            data.push({
                geometry: {
                    type: 'Point',
                    // 以中心点为中心、半径约 0.04 的较集中分布，放大后仍可见密集热力
                    coordinates: [
                        116.40 + (Math.random() - 0.5) * 0.08,
                        39.91 + (Math.random() - 0.5) * 0.08
                    ]
                },
                // 随机权重，配合 max 形成渐变热力
                properties: {
                    weight: Math.random() * 100
                }
            });
        }
        layer.setData(data);
    </script>
</body>

</html>

第 8 章 柱状热力图 HeatGridLayer

以 3D 柱状形式展示热力，继承自 ShapeLayer，视觉冲击力更强。

主要参数： style(grid/normal)、gridSize(聚合半径)、gradient、max、min、maxHeight、minHeight。

javascript 复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>HeatGridLayer</title>
    <style>
        #map_container {
            width: 100%;
            height: 600px
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=E4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd"></script>
    <!-- 使用百度官方自包含构建：已内置 three 与 ShapeLayer/HeatGridLayer，无需再引 threelayers 或 three.js -->
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.189/dist/mapvgl.min.js"></script>
    <script>
        var bmapgl = new BMapGL.Map('map_container');
        bmapgl.centerAndZoom(new BMapGL.Point(116.40, 39.91), 12);
        bmapgl.enableScrollWheelZoom(true);
        bmapgl.setTilt(60);   // 倾斜视角更显 3D 效果
        var view = new mapvgl.View({ map: bmapgl });

        var layer = new mapvgl.HeatGridLayer({
            style: 'grid',
            gridSize: 500,
            max: 80,
            min: 10,
            gradient: {
                0.0: 'rgb(50, 50, 256)',
                0.1: 'rgb(50, 250, 56)',
                0.5: 'rgb(250, 250, 56)',
                1.0: 'rgb(250, 50, 56)'
            },
            riseTime: 1800,
            maxHeight: 10000,
            minHeight: 200
        });
        view.addLayer(layer);

        var data = [];
        for (var i = 0; i < 800; i++) {
            // 用两次随机取平均，形成中心密、外围疏的分布，让柱子高低错落
            var dx = ((Math.random() + Math.random() + Math.random()) / 3 - 0.5) * 0.12;
            var dy = ((Math.random() + Math.random() + Math.random()) / 3 - 0.5) * 0.12;
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [116.40 + dx, 39.91 + dy]
                },
                properties: {
                    count: Math.floor(Math.random() * 80) + 10
                }
            });
        }
        layer.setData(data);
    </script>
</body>

</html>

第 9 章 点聚合 ClusterLayer

适用于大量点数据的聚合展示，由 PointLayer + IconLayer + TextLayer 组合而成，可自定义聚合半径、颜色梯度、文字与图标。

主要参数： minSize、maxSize、clusterRadius、showText、maxZoom、minZoom、gradient、textOptions、iconOptions、enablePicked。

javascript 复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ClusterLayer</title>
    <style>
        #map_container {
            width: 100%;
            height: 600px
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=E4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
    <script>
        var bmapgl = new BMapGL.Map('map_container');
        bmapgl.centerAndZoom(new BMapGL.Point(116.40, 39.91), 11);
        bmapgl.enableScrollWheelZoom(true);
        var view = new mapvgl.View({ map: bmapgl });

        var layer = new mapvgl.ClusterLayer({
            minSize: 25,
            maxSize: 40,
            clusterRadius: 200,
            showText: true,
            gradient: {
                0.0: 'rgb(50, 50, 256)',
                0.1: 'rgb(50, 250, 56)',
                0.5: 'rgb(250, 250, 56)',
                1.0: 'rgb(250, 50, 56)'
            },
            textOptions: {
                fontSize: 12,
                color: 'white',
                format: function (count) { return count; }
            },
            enablePicked: true,
            onClick: function (e) {
                if (e.dataItem) {
                    console.log('被聚合的原始点：', e.dataItem.children);
                }
            }
        });
        view.addLayer(layer);

        var data = [];
        for (var i = 0; i < 2000; i++) {
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [116.30 + Math.random() * 0.2, 39.85 + Math.random() * 0.12]
                }
            });
        }
        layer.setData(data);
    </script>
</body>

</html>

第 10 章 文字图层 TextLayer

在地图上展示文字标签，支持碰撞检测（重叠时自动隐藏）、平躺地图等。

主要参数： color、fontFamily、fontSize、unit、angle、flat、collides、offset、padding、margin。

文字内容通过数据项 properties.text 指定。

javascript 复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>TextLayer</title>
    <style>
        #map_container {
            width: 100%;
            height: 600px
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=E4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
    <script>
        var bmapgl = new BMapGL.Map('map_container');
        bmapgl.centerAndZoom(new BMapGL.Point(116.403748, 39.915055), 15);
        bmapgl.enableScrollWheelZoom(true);
        var view = new mapvgl.View({ map: bmapgl });

        var layer = new mapvgl.TextLayer({
            color: '#fff',
            fontFamily: 'Microsoft Yahei',
            fontSize: 14,
            flat: false,
            collides: true
        });
        view.addLayer(layer);

        layer.setData([
            { geometry: { type: 'Point', coordinates: [116.403748, 39.915055] }, properties: { text: '天安门' } },
            { geometry: { type: 'Point', coordinates: [116.404748, 39.916055] }, properties: { text: '故宫' } }
        ]);
    </script>
</body>

</html>

第 11 章 后处理特效 effects（BloomEffect / BrightEffect）

在 mapvgl.View 的 effects 数组中传入特效对象，可为整个可视化叠加泛光、发光等后处理效果，让画面更炫酷。

常见特效：

  • BloomEffect：泛光（辉光）效果
  • BrightEffect：提亮/发光效果（参数 threshold、blurSize、clarity）
javascript 复制代码 
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>MapVGL Effects</title>
<style>#map_container{width:100%;height:600px}</style></head>
<body>
<div id="map_container"></div>
<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=E4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd"></script>
<!-- 官方 FlyLineLayer 文档指定的引入方式：unpkg latest 主包 + threelayers（threelayers 自带 three，无需 core，也无需外部 three） -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
<script>
    var bmapgl = new BMapGL.Map('map_container');
    bmapgl.centerAndZoom(new BMapGL.Point(116.40, 39.91), 12);
    bmapgl.enableScrollWheelZoom(true);

    // View 上添加泛光特效
    var view = new mapvgl.View({
        map: bmapgl,
        effects: [ new mapvgl.BloomEffect() ]
    });

    var layer = new mapvgl.FlyLineLayer({
        color: 'rgba(0, 200, 255, 1)',
        textureColor: 'rgba(255, 255, 255, 1)',
        textureWidth: 8,
        textureLength: 40,
        step: 0.1
    });
    view.addLayer(layer);

    layer.setData([{
        geometry: {
            type: 'LineString',
            coordinates: [[116.394191, 39.91334], [116.417259, 39.913672]]
        }
    }]);
</script>
</body>
</html>

第 12 章 工具类 Intensity 颜色值域生成器

mapvgl.Intensity 可按权重值强度返回对应的颜色 或半径大小，常用于散点大小、热力配色等根据数据值动态映射的场景。

配置参数： gradient、max、min、maxSize、minSize。

方法： getColor(val)、getSize(val)、setMax()、setMin()、setMaxSize()、setMinSize()。

相关推荐
皖山文武1 小时前
逻辑代数基础学习笔记--概述
笔记·学习·机器学习
fanged1 小时前
高通学习24--XBL（TODO）
学习
咸甜适中1 小时前
rust语言AI编程学习笔记（五）clap命令行参数解析
学习·rust·ai编程
诗句藏于尽头2 小时前
deepseek harness对接商汤科技免费大模型使用教程
人工智能·科技·学习
chemddd2 小时前
豆包生成 亚马逊链接的视频
学习·交友
weixin_431600442 小时前
NestJS 入门（7）：生命周期钩子——构造函数和 `OnModuleInit` 差在哪？
前端·后端·学习·node.js·nest.js
工业HMI实战笔记2 小时前
解放双手，声控未来：抗噪语音交互如何革新嘈杂车间的HMI操作体验
人工智能·学习·自动化·制造
知识分享小能手3 小时前
线性代数学习教程，从入门到精通，相似矩阵及二次型 — 知识点详解(9）
学习·线性代数·机器学习
小弥儿3 小时前
GitHub今日热榜 | 2026-08-14：OSINT情报工具回流，本地AI赛道升温
人工智能·学习·开源·github
热门推荐
01GitHub 镜像站点02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新04VSCode+CodeX扩展，无法启动052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路07Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费08历年考研数学一、数学二、数学三真题试卷及答案PDF092026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片10如何新建文件夹？ 电脑新建文件夹的4种方法