目录

  1. 项目背景与目标
  2. 技术选型说明
  3. 天地图地图服务接入
  4. Leaflet 地图基础搭建
  5. 免费运动场所数据获取与处理
  6. 场所数据可视化标注实现
  7. 交互功能扩展
  8. 完整示例代码
  9. 总结与后续扩展

1. 项目背景与目标

  • 目标：构建一个基于网页的互动地图，展示长沙市内的免费运动场所（如公共篮球场、健身点、跑步道等）。
  • 用途：方便市民了解周边运动资源，促进健康生活方式。
  • 特色：利用 Leaflet 作为轻量级开源 GIS 库，结合天地图高质量底图，实现地图可视化展示。

2. 技术选型说明

技术/工具说明
Leaflet开源 JavaScript 地图库，轻量、易用
天地图（Tianditu）中国权威的地图服务平台，支持多种地图类型
GeoJSON标准地理空间数据格式，用于存储运动场所位置
HTML/CSS/JS前端基础技术，搭建页面与交互

3. 天地图地图服务接入

天地图提供的地图服务接口包括矢量地图、影像地图等，支持 WMTS/XYZ 等多种协议。

  • 天地图URL示例（矢量图）：
http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的天地图密钥
  • 获取天地图密钥：需要注册天地图开发者账号并申请。

4. Leaflet 地图基础搭建

在 HTML 中引入 Leaflet 样式和脚本：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>

初始化地图示例：

const map = L.map('map').setView([28.2282, 112.9388], 12); // 长沙中心点经纬度

5. 免费运动场所数据获取与处理

  • 数据来源可以是公开政府数据、开放平台API或者自己采集整理的GeoJSON文件。
  • 示例结构：
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "橘子洲篮球场",
        "type": "篮球场",
        "address": "长沙市岳麓区橘子洲头"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [112.917, 28.199]
      }
    }
    // 其他运动场所...
  ]
}

6. 场所数据可视化标注实现

用 Leaflet 的 L.geoJSON 加载并渲染点标注：

L.geoJSON(sportsData, {
  pointToLayer: (feature, latlng) => {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: 'basketball-icon.png', // 根据类型可切换图标
        iconSize: [32, 32]
      })
    });
  },
  onEachFeature: (feature, layer) => {
    layer.bindPopup(`<strong>${feature.properties.name}</strong><br/>${feature.properties.address}`);
  }
}).addTo(map);

7. 交互功能扩展

  • 图层控制：切换运动场所类别图层（篮球场、跑道、健身区等）。
  • 搜索功能：基于地名或场所名快速定位。
  • 热力图展示：展示运动场所分布密度。
  • 路径规划：引导用户步行或驾车到场所。

8. 完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>长沙免费运动场所地图</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<style>
  #map { height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>

<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script>
  // 初始化地图
  const map = L.map('map').setView([28.2282, 112.9388], 12);

  // 添加天地图矢量图底图
  L.tileLayer('http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的天地图密钥', {
    maxZoom: 18,
    subdomains: ['0','1','2','3','4','5','6','7'],
    attribution: '天地图'
  }).addTo(map);

  // 示例运动场所GeoJSON数据
  const sportsData = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "name": "橘子洲篮球场",
          "type": "篮球场",
          "address": "长沙市岳麓区橘子洲头"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [112.917, 28.199]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "岳麓山健身区",
          "type": "健身区",
          "address": "长沙市岳麓区岳麓山"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [112.945, 28.225]
        }
      }
    ]
  };

  // 加载运动场所数据
  L.geoJSON(sportsData, {
    pointToLayer: (feature, latlng) => {
      return L.marker(latlng);
    },
    onEachFeature: (feature, layer) => {
      layer.bindPopup(`<strong>${feature.properties.name}</strong><br/>${feature.properties.address}`);
    }
  }).addTo(map);

</script>
</body>
</html>

9. 总结与后续扩展

  • 结合 Leaflet 与天地图，实现了长沙免费运动场所的可视化展示。
  • 可以后续引入更多数据、丰富交互和美化UI。
  • 进一步结合用户定位、路径规划、统计分析，打造智能运动生活地图。

如果你需要，我可以帮你写更完整的多图层管理、搜索定位、热力图绘制等进阶功能示例，或者帮你设计后端数据接口，随时告诉我！