第一章 · 简介与快速入门1.1 Mapv 是什么Mapv 是一个面向地理信息可视化的开源库能在地图上高性能地渲染大量点、线、面、热力图、网格图等数据并内置动画能力。典型应用场景数据大屏、轨迹回放、热力分布、迁徙可视化。1.2 环境准备使用百度地图作为底图Mapv 通过new mapv.baiduMapLayer(map, dataSet, options)挂载可视化draw: simple表示绘制散点。!-- 百度地图 JS API v2.0官方示例验证可用的版本无 callback同步顺序加载-- script typetext/javascript srchttps://api.map.baidu.com/api?v2.0ak/script !-- Mapv 本地构建build/mapv.js与官方示例一致min 版与百度异步加载模型不兼容-- script typetext/javascript srcmapv-2.0.12/build/mapv.js/script核心三步const dataSet new mapv.DataSet(data); // 1. 数据经纬度 const map new BMap.Map(map); // 2. 百度地图 map.centerAndZoom(new BMap.Point(105, 38), 5); const layer new mapv.baiduMapLayer(map, dataSet, { // 3. 图层 draw: simple, size: 6, fillStyle: rgba(100,255,79,0.8) });第 二 章 · 基础图层点 / 线 / 热力图 / 网格不同图层通过options.draw指定类型样式字段各异图层类型draw值主要样式字段点simplesize/fillStyle/strokeStyle/lineWidth线linestrokeStyle/lineWidth/lineCap热力图heatmapgradient/max/size网格图gridgradient/gridSize/max切换图层的关键let map, layer null; function show(type) { if (layer) { map.removeOverlay(layer); layer null; } // ... 准备 dataSet 与 options ... layer new mapv.baiduMapLayer(map, dataSet, options); }第 三 章 · 数据格式与坐标系1. 数据基本结构GeoJSON 风格{ geometry: { type: Point, coordinates: [lng, lat] }, // 注意是 [经度, 纬度] count: 8, name: 站点A }支持的类型与对应坐标geometry.type含义coordinatesPoint点[lng, lat]LineString线[[lng,lat], [lng,lat], ...]Polygon面[[[lng,lat], ...]]2. 坐标系用百度地图其底图为BD09坐标。示例数据使用近似经纬度WGS84与 BD09 存在几公里到十几公里的偏移演示效果足够若要精确对齐需先做坐标转换WGS84→BD09再传入。3. 按属性动态着色options 支持函数options 里的 size / fillStyle 等可以传函数参数即单条数据实现按属性变化 options: { size: function (data) { return 4 data.count; }, fillStyle: function (data) { return data.count 6 ? red : rgba(79,209,255,0.8); } }第 4 章 · 动画与高级可视化Mapv 内置动画能力关键配置animation必须是对象{ enabled: true }不能写true布尔否则mapv.js:4018报Cannot create property stepsRange on boolean true。时间轴动画数据需带time字段数值必须落在0~100因为本构建内部把stepsRange固定为{start:0,end:100}。Mapv 按当前时间值过滤绘制形成“随时间先后出现 拖尾”的流光效果。可选duration一轮时长 ms默认 5000、trails拖尾长度默认 10。飞线轨迹目前只能用静态LineString作示意。// —— 流光点数据沿一条蛇形曲线轨迹有序分布time 沿轨迹递增 —— // 先生成轨迹上的 N 个等距点用正弦波画出弯曲路径再按序号赋 time(0~100) const N 400; const path []; for (let i 0; i N; i) { const t i / (N - 1); // 0 - 1 const lng 80 t * 45; // 经度 80 - 125 const lat 28 Math.sin(t * Math.PI * 2) * 12; // 纬度随正弦摆动形成弯曲轨迹 path.push([lng, lat]); } const flowData []; for (let i 0; i N; i) { flowData.push({ geometry: { type: Point, coordinates: path[i] }, time: (i / (N - 1)) * 100, // 时间轴字段0~100匹配 stepsRange _size: 7 Math.random() * 5, // 较大的发光半径 fillStyle: rgba(120,255,255,0.95) // 明亮青色光点 }); } const flowSet new mapv.DataSet(flowData); // —— 同一轨迹的静态底光让流光更突出—— const lineSet new mapv.DataSet([{ geometry: { type: LineString, coordinates: path } }]); // 流光点图层animation 必须是对象trails 调大形成明显拖尾光线 const flowLayer new mapv.baiduMapLayer(map, flowSet, { draw: simple, strokeStyle: rgba(180,255,255,0.4), lineWidth: 2, animation: { enabled: true, duration: 4, // 流动更快更明显 trails: 30 // 拖尾长度越大光线越长 } }); // 轨迹底光图层静态线 const lineLayer new mapv.baiduMapLayer(map, lineSet, { draw: simple, strokeStyle: rgba(80,160,200,0.35), lineWidth: 2 });