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

在城市建设中，如何快速找到身边的免费运动场地一直是市民关心的话题。利用 WebGIS 技术，我们可以将分散的地理信息整合到一个可视化的平台上。本案例结合轻量级的 Leaflet 框架与国产的天地图服务，构建了一个长沙市免费运动场所的查询系统。

数据准备与解析

数据来源整理

基础数据主要来源于本地生活服务平台整理的公开信息。原始数据通常只有中文地址描述，缺乏经纬度坐标，无法直接在地图上展示。我们需要将这些文本地址转换为具体的空间位置。

序号	所属范围	位置信息
1	开福区东风路立交桥	东风路与三一大道交会处
2	芙蓉区花侯路浏阳河大桥	芙蓉区花侯路浏阳河大桥下方
3	梅溪湖街道梅园社区	导航梅岭国际小区南门，进门左拐进入小区，在 8 栋后面
4	湖南大学附属中学对面	湖南大学附属中学对面，联丰路桥下
5	洋湖街道	湘府路大桥西附近
6	天顶街道天源社区、雷锋大道	导航静园山庄，进门左拐，或者导航科迪雅静园幼儿园

Java 后台地名解析

为了避免全国范围内地名重名导致的定位偏差，我们在调用天地图地名解析服务前，会给地址加上'长沙'等限定词。这里使用 Java 编写一个简单的测试用例来演示如何批量获取坐标。

@Test public void testGeocoder2() throws InterruptedException { 
    String [] loc_name = {"东风路立交桥运动公园","芙蓉区花侯路浏阳河大桥下方","梅岭国际小区","湖南大学附属中学对面","长沙湘府路大桥西","长沙雷锋大道静园山庄"}; 
    for(String name : loc_name) { 
        String keyWord = "%7B'keyWord':'" + name + "'%7D" ; 
        HttpResponse<String> resp = tdtOptService.getGeocoder(keyWord, TDT_SERVER_KEY); 
        System.out.println(name + "===>" +resp.getBodyResult()); 
        Thread.sleep(1500); // 注意控制请求频率，避免触发限流
    } 
}

运行上述代码后，控制台会返回包含经纬度的 JSON 响应。这一步是后续前端展示的基础，确保每个点都能准确落在地图上。

Leaflet 前端地图展示

拿到坐标数据后，接下来就是如何在网页上呈现。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 入门实战案例，既锻炼了数据处理能力，也熟悉了地图服务的集成流程。