学习：Mapv 地理信息可视化

第一章 · 简介与快速入门

1.1 Mapv 是什么

Mapv 是一个面向地理信息可视化的开源库，能在地图上高性能地渲染大量点、线、面、热力图、网格图等数据，并内置动画能力。典型应用场景：数据大屏、轨迹回放、热力分布、迁徙可视化。

1.2 环境准备

使用百度地图作为底图，Mapv 通过 new mapv.baiduMapLayer(map, dataSet, options) 挂载可视化，draw: 'simple' 表示绘制散点。

<!-- 百度地图 JS API v2.0（官方示例验证可用的版本，无 callback，同步顺序加载）-->
<script type="text/javascript"
  src="https://api.map.baidu.com/api?v=2.0&ak="></script>
<!-- Mapv 本地构建（build/mapv.js，与官方示例一致；min 版与百度异步加载模型不兼容）-->
<script type="text/javascript" src="mapv-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 指定类型，样式字段各异：

切换图层的关键

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'
}

支持的类型与对应坐标：

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
      });