基于 Leaflet 和天地图的免费运动场所 WebGIS 可视化

前言

在当今快节奏的现代生活中，人们对于健康生活方式的追求愈发强烈，运动健身成为众多市民日常生活的重要组成部分。长沙市作为湖南省的省会城市，拥有众多的运动场所，从专业的体育场馆到社区内的小型健身场地，种类丰富。然而，对于广大市民而言，如何快速、便捷地找到身边的免费运动场所，以及了解这些场所的相关信息，如位置、设施、开放时间等，一直是一个难题。WebGIS（Web 地理信息系统）技术的出现和发展，为解决这一问题提供了新的思路和方法。它通过将地理信息与网络技术相结合，实现了地理空间数据的在线发布、查询、分析和可视化等功能，为用户提供了一个直观、便捷的地理信息获取平台。

在众多的 WebGIS 开发框架中，Leaflet 以其轻量级、易上手、功能强大等特点，受到了广大开发者的青睐。Leaflet 能够方便地与各种地图服务进行集成，实现地图的显示、缩放、平移等基本操作，同时还可以通过插件扩展其功能，如添加标记、绘制图形、进行空间分析等。而天地图作为我国自主研发的地理信息服务平台，提供了丰富的地理空间数据资源，包括矢量地图、影像地图、地形地貌等，其数据精度高、覆盖范围广，能够为 WebGIS 应用提供坚实的数据基础。

本研究旨在基于 Leaflet 和天地图，构建一个长沙市免费运动场所的 WebGIS 可视化平台。通过对长沙市免费运动场所的实地调研和数据收集，整合其位置、类型、设施、开放时间等信息，利用 Leaflet 的地图功能和天地图的数据资源，实现这些运动场所的可视化展示。用户可以通过该平台，在地图上直观地查看长沙市各个免费运动场所的分布情况，点击感兴趣的场所图标，获取详细的场所信息，还可以通过搜索功能快速定位到特定的运动场所。

本文搜集的免费运动场所地点由长沙本地宝提供，参考内容中不包含有经纬度信息。我根据提供的中文地址调用天地图的地名解析服务，将地名转换成对应的经纬度位置，因此非常感谢本地宝的基础数据，我只是在此基础上进行了空间位置的映射，更加方便大家查找相关的位置。博文首先介绍了如何使用天地图服务根据提供的免费运动场所进行解析，然后根据解析的结果使用 Leaflet 组件来进行 WebGIS 展示，为大家提供服务展示。

一、免费运动场所数据整理

本节将重点介绍一下基础数据以及在 Java 后台来构建场所查询地点。为后续的空间展示打下基础。

1、本地宝数据简介

首先需要介绍一下基础的数据来源，本次搜集整理的免费数据源来源于长沙本地宝分享。

每次想运动运动，都要开始到处找场地。收费？不要。其实长沙有很多很多的免费的运动场地哦！

篮球、羽毛球、排球、乒乓球……

在文章中我们梳理出来了主要的运动场所的位置描述信息。如下表格所示：

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

2、Java 后台数据解析

为了防止查询的地名地址在全国的区域内有重名的情况，这里在一些地名上加上长沙作为前缀。如：'静园山庄'加上限定词'长沙雷锋大道静园山庄'，以上 6 个地方的限定词加上后完整的查询天地图 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); 
    } 
}

在开发 IDE 中运行以上的测试用例，在 IDE 的控制台可以发现以下输出：

说明我们成功的调用天地图的 API 实现地名的解析并返回了相应的值。

二、Leaflet 前端地图展示

本节将重点介绍如何使用 Leaflet 来对这些免费的运动场所进行 WebGIS 展示。想要把这些数据展示出来需要经过以下两步。第一步是根据后台的返回准备基础数据，第二步是在地图上展示具体的位置及属性。

1、基础数据准备

这里将根据后台返回的基础数据，组装成我们需要的时空数据和属性数据。完整的数据如下，在每一条数据中，包含了经纬度位置、运动场所名称、所属范围和适宜的运动：

