【腾讯位置服务开发者征文大赛】AI+地图·城市浪费点位地图——点亮城市“闲置角落“，助力环保与城市更新

作者: 吹竹笛的若城 发布时间: 于 2026-04-19 14:46:37 发布
来源: https://blog.csdn.net/2301_78784268/article/details/160308052

文章目录

• 前言项目效果图项目演示项目地址项目实践安装 Skill项目立项核心目标技术底座系统架构核心功能模块开始研发关键实现解析1. 地图初始化与暗色 3D 底图2. 浪费热力图渲染3. 四类点位分层标记4. 点位上报与地理编码5. 一键导航（URI API）6. 完整 API 调用清单交互功能亮点配置与调试总结与展望

前言

城市中存在大量"隐性浪费"：长年关闭的店铺、无人使用的公共空间、夜间彻夜明亮的高能耗广告牌、成堆无人挪动的共享单车……这些浪费分散在城市各角落，难以被统一感知和管理。

本项目尝试用AI + 腾讯位置服务解决这一问题：通过 POI 数据检索、热力可视化与大模型分析，自动识别四类城市浪费点位，并以交互地图的形式将其直观呈现，同时为每处点位生成可落地的改造建议。项目借助WorkBuddy+ 腾讯位置服务 Agent Skill 完成开发，全程 AI 辅助，整体研发效率大幅提升。

项目效果图

项目演示

📹 嵌入式视频: https://live.csdn.net/v/embed/522421

AI+地图·城市浪费点位地图

项目地址

当前项目已经开源并上传到GitCode有需要的同学可以自行下载体验，注意配置自己的key哦 项目地址

项目实践

本项目借助WorkBuddy并结合腾讯位置服务的Agent Skill实现，腾讯位置服务基础能力 Skill 一览表如下：

安装 Skill

在WorkBuddy中安装 Skill 有两种方式：

方式一：直接在技能标签栏中搜索相关 Skill 安装，如下图所示：

方式二：在任务中直接将 Skill 名称告知智能体，让其自动完成安装：

等待 Skill 安装成功后即可开始项目开发。

项目立项

本项目的核心目标是：用 AI 捕捉城市浪费轨迹，用地图激活闲置价值，让每一寸空间都发挥作用。

核心目标

公益层面：精准识别城市空间与资源浪费点位，为环保组织、城市管理部门提供数据支撑，助力可持续发展。

城市更新层面：针对闲置空间、空置店铺等，输出贴合实际的改造建议，推动城市"边角料"空间重生，打造城市更新微场景。

学生课题层面：提供轻量化数据采集、分析、可视化路径，适配学生参赛、课题研究，降低开发门槛，兼顾学术性与实践性。

技术底座

地图渲染与可视化：JavaScript API GL（实现地图底图加载、点位标记、自定义图层、浪费热力图渲染）、数据可视化 JS API（强化热力图、点位分类展示效果）。

点位检索与定位：地点检索 API（检索空置店铺、公共空间、广告牌、共享单车点位）、周边推荐 API（筛选指定范围内的浪费点位）、H5 地图定位组件（获取用户当前位置，查看周边浪费点位）、IP 定位（初始化用户城市，快速加载对应区域数据）。

数据支撑：轨迹云（记录共享单车轨迹，分析堆积点形成规律）、地点云（存储闲置点位信息，关联 POI 详情）、数据魔方（时空大数据分析平台，辅助识别长期空置、高能耗点位）。

AI 与协同：MCP 协议 + 工具调用（AI Agent 自动调度地图检索、热力渲染、路线规划能力）、大模型意图识别（理解用户查询，如"查询某区域闲置公共空间及改造建议"）。

系统架构

下图展示了本项目的整体数据与调用流程：

核心功能模块

依托腾讯位置服务的 POI 数据与 AI 大模型，本项目自动识别城市中四类典型浪费现象，以热力图形式直观呈现浪费分布与严重程度。下表是四类点位的识别逻辑与核心 API 依托：

各点位被标注后，AI 自动按轻度/中度/重度三个等级给出差异化改造建议，覆盖空间活化、节能改造、单车调度等方向。

开始研发

到目前为止，项目前期工作已经准备就绪。接下来将需求整理完成，交给WorkBuddy来实现，如下图所示：

注意：当我们将需求给到WorkBuddy之后，由于尚未配置腾讯位置服务的key，它会主动询问。我们直接告知WorkBuddy后期自行添加 key 即可，如下图所示：

项目开发完成后，WorkBuddy实现的功能汇总如下图所示：

关键实现解析

1. 地图初始化与暗色 3D 底图

项目使用 JSAPI GL 加载暗色个性化样式（style4）并开启 3D 楼块，配合 35° 俯仰角，呈现出科技感十足的城市视觉效果：

