JavaScript大前端java
基于 Leaflet 和天地图的长沙市免费运动场所 WebGIS 可视化
基于 Leaflet 和天地图构建长沙市免费运动场所 WebGIS 可视化平台。通过 Java 后台调用天地图地名解析服务将中文地址转换为经纬度，结合 Leaflet 前端组件实现地图标记与属性展示。整合了 6 处运动场所的位置、交通及设施信息，支持空间分布查看与详情查询，为市民提供便捷的户外健身场地查找工具。
基于 Leaflet 和天地图构建长沙市免费运动场所 WebGIS 可视化平台。通过 Java 后台调用天地图地名解析服务将中文地址转换为经纬度，结合 Leaflet 前端组件实现地图标记与属性展示。整合了 6 处运动场所的位置、交通及设施信息，支持空间分布查看与详情查询，为市民提供便捷的户外健身场地查找工具。
WebGIS（Web 地理信息系统）技术通过将地理信息与网络技术相结合，实现了地理空间数据的在线发布、查询、分析和可视化等功能。Leaflet 以其轻量级、易上手、功能强大等特点，受到开发者青睐，能够方便地与各种地图服务进行集成。天地图作为我国自主研发的地理信息服务平台，提供了丰富的地理空间数据资源，能够为 WebGIS 应用提供坚实的数据基础。
本研究旨在基于 Leaflet 和天地图，构建一个长沙市免费运动场所的 WebGIS 可视化平台。通过对长沙市免费运动场所的数据收集，整合其位置、类型、设施等信息，利用 Leaflet 的地图功能和天地图的数据资源，实现这些运动场所的可视化展示。
本次搜集整理的免费数据源来源于长沙本地宝分享。在文章中梳理出来了主要的运动场所的位置描述信息，如下表所示：
| 序号 | 所属范围 | 位置信息 |
|---|---|---|
| 1 | 开福区东风路立交桥 | 东风路与三一大道交会处 |
| 2 | 芙蓉区花侯路浏阳河大桥 | 芙蓉区花侯路浏阳河大桥下方 |
| 3 | 梅溪湖街道梅园社区 | 导航梅岭国际小区南门，进门左拐进入小区，在 8 栋后面 |
| 4 | 湖南大学附属中学对面 | 湖南大学附属中学对面，联丰路桥下 |
| 5 | 洋湖街道 | 湘府路大桥西附近 |
| 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 中运行以上的测试用例，可以发现输出了相应的值，说明成功调用天地图的 API 实现地名的解析并返回了相应的值。
本节将重点介绍如何使用 Leaflet 来对这些免费的运动场所进行 WebGIS 展示。想要把这些数据展示出来需要经过以下两步。第一步是根据后台的返回准备基础数据，第二步是在地图上展示具体的位置及属性。
这里将根据后台返回的基础数据，组装成我们需要的时空数据和属性数据。完整的数据如下，在每一条数据中，包含了经纬度位置、运动场所名称、所属范围和适宜的运动：
// 待标绘的点
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/>边上还有一个篮球场，地理位置稍偏，适合住雷锋大道的人来。"
}
];
将以上的信息准备完毕后，接下来就可以基于这些位置信息在地图上展示出来。
有了位置之后，就可以使用 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 + "' class='animation-spaceInDown'><div><b>" + (index + 1) + "、" + dataJson.range + " " + dataJson.c_name + "</b><span></span></div>";
html += "<div>推荐交通:" + dataJson.traffic + "</div>";
html += "<div>推荐运动:" + dataJson.sports + "</div>";
html += "</div>";
return html;
}
本节将对长沙市的免费运动场地进行空间展示，首先介绍一下整体的时空位置分布，其次将进行逐个地点的介绍。
本次分享的免费运动场所一共有 6 处，从空间位置来看。比较靠北边的就是静园山庄，最东边的应该是芙蓉区花侯路浏阳河大桥下方，最西边的是位于梅溪湖一期的梅岭国际小区，最南边的是湘府路大桥西。
该场地包括三个半场篮球场，两片多功能运动场（气排球场），两片标准羽毛球场。一个儿童活动区和一块广场舞场地，健身、遛娃两相宜。
该场地不仅设置了体育健身场地，还保留了附近居民比赛存放的龙舟。单独开辟了龙舟文化展示区，让居民在运动的同时，还能感受龙舟文化的魅力。
运动场地较其他小区来说要大，有三片羽毛球场地，管理得很好且很干净，还专门配备了乒乓球桌，背靠幽静的小山坡。
桥下空间改造而来，有三片羽毛球场地，环境很新且有好几个乒乓球桌。
桥下空间很全面，包含一片五人制足球场、两片篮球场、三片羽毛球场、六张乒乓球台。
场地建设时是用作网球场的，但是打羽毛球也可以。边上还有一个篮球场，地理位置稍偏，适合住雷锋大道的人来。
本文研究旨在基于 Leaflet 和天地图，构建一个长沙市免费运动场所的 WebGIS 可视化平台。通过对长沙市免费运动场所的实地调研和数据收集，整合其位置、类型、设施等信息，利用 Leaflet 的地图功能和天地图的数据资源，实现这些运动场所的可视化展示。通过使用天地图来展示这些运动场所信息，不仅方便了大家的浏览，同时还能为后面的管理提供一个入口。文章首先对免费运动场所的信息和空间信息进行介绍，其次介绍了前后端的程序如何编写以及如何进行 WebGIS 的可视化分析，最后对 6 处免费的场所进行了详细的介绍，从所属的位置，适合的运动、交通方式等方面进行。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online