Spring Boot如何整合百度地图实现热力图与轨迹绘制？

Spring Boot整合百度地图实现热力图与轨迹绘制，关键问题不是地图API本身，而是后端如何把原始坐标处理成前端能直接消费的数据结构。本文会从接口聚合、图层创建、轨迹刷新三个环节逐步给出实现方法，兼顾传输体积与渲染性能。

设计聚合接口：让后端承担计算压力

原始定位数据通常以大批量明细形式存在，如果直接返回给浏览器，可能达到数万条甚至更多。前端JavaScript一次处理几万条点数据，虽然现代浏览器可以承受，但网络传输和内存占用都不理想。热力图需要的是权重密度而不是原始点，所以让Spring Boot在接口层完成四舍五入聚合，把相近坐标合并成一个点并记录出现次数。轨迹数据则相反，必须严格按时间顺序保留完整节点，但可以按时间窗口过滤，只返回最近一段时间的点。这种后端聚合模式让前端只需关注渲染，也便于后续加入缓存和数据库查询优化。

下面给出核心代码。定义一个热力点传输对象和一个轨迹点传输对象，使用Lombok注解简化样板代码。控制器中通过Service生成模拟数据，实际项目可以将Service替换为数据库查询。为了演示聚合过程，这里使用Java Stream按坐标字符串分组统计相近点位的出现次数，并把个数作为热力图权重。

@Data
@AllArgsConstructor
public class HeatPointDTO {
    private double lng;
    private double lat;
    private int count;
}

@Data
@AllArgsConstructor
public class TrackPointDTO {
    private double lng;
    private double lat;
    private long ts;
    private double speed;
}

@RestController
@RequestMapping("/api/map")
public class MapDataController {

    @GetMapping("/heatmap")
    public List<HeatPointDTO> heatmap() {
        List<OriginalPoint> points = new ArrayList<>();
        points.add(new OriginalPoint(116.404, 39.915, System.currentTimeMillis()));
        points.add(new OriginalPoint(116.405, 39.916, System.currentTimeMillis()));
        points.add(new OriginalPoint(116.405, 39.916, System.currentTimeMillis()));
        points.add(new OriginalPoint(116.410, 39.920, System.currentTimeMillis()));

        Map<String, Integer> grouped = new HashMap<>();
        for (OriginalPoint p : points) {
            String key = round(p.getLng()) + "," + round(p.getLat());
            grouped.put(key, grouped.getOrDefault(key, 0) + 1);
        }
        return grouped.entrySet().stream().map(e -> {
            String[] parts = e.getKey().split(",");
            return new HeatPointDTO(Double.parseDouble(parts[0]), Double.parseDouble(parts[1]), e.getValue());
        }).collect(Collectors.toList());
    }

    @GetMapping("/track")
    public List<TrackPointDTO> track(@RequestParam(defaultValue = "0") long since) {
        List<TrackPointDTO> track = new ArrayList<>();
        track.add(new TrackPointDTO(116.404, 39.915, 1700000000000L, 5.2));
        track.add(new TrackPointDTO(116.408, 39.918, 1700000005000L, 8.1));
        track.add(new TrackPointDTO(116.412, 39.922, 1700000010000L, 12.4));
        track.add(new TrackPointDTO(116.415, 39.925, 1700000015000L, 10.3));
        return track.stream().filter(t -> t.getTs() > since).collect(Collectors.toList());
    }

    private String round(double value) {
        return String.valueOf(Math.round(value * 1000) / 1000.0);
    }
}

接口返回的JSON中count字段直接作为热力图权重，前端无需再做分组统计。开发阶段如果前端页面和Spring Boot分开运行，可以在控制器类上加@CrossOrigin注解，或者写一个全局CORS配置类。正式部署时建议把前端静态文件放到Spring Boot的static目录下，避免跨域问题。

加载地图并叠加热力图