var map = new TMap.Map('map', {
  zoom       : 12,
  pitch      : 35,          // 俯仰角，3D 效果更佳
  center     : new TMap.LatLng(23.1291, 113.2644),
  mapStyleId : 'style4',    // 暗色个性化样式
  baseMap    : { type: 'vector', features: ['base', 'building3d'] }
});

2. 浪费热力图渲染

使用TMap.visualization.Heat生成分级热力图，颜色由绿→黄→红对应轻度→重度浪费，同时启用 3D 峰值高度增强视觉辨识度：

var heatLayer = new TMap.visualization.Heat({
  max    : 100,
  min    : 0,
  height : 50,      // 3D 峰值高度
  radius : 40,
  opacity: 0.85,
  gradientColor: {
    0   : '#1a6b3a',   // 无浪费（深绿）
    0.3 : '#52c41a',   // 轻度浪费
    0.6 : '#ffcc00',   // 中度浪费
    1.0 : '#ff0040'    // 重度浪费（深红）
  }
}).addTo(map).setData(heatPoints);

3. 四类点位分层标记

每类浪费点位创建独立的MultiMarker图层，支持重/中/轻三级样式区分，点击后展开右侧详情面板与 AI 改造建议：

var layer = new TMap.MultiMarker({
  id    : 'shop-layer',
  map   : map,
  styles: {
    high: new TMap.MarkerStyle({ width: 26, height: 26, src: svgUrl }),
    mid : new TMap.MarkerStyle({ width: 22, height: 22, src: svgUrl }),
    low : new TMap.MarkerStyle({ width: 18, height: 18, src: svgUrl })
  },
  geometries: points.map(function(p) {
    return { id: p.id, styleId: p.level, position: new TMap.LatLng(p.lat, p.lng) };
  })
});
layer.on('click', function(evt) { showDetailPanel(evt.geometry.properties); });

4. 点位上报与地理编码

市民上报浪费点位时，系统调用地理编码 API 将地址转换为精确坐标，并实时渲染到地图：

// 地址 → 坐标（用于用户上报功能）
jsonpRequest('https://h5gw.map.qq.com/ws/geocoder/v1/', {
  key    : 'none',
  apptag : 'lbs_geocoder',
  address: userInputAddr,
  region : '广州'
}, function(res) {
  if (res.status === 0) {
    var loc = res.result.location; // { lat, lng }
    // 将新点位渲染至地图...
  }
});

5. 一键导航（URI API）

点击任意点位，可一键调起腾讯地图 App 进行导航，适配环保志愿者巡查、城管人员检查等场景：

function navigate(lat, lng, name) {
  var url = 'https://apis.map.qq.com/uri/v1/routeplan'
    + '?type=drive'
    + '&to=' + encodeURIComponent(name)
    + '&tocoord=' + lat + ',' + lng
    + '&referer=' + TMAP_WEBSERVICE_KEY;
  window.open(url, '_blank');
}

6. 完整 API 调用清单

下图为项目所有接口及其用途，开发时可对照使用：

交互功能亮点

项目在基础点位展示之上，还提供了以下实用功能：

• 热力图/点位图/叠加三种显示模式一键切换
• 点位类型筛选：可单独查看某一类浪费点位
• AI 搜索：输入区域/地址关键词，快速定位并加载数据
• 点位上报：市民填写类型与地址后，经 AI 审核（约 1-2 分钟）即上图
• 一键导航：调用腾讯地图 URI API，适配现场巡查场景
• 数据导出：一键导出 CSV（含点位坐标、类型、浪费等级、AI 建议），供课题研究或存档
• 课题模式：提供六步引导（确定范围→采集→分析→可视化→导出→输出建议），帮助学生快速上手

配置与调试

项目开发完成后，前往腾讯云位置服务控制台申请 API Key，并在index.html顶部替换即可：

// JSAPI GL Key —— 用于地图渲染、热力图、可视化
var TMAP_JSAPI_KEY = 'YOUR_JSAPI_KEY';

// WebService Key —— 用于 POI 搜索、地理编码、IP 定位、路线规划
var TMAP_WEBSERVICE_KEY = 'YOUR_WEBSERVICE_KEY';

体验模式说明：未配置正式 Key 时，WebService 调用通过h5gw.map.qq.com+ JSONP 方式运行，支持 IP 定位、POI 搜索、地理编码、路线规划等主要接口；天气查询（/ws/weather/v1/）和电动车路线（/ws/direction/v1/ebicycling/）需正式 Key 开通。

总结与展望

本项目从需求分析、AI Agent 辅助开发到腾讯位置服务多接口协同的全链路实践。借助WorkBuddy，开发者可以将精力集中在需求设计与业务逻辑上，而非繁琐的样板代码,同时腾讯位置服务的时空数据这里做的也不错， 我们直接使用其POI 数据结合ai 进行分析，来实现我们的项目。