基于 Leaflet 和天地图实现长沙免费运动场所 WebGIS 可视化

拿到坐标数据后，接下来就是如何在网页上呈现。Leaflet 提供了丰富的 API，我们只需要准备好数据对象，然后遍历添加到地图图层即可。

数据结构组装

我们将解析后的结果整理成统一的 JSON 格式，包含经纬度、名称、交通方式、运动设施等信息。

// 待标绘的点
dataJson = [
  {
    lat: 28.232727,
    lon: 112.987638,
    c_name: "东风路立交桥运动公园",
    range: "开福区东风路立交桥",
    traffic: "可乘坐公交到达附近站点，如东风路站等；自驾周边有相应道路可抵达。",
    color: "#03a9f4",
    sports: "包括三个半场篮球场，两片多功能运动场，标准羽毛球场，儿童活动区和广场舞场地。"
  },
  {
    lat: 28.212437,
    lon: 113.034959,
    c_name: "芙蓉区花侯路浏阳河大桥下方",
    range: "芙蓉区花侯路浏阳河大桥",
    traffic: "乘坐公交可选择靠近浏阳河大桥的站点下车；自驾可通过花侯路等道路抵达。",
    color: "#ff9800",
    sports: "设置了体育健身场地，保留了龙舟文化展示区。"
  }
  // ... 其他点位数据
];

标记与交互实现

为了让地图上的标记不重叠且显示丰富信息，我们使用了 L.divIcon 自定义图标，并配合碰撞检测插件（collision layer）优化显示效果。点击标记时，会弹出包含详细信息的 HTML 内容。

var collisionLayer = L.LayerGroup.collision({ margin: 3 });

for (var i = 0; i < dataJson.length; i++) {
    var html = '';
    var marker = L.marker([dataJson[i].lat, dataJson[i].lon], {
        icon: L.divIcon({
            iconSize: null,
            className: '',
            popupAnchor: [5, 5],
            shadowAnchor: [5, 5],
            html: buildHtml(dataJson[i], i)
        })
    }).addTo(collisionLayer);
}

collisionLayer.addTo(map);

function buildHtml(data, index) {
    var html = '<div style="color:' + data.color + '" class="animation-spaceInDown">';
    html += '<div><b>' + (index + 1) + '、' + data.range + '&nbsp;' + data.c_name + '</b><span></span></div>';
    html += '<div>推荐交通：' + data.traffic + '</div>';
    html += '<div>推荐运动：' + data.sports + '</div>';
    html += '</div>';
    return html;
}

这里需要注意的是，buildHtml 函数负责拼接弹窗内容，通过 CSS 类名控制动画效果，颜色则根据数据动态设置，方便区分不同区域。

成果展示

完成开发后，整个平台可以直观地展示长沙市免费运动场所的空间分布情况。

整体分布

从地图上看，这 6 个点位覆盖了长沙的主要城区。靠北的是静园山庄，最东边位于芙蓉区花侯路浏阳河大桥下方，西边则是梅溪湖一期的梅岭国际小区，南边集中在湘府路大桥西附近。

具体点位详情

• 东风路立交桥运动公园：位于东风路与三一大道交会处。设施齐全，包含篮球场、气排球场、羽毛球场以及儿童活动区，非常适合家庭健身。
• 芙蓉区花侯路浏阳河大桥下方：桥下空间改造的典型，除了常规健身场地，还保留了龙舟文化展示区，运动之余能感受文化氛围。
• 梅岭国际小区：位于梅溪湖街道，背靠小山坡，环境幽静。场地较大，配有羽毛球、乒乓球桌，管理较为规范。
• 湖南大学附属中学对面：联丰路桥下空间，新改造的场地，有三片羽毛球场和多个乒乓球桌，交通便利。
• 湘府路大桥西：洋湖街道附近，桥下空间利用率很高，包含五人制足球场、篮球场、羽毛球场及多张乒乓球台。
• 静园山庄：地理位置稍偏，适合雷锋大道附近的居民。原为网球场，也可打羽毛球，旁边附带篮球场。

总结

本方案通过 Java 后端调用天地图 API 进行地址解析，再结合 Leaflet 前端库实现地图可视化，成功构建了一个免费的运动场所查询平台。这种前后端分离的模式不仅便于维护，也能灵活扩展更多功能，比如搜索定位或路径规划。对于开发者而言，这是一个很好的 WebGIS 入门实战案例，既锻炼了数据处理能力，也熟悉了地图服务的集成流程。