百度地图JavaScript API需要先申请密钥。进入百度地图开放平台创建浏览器端应用，获取AK后，在页面里通过<script>标签引入API脚本。热力图使用HeatmapOverlay类，建议同时引入GL版本的地图库。页面中要准备一个固定高度的容器，例如<div id="map">，并设置CSS高度，否则地图可能被默认高度计算为0而无法显示。下面的示例同时加载了热力图数据接口和轨迹数据接口，并用两个变量保存图层对象，方便后续刷新。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度地图热力图与轨迹</title>
    <style>
        #map { width: 100%; height: 600px; }
        .control { padding: 10px; background: #fff; }
    </style>
</head>
<body>
    <div class="control">
        <button onclick="refreshData()">刷新数据</button>
    </div>
    <div id="map"></div>

    <script src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
    <script src="https://mapv.baidu.com/gl/examples/static/common/js/HeatmapOverlay.js"></script>
    <script>
        var map = new BMapGL.Map("map");
        map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 13);
        var heatOverlay = null;
        var trackLine = null;

        function refreshData() {
            fetch('/api/map/heatmap')
                .then(function(response) { return response.json(); })
                .then(function(data) {
                    var points = data.map(function(item) {
                        return { lng: item.lng, lat: item.lat, count: item.count };
                    });
                    if (heatOverlay) {
                        heatOverlay.setDataSet({ data: points, max: 100 });
                    } else {
                        heatOverlay = new BMapGL.HeatmapOverlay({
                            radius: 30,
                            visible: true,
                            opacity: 0.7,
                            gradient: {
                                0.2: 'rgb(0,0,255)',
                                0.5: 'rgb(0,255,0)',
                                0.8: 'rgb(255,255,0)',
                                1.0: 'rgb(255,0,0)'
                            }
                        });
                        map.addOverlay(heatOverlay);
                        heatOverlay.setDataSet({ data: points, max: 100 });
                    }
                });

            fetch('/api/map/track?since=0')
                .then(function(response) { return response.json(); })
                .then(function(data) {
                    var path = data.map(function(item) {
                        return new BMapGL.Point(item.lng, item.lat);
                    });
                    if (trackLine) {
                        trackLine.setPath(path);
                    } else {
                        trackLine = new BMapGL.Polyline(path, {
                            strokeColor: '#ff5500',
                            strokeWeight: 5,
                            strokeOpacity: 0.9,
                            strokeStyle: 'solid'
                        });
                        map.addOverlay(trackLine);
                    }
                });
        }

        refreshData();
        setInterval(refreshData, 15000);
    </script>
</body>
</html>

热力图的radius控制热力扩散半径，opacity控制整体透明度，gradient可以自定义颜色渐变，默认是蓝色到红色。如果点非常密集，可以适当减小radius避免连成一片；如果点比较稀疏，则增大半径让热力更平滑。后端返回的count字段直接映射到权重，因此聚合粒度会影响最终显示效果。聚合时四舍五入到小数点后3位，大约能把相邻10米内的点合并，适合城市级别的设备分布展示。

绘制轨迹线并增加增量刷新

轨迹线使用BMapGL.Polyline，传入Point数组即可得到连续折线。但如果几分钟产生几千个点，直接绘制会让地图缩放和拖动变得卡顿，这时需要抽稀。常见做法是垂距限值法或Douglas-Peucker算法，Java可以在后端完成，也可以把抽稀逻辑放在前端。前端拿到抽稀后的轨迹，用polyline.setPath更新。起始和结束位置分别放置Marker，展示方向信息。下面演示增量拉取的核心逻辑，通过记录最后一条数据的时间戳，下一次请求只拿新增点。

var lastTs = 0;

function loadTrack() {
    fetch('/api/map/track?since=' + lastTs)
        .then(function(response) { return response.json(); })
        .then(function(data) {
            if (data.length === 0) return;
            var newPoints = data.map(function(item) {
                return new BMapGL.Point(item.lng, item.lat);
            });
            if (trackLine) {
                var oldPath = trackLine.getPath();
                var merged = oldPath.concat(newPoints);
                trackLine.setPath(merged);
            } else {
                trackLine = new BMapGL.Polyline(newPoints, {
                    strokeColor: '#ff5500',
                    strokeWeight: 5,
                    strokeOpacity: 0.9
                });
                map.addOverlay(trackLine);
            }
            var last = data[data.length - 1];
            lastTs = last.ts;
        });
}

