第 0 章 环境准备MapVGL 依赖百度地图 JavaScript API 的GL 版本BMapGL。推荐两种引入方式方式一CDN 直接引入!-- 1. 百度地图 GL 版 JS API -- script src//api.map.baidu.com/api?v1.0typewebglak你的密钥/script !-- 2. MapVGL 核心库 -- script srchttps://unpkg.com/mapvgl/dist/mapvgl.min.js/script !-- 3. 使用 Three.js 相关图层飞线、3D 模型等时需额外引入 -- script srchttps://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js/script方式二NPM 安装npm i mapvglimport { View, PointLayer } from mapvgl; // 注意使用 Three 相关图层需单独引入 threelayers引入后全局对象为mapvglCDN 方式或对应 ES Module 导出NPM 方式。第 1 章 核心概念地图、View、Layer、数据规范1.1 地图BMapGLMapVGL 必须挂载在一个百度地图实例上。先创建BMapGL.Map并初始化中心点、缩放级别。1.2 View图层管理器mapvgl.View 是图层与地图之间的桥梁负责管理所有可视化图层。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()隐藏/显示整个 ViewhideLayer(layer)/showLayer(layer)隐藏/显示单个图层destroy()销毁容器1.3 Layer可视化图层每个Layer对应一种可视化类型点、线、面、热力等通过view.addLayer(layer)添加到 View。1.4 数据规范GeoJSON 风格MapVGL 使用 GeoJSON 风格的geometry结构描述坐标// 点 { 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 MapVGLPointLayer在百度地图上渲染一个蓝色圆点。!DOCTYPE html html head meta charsetutf-8 / titleMapVGL Hello Point/title style #map_container { width: 100%; height: 600px } /style /head body div idmap_container/div script src//api.map.baidu.com/api?v1.0typewebglakE4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd/script script srchttps://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)shapecircle圆 /square方circlesize点大小5unitpx像素 /m米pxborderWidth边框宽度0borderColor边框颜色rgba(255,255,255,0.9)blend混合模式如lighter—批量随机点示例examples/03-point-layer.html!DOCTYPE html html headmeta charsetutf-8/titlePointLayer 批量点/title style#map_container{width:100%;height:600px}/style/head body div idmap_container/div script src//api.map.baidu.com/api?v1.0typewebglak你的密钥/script script srchttps://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。!DOCTYPE html html head meta charsetutf-8 / titleLineLayer/title style #map_container { width: 100%; height: 1000px } /style /head body div idmap_container/div script src//api.map.baidu.com/api?v1.0typewebglakE4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd/script script srchttps://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展示大数据平面多边形由ShapeLayerLineLayer组合实现支持拾取。主要参数lineColor、lineWidth、lineJoin、dashArray、fillColor、fillOpacity。!DOCTYPE html html head meta charsetutf-8 / titlePolygonLayer/title style #map_container { width: 100%; height: 600px } /style /head body div idmap_container/div script src//api.map.baidu.com/api?v1.0typewebglakE4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd/script script srchttps://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 章 飞线图层 FlyLineLayerThree 图层展示轨迹飞线基于 Three.js使用前必须引入mapvgl.threelayers.min.js。主要参数style(normal/chaos)、color、textureColor、textureWidth、textureLength(0-100)、step(越大越快)。!DOCTYPE html html head meta charsetutf-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleMapVGL · 简单飞线 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 idmap_container/div script src//api.map.baidu.com/api?v1.0typewebglak/script script srchttps://unpkg.com/mapvgl/dist/mapvgl.min.js/script script srchttps://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)。!DOCTYPE html html head meta charsetutf-8 / titleHeatmapLayer/title style #map_container { width: 100%; height: 600px } /style /head body div idmap_container/div script src//api.map.baidu.com/api?v1.0typewebglak/script script srchttps://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。!DOCTYPE html html head meta charsetutf-8 / titleHeatGridLayer/title style #map_container { width: 100%; height: 600px } /style /head body div idmap_container/div script src//api.map.baidu.com/api?v1.0typewebglakE4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd/script !-- 使用百度官方自包含构建已内置 three 与 ShapeLayer/HeatGridLayer无需再引 threelayers 或 three.js -- script srchttps://code.bdstatic.com/npm/mapvgl1.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适用于大量点数据的聚合展示由PointLayerIconLayerTextLayer组合而成可自定义聚合半径、颜色梯度、文字与图标。主要参数minSize、maxSize、clusterRadius、showText、maxZoom、minZoom、gradient、textOptions、iconOptions、enablePicked。!DOCTYPE html html head meta charsetutf-8 / titleClusterLayer/title style #map_container { width: 100%; height: 600px } /style /head body div idmap_container/div script src//api.map.baidu.com/api?v1.0typewebglakE4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd/script script srchttps://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指定。!DOCTYPE html html head meta charsetutf-8 / titleTextLayer/title style #map_container { width: 100%; height: 600px } /style /head body div idmap_container/div script src//api.map.baidu.com/api?v1.0typewebglakE4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd/script script srchttps://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 章 后处理特效 effectsBloomEffect / BrightEffect在mapvgl.View的effects数组中传入特效对象可为整个可视化叠加泛光、发光等后处理效果让画面更炫酷。常见特效BloomEffect泛光辉光效果BrightEffect提亮/发光效果参数threshold、blurSize、clarity!DOCTYPE html html headmeta charsetutf-8/titleMapVGL Effects/title style#map_container{width:100%;height:600px}/style/head body div idmap_container/div script src//api.map.baidu.com/api?v1.0typewebglakE4Ze1rgDdMBqdrNSgCVEQQCiHVaV5xkd/script !-- 官方 FlyLineLayer 文档指定的引入方式unpkg latest 主包 threelayersthreelayers 自带 three无需 core也无需外部 three -- script srchttps://unpkg.com/mapvgl/dist/mapvgl.min.js/script script srchttps://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()。