前言
在快节奏的现代生活中,如何快速找到身边的免费运动场所一直是市民关心的话题。WebGIS 技术通过将地理信息与网络技术结合,为这类需求提供了直观的解决方案。Leaflet 作为轻量级的开源地图库,配合天地图丰富的地理数据资源,非常适合构建此类可视化应用。
本案例旨在基于 Leaflet 和天地图,构建一个长沙市免费运动场所的 WebGIS 可视化平台。通过整合位置、类型、设施等信息,用户可以在地图上直观查看分布情况,点击图标获取详细信息,并通过搜索功能快速定位。
一、免费运动场所数据整理
1、数据来源与处理
基础数据来源于公开整理的免费运动场地列表。原始数据主要包含中文地址描述,缺乏经纬度信息。为了在地图上准确展示,需要将这些地名转换为坐标。
| 序号 | 所属范围 | 位置信息 |
| 1 | 开福区东风路立交桥 | 东风路与三一大道交会处 |
| 2 | 芙蓉区花侯路浏阳河大桥 | 芙蓉区花侯路浏阳河大桥下方 |
| 3 | 梅溪湖街道梅园社区 | 导航梅岭国际小区南门,进门左拐进入小区,在 8 栋后面 |
| 4 | 湖南大学附属中学对面 | 湖南大学附属中学对面,联丰路桥下 |
| 5 | 洋湖街道 | 湘府路大桥西附近 |
| 6 | 天顶街道天源社区、雷锋大道 | 导航静园山庄,进门左拐,或者导航科迪雅静园幼儿园 |
2、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);
}
}
运行测试用例后,控制台会返回对应的解析结果,说明 API 调用成功并获取了经纬度数据。
二、Leaflet 前端地图展示
将数据展示到地图上主要分为两步:准备基础数据,以及在地图上标记具体位置和属性。