// 待标绘的点
var dataJson = [
    {
        lat: 28.232727,
        lon: 112.987638,
        c_name: "东风路立交桥运动公园",
        range: "开福区东风路立交桥",
        traffic: "可乘坐公交到达附近站点，如东风路站等，<br/>下车后步行前往；若选择自驾，周边有相应道路可抵达，<br/>且公园周边有一定停车区域。",
        color: "#03a9f4",
        sports: "包括三个半场篮球场，两片多功能运动场（气排球场），<br/>两片标准羽毛球场。一个儿童活动区和一块广场舞场地，<br/>健身、遛娃两相宜。"
    },
    {
        lat: 28.212437,
        lon: 113.034959,
        c_name: "芙蓉区花侯路浏阳河大桥下方",
        range: "芙蓉区花侯路浏阳河大桥",
        traffic: "乘坐公交可选择靠近浏阳河大桥的站点下车，<br/>再步行前往；自驾可通过花侯路等道路抵达，<br/>周边停车较为方便。",
        color: "#ff9800",
        sports: "不仅设置了体育健身场地，还保留了附近居民比赛存放的龙舟。<br/>单独开辟了龙舟文化展示区，让居民在运动的同时，<br/>还能感受龙舟文化的魅力。"
    },
    {
        lat: 28.195517,
        lon: 112.875721,
        c_name: "梅岭国际小区",
        range: "梅溪湖街道梅园社区",
        traffic: "地铁 2 号线梅溪湖西 4 号口步行到达，<br/>也可以乘坐公交到梅岭公园或看云路采菊路口下",
        color: "#591ee9",
        sports: "运动场地较其他小区来说要大，有三片羽毛球场地，<br/>管理得很好且很干净，还专门配备了乒乓球桌，<br/>背靠幽静的小山坡。"
    },
    {
        lat: 28.139807,
        lon: 112.924884,
        c_name: "湖南大学附属中学对面",
        range: "岳麓街道、罗家嘴立交桥西南角",
        traffic: "地铁 3 号线阳光站 1 号口步行到达，<br/>建议乘坐公交到联丰路潭州大道口公交站，下车只需步行 100m",
        color: "#607d8b",
        sports: "桥下空间改造而来，有三片羽毛球场地，<br/>环境很新且有好几个乒乓球桌。"
    },
    {
        lat: 28.11695,
        lon: 112.9404,
        c_name: "湘府路大桥西",
        range: "洋湖街道",
        traffic: "乘坐公交至湘府路大桥西步行到达",
        color: "#4b29b5",
        sports: "桥下空间很全面，包含一片五人制足球场、两片篮球场、<br/>三片羽毛球场、六张乒乓球台。"
    },
    {
        lat: 28.2442,
        lon: 112.88991,
        c_name: "静园山庄",
        range: "天顶街道天源社区、雷锋大道",
        traffic: "乘坐公交到静园站下，建议自驾",
        color: "#a50b0b",
        sports: "场地建设时是用作网球场的，但是打羽毛球也可以。<br/>边上还有一个篮球场，地理位置稍偏，适合住雷锋大道的人来。"
    }
];

将以上的信息准备完毕后，接下来就可以基于这些位置信息在地图上展示出来。

2、具体位置及属性标记

有了位置之后，就可以使用 Leaflet 来对这些具体的位置进行地图的标记，同时在展示时将所属范围、适合的运动项目也进行了一个简单的展示。关键代码如下：

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

三、成果展示

本节将对长沙市的免费运动场地进行空间展示，也让大家看看这 6 块地方究竟在哪里。首先介绍一下整体的时空位置分布，其次将进行逐个地点的介绍。

1、空间位置分布

本次分享的免费运动场所一共有 6 处，从空间位置来看。比较靠北边的就是静园山庄，最东边的应该是芙蓉区花侯路浏阳河大桥下方，最西边的是位于梅溪湖一期的梅岭国际小区，最南边的是湘府路大桥西。

2、东风路立交桥运动公园

该场地包括三个半场篮球场，两片多功能运动场（气排球场），两片标准羽毛球场。一个儿童活动区和一块广场舞场地，健身、遛娃两相宜。

3、芙蓉区花侯路浏阳河大桥下方

该场地不仅设置了体育健身场地，还保留了附近居民比赛存放的龙舟。单独开辟了龙舟文化展示区，让居民在运动的同时，还能感受龙舟文化的魅力。

4、梅岭国际小区

运动场地较其他小区来说要大，有三片羽毛球场地，管理得很好且很干净，还专门配备了乒乓球桌，背靠幽静的小山坡。

5、湖南大学附属中学对面

桥下空间改造而来，有三片羽毛球场地，环境很新且有好几个乒乓球桌。

6、湘府路大桥西

桥下空间很全面，包含一片五人制足球场、两片篮球场、三片羽毛球场、六张乒乓球台。

7、静园山庄

场地建设时是用作网球场的，但是打羽毛球也可以。边上还有一个篮球场，地理位置稍偏，适合住雷锋大道的人来。

四、总结

以上就是本文的主要内容。本文研究旨在基于 Leaflet 和天地图，构建一个长沙市免费运动场所的 WebGIS 可视化平台。通过对长沙市免费运动场所的实地调研和数据收集，整合其位置、类型、设施、开放时间等信息，利用 Leaflet 的地图功能和天地图的数据资源，实现这些运动场所的可视化展示。通过使用天地图来展示这些运动场所信息，不仅方便了大家的浏览，同时还能为后面的管理提供一个入口。博文首先对免费运动场所的信息和空间信息进行介绍，其次介绍了前后端的程序如何编写以及如何进行 WebGIS 的可视化分析，最后对 6 处免费的场所进行了详细的介绍，从所属的位置，适合的运动、交通方式等方面进行。