setInterval(loadTrack, 15000);

增量刷新最大的好处是减少网络传输和服务端查询压力。后端接口根据since参数过滤小于等于该时间戳的记录，只返回新增部分。前端把旧路径数组和新点合并后再整体更新折线，虽然setPath会重新设置全部点，但对于几百到几千个点的轨迹仍然非常快。如果轨迹点超过五千，建议在后端做抽稀后再返回，或者在请求参数中增加抽稀阈值，避免浏览器卡顿。

定时器要注意清理。页面卸载时需要调用clearInterval，地图实例销毁时可以调用map.clearOverlays()。如果使用Vue或React，要在组件卸载生命周期中处理。另一个容易忽略的问题是热力图和轨迹线使用同一个地图实例，刷新时不要频繁创建新的图层对象，否则会出现图层叠加越来越多、颜色越来越深的问题。

坐标系转换与调试建议

GPS设备上报的是WGS84坐标，而百度地图使用BD-09加密坐标。如果不转换，轨迹和热力点会整体偏移几百米。可以在后端统一转换后返回，也可以在前端加载坐标转换库。下面给出简化的WGS84转BD-09本地算法，不依赖网络接口，适合离线转换。该算法是常用实现，精度足以应对大多数定位展示场景。核心思路是先把WGS84转到GCJ-02，再由GCJ-02转到BD-09。

public class CoordinateUtils {
    private static final double X_PI = 3.14159265358979324 * 3000.0 / 180.0;
    private static final double PI = 3.1415926535897932384626;

    public static double[] wgs84ToBd09(double lng, double lat) {
        double[] gcj = wgs84ToGcj02(lng, lat);
        double z = Math.sqrt(gcj[0] * gcj[0] + gcj[1] * gcj[1]) + 0.00002 * Math.sin(gcj[1] * X_PI);
        double theta = Math.atan2(gcj[1], gcj[0]) + 0.000003 * Math.cos(gcj[0] * X_PI);
        double bdLng = z * Math.cos(theta) + 0.0065;
        double bdLat = z * Math.sin(theta) + 0.006;
        return new double[] { bdLng, bdLat };
    }

    private static double[] wgs84ToGcj02(double lng, double lat) {
        double dLat = transformLat(lng - 105.0, lat - 35.0);
        double dLng = transformLng(lng - 105.0, lat - 35.0);
        double radLat = lat / 180.0 * PI;
        double magic = Math.sin(radLat);
        magic = 1 - 0.00669342162296594323 * magic * magic;
        double sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtMagic) * PI);
        dLng = (dLng * 180.0) / (6378245.0 / sqrtMagic * Math.cos(radLat) * PI);
        double mgLat = lat + dLat;
        double mgLng = lng + dLng;
        return new double[] { mgLng, mgLat };
    }

    private static double transformLat(double x, double y) {
        double ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0;
        return ret;
    }

    private static double transformLng(double x, double y) {
        double ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0;
        return ret;
    }
}

调试时常见问题包括：AK未授权或域名白名单不正确；地图容器高度为0导致空白；接口返回非JSON或字段名不对；HTTPS页面加载HTTP接口被浏览器拦截。排查时可打开浏览器开发者工具查看网络面板和控制台。如果热力图显示不出来，通常先检查HeatmapOverlay脚本是否成功加载，再确认数据集中每个点都有lng、lat和count字段，并且坐标已经转换为BD-09。

整个方案可以替换模拟数据为Redis最新坐标、MySQL历史轨迹，还可以通过WebSocket推送让客户端实时更新。热力图和轨迹的联动也可以加入时间轴筛选，让管理者回放某一时间段的活动分布。这样Spring Boot的后端能力与百度地图的前端表现结合，能快速形成位置可视化模块，为巡检、物流、安防等场景提供直观的数据支撑。

Spring Boot百度地图热力图轨迹修改时间：2026-09-29 16:57:41