跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端java

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

基于 Leaflet 和天地图构建长沙市免费运动场所 WebGIS 可视化平台。通过 Java 后台调用天地图地名解析服务将中文地址转换为经纬度,结合 Leaflet 前端组件实现地图标记与属性展示。涵盖数据整理、后端解析、前端展示及成果验证,提供位置分布、设施信息及交通指引,方便市民查询使用。

樱花落尽发布于 2026/2/24更新于 2026/10/21106 浏览
基于 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 + "; animation-spaceInDown'><div ><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 处免费的场所进行了详细的介绍,从所属的位置,适合的运动、交通方式等方面进行。

目录

  1. 一、免费运动场所数据整理
  2. 1、本地宝数据简介
  3. 2、Java 后台数据解析
  4. 二、Leaflet 前端地图展示
  5. 1、基础数据准备
  6. 2、具体位置及属性标记
  7. 三、成果展示
  8. 1、空间位置分布
  9. 2、东风路立交桥运动公园
  10. 3、芙蓉区花侯路浏阳河大桥下方
  11. 4、梅岭国际小区
  12. 5、湖南大学附属中学对面
  13. 6、湘府路大桥西
  14. 7、静园山庄
  15. 四、总结

更多推荐文章

查看全部
  • OpenAI Whisper 模型版本详解及官方下载链接
  • 2015 款 MacBook Pro 运行最新 macOS 技术指南
  • Qt/C++ 实现逻辑电路设计软件原理图绘制
  • Git 核心操作命令速查手册
  • 飞书机器人对接 Claude Code:手机端 AI 编程自动化方案
  • SpringBoot 自动配置原理深度解析与实战
  • 基于 Java 和天地图 API 检索荣昌卤鹅店位置
  • 微服务容器化与云原生部署:Docker + Kubernetes 实战
  • Face Fusion 人脸融合实战:云端部署与参数调优指南
  • 从零开始学 Llama-Factory:适合初学者的五个实战项目
  • Node.js 环境搭建与 npm 配置实战指南
  • Qt 与 Web 混合编程:CEF 与 QCefView 深度解析
  • OpenClaw Docker 部署:集成飞书钉钉 QQ 机器人的网关方案
  • IO 流为什么只能读取一次?从底层原理到 Web 实战
  • OpenMAIC:清华开源 AI 教学平台,一键生成互动课程
  • Shannon:AI 驱动 Web 应用自动化渗透测试工具
  • Python 函数详解:定义、参数、返回值与作用域
  • AI 编程工具 Codex 全面上手指南
  • FPGA 工程应用经验解析:软件程序与通信协议
  • Mac 命令行安装与使用 Claude Code 终端 AI 编程助手

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online