本文以长沙市青年人才公寓项目为实战背景，基于腾讯位置服务（Tencent Maps）与 Trae AI 开发框架，完整实现集空间数据可视化、公寓地图标注、实时天气叠加、动态交互分析于一体的 GIS 可视化平台。文章从需求分析、技术架构、核心代码实现到系统效果全流程拆解，为 WebGIS、智慧城市、AI + 地图开发提供可直接复用的工程实践方案。

一、前言

1.1 长沙市青年人才公寓项目背景

长沙作为长江中游重要的区域中心城市，近年持续推进 “强省会” 战略与青年人才集聚工程。截至 2026 年最新数据，全市已建成103 个青年人才公寓项目、34168 套房源，面向 35 周岁以下、全日制专科及以上学历青年人才开放，并配套 “租 6 免 1、最高免 6 个月” 租金优惠政策。

海量公寓房源分布于岳麓、天心、雨花、芙蓉、望城、开福、浏阳、宁乡等各区县及产业园区，传统 Excel 表格、静态图片展示模式存在空间位置不直观、查询效率低、数据联动弱、决策支撑不足等痛点。青年人才难以快速匹配 “区位 — 房源 — 配套”，管理部门也缺乏全局化、可视化的房源监控与规划工具。

1.2 基于 GIS 时空赋能的意义

GIS（地理信息系统）的核心价值是 “空间 + 属性” 一体化管理与可视化。将青年人才公寓数据与 GIS 深度融合，可实现三大核心价值：

直观化展示：打破文字 / 表格抽象性，在地图上精准呈现公寓点位、数量、片区分布，一眼掌握全局布局；
智能化查询：支持按区域、租金、户型、距离商圈 / 园区等空间条件筛选，快速定位适配房源；
决策化支撑：通过空间统计、热力分析、配套叠加，为公寓新增选址、房源调配、政策优化提供数据依据。

本项目以腾讯位置服务为地图底座，结合 Trae AI 低代码开发能力，快速构建轻量化、高可用的青年人才公寓 GIS 可视化平台，打通 “数据 — 地图 — 交互 — 分析” 全链路。

二、系统需求及技术架构

2.1 需求简介

构建一个基于腾讯地图的长沙市青年人才公寓可视化平台，实现以下核心目标：

综合展示全市 103 个公寓项目、共计 54,622 套房源的地理分布
支持按名称、地址、辖区多维度搜索与筛选
提供周边 POI 设施搜索（地铁、公交、医院、学校等）
通过图表可视化展示户型、面积、辖区分布数据
集成实时天气展示功能

2.1.1 核心功能需求

基础地图服务：支持长沙市 2D/3D 地图切换、缩放、平移、图层控制（路网、影像、POI）；
公寓数据可视化：103 个公寓点位精准标注、房源数量分级渲染、点击弹窗展示详情（名称、地址、套数、户型、租金、政策）；
空间查询分析：按行政区筛选、周边配套（地铁、学校、园区）检索、距离测量、范围圈选；
多源数据叠加：实时天气图层叠加显示；
动态交互体验：地图缩放联动数据统计、弹窗详情跳转。

2.1.2 非功能需求

兼容性：PC 端主流浏览器适配、响应式布局适配不同分辨率；
性能：地图加载≤2s、点位渲染≤1s、数据查询响应≤300ms；
扩展性：支持后续新增房源数据、接入更多 API、扩展 AI 分析能力。

2.2 数据处理流程

平台数据分为空间数据、业务数据、第三方数据三类，全流程遵循 “采集→清洗→转换→入库→服务→可视化” 标准 GIS 数据链路：

2.3 系统操作时序图

2.3.1 系统页面初始化

2.3.2附近位置检索

2.3.3 数据类图

三、腾讯位置服务赋能实现

3.1 Trae 中 Skill 配置

Trae 作为字节跳动 AI 编辑器，支持通过**Skill（技能）**快速集成第三方服务。本项目通过配置腾讯地图 Skill，实现 AI 直接调用地图能力，大幅降低开发成本。

3.1.1 skill下载

这里我们首先将腾讯地图的地图SKILL下载到本地，将包含SKILL.MD的文件包含依赖的包压缩成一个压缩包。如下所示：

3.1.2 skill配置

这里以Trae solo为例，首先在solo中上传并上传SKILL，

将刚才打包的SKILL内容上传后，可以看到如下配置：

当然，不仅可以在这里使用腾讯地图的SKILL，根据我们的需要，还可以添加其他的技能。如下图：

3.2 Trae AI实现

选好趁手的兵器后，接下来就进入实战环节，后续的内容我们大多数都是使用自然语言描述的方式对系统进行交互，让ai调用技能来实现我们的需求。在系统会话界面，首先将我们搜集的人才公寓excel信息上传到系统，然后输入以下提示词：

`invoke_command:/tencentmap-jsapi-gl-skill` 用这个技能帮我： 使用上传的excel文件作为基础数据，基于腾讯地图开发一个长沙市青年人才公寓可视化的项目。功能列表：1、整体分布 ：综合展示全市的公寓信息 ，要求美观的地图。2、地图列表查询：支持按照名称查询公寓，并在地图上定位  3、调用附近POI，实现附近关注信息展示。4、综合展示今日天气（所属城市为长沙）。5、增加图谱的数据展示（户型和面积） 要求需要注意excel多行合并的情况，一套公寓项目有多带个不同户型房间的项目。

来看看AI工具是如何理解并执行这些指令的：

3.2.1 首轮执行

首先可以看到，大模型会根据我们的指令调用相应的技能，在进行自我思考之后，再来看看它的首轮执行怎么操作：

很清楚的看到，它调用了我们上传的skill，并阅读了他们的真实文档。最终它给出了首轮的执行结果。

大模型对青年人才公寓的excel列表解析后，得到的json数据如下：

3.2.1 有点异常

在首轮交互完成后，我们来验证结果，看以下能否正常输出系统界面。成功的道路是曲折的，肯定不会一下子就顺心，因此肯定会遇到我们的第一个坎，没有构建成功。

它并没有按照我们的预期，对项目成果进行直观的展示。然后AI会根据自己的验证来进行调整，进入第二轮对话，它依然没有正常展示页面，

修改生成的index.html，页面报错。错误如下：1、draw buffers not supported 2、自定义信息窗体解析错误: content内容无法被解析为DOM，将自动转为默认样式。 3、类型错误: InfoWindow.position参数类型错误，应为TMap.LatLng。4、Uncaught TypeError: Cannot read properties of null (reading 'x')。

接着系统根据我们的提示进行自我修复，最终成功完成系统页面的开发，如下图：

3.3 系统核心代码介绍

在右侧的编辑窗口中，我们不仅可以预览网页效果，还能查看系统源码，点击源码可以打开如下页面：

其中就可以看到具体的代码，在网页中定义行政区划及其颜色，具体如下：

var districtColors = {
        '湘江新区': '#409eff', '芙蓉区': '#67c8ff', '天心区': '#f0a040',
        '开福区': '#e06060', '雨花区': '#50d080', '望城区': '#c084fc',
        '长沙县': '#f472b6', '宁乡市': '#fbbf24', '浏阳市': '#34d399'
    };

3.3.1项目列表展示

公寓项目详情展示是一个很重要的功能，除了功能展示还需要实现地理的定位。代码不复杂，就是对获取的数据进行循环，然后输出具体的项目信息。核心代码如下：

// ========== Project List ==========
    function renderProjectList(data) {
        var container = document.getElementById('projectList');
        document.getElementById('listCount').textContent = '共 ' + data.length + ' 个项目';

        if (data.length === 0) {
            container.innerHTML = '<div class="no-result"><div class="no-result-icon">🔍</div><div>未找到匹配的公寓项目</div></div>';
            return;
        }

        var html = '';
        data.forEach(function(p) {
            var totalUnits = p.rooms.reduce(function(s, r) { return s + (r.units || 0); }, 0);
            var types = [];
            p.rooms.forEach(function(r) { if (r.house_type && types.indexOf(r.house_type) === -1) types.push(r.house_type); });
            var color = districtColors[p.district] || '#409eff';
            html += '<div class="project-item" onclick="selectProject(' + p.id + ')" id="item-' + p.id + '">' +
                '<div class="project-name"><span class="project-district" style="background:' + color + '22;color:' + color + ';border:1px solid ' + color + '44">' + p.district + '</span>' + escapeHtml(p.name) + '</div>' +
                '<div class="project-address">📍 ' + escapeHtml(p.address) + '</div>' +
                '<div class="project-meta">' +
                '<span class="project-units">🏠 ' + totalUnits + '套</span>' +
                '<span class="project-types">📐 ' + types.join('、') + '</span>' +
                (p.policy ? '<span class="project-policy">⏰ ' + p.policy + '</span>' : '') +
                '</div></div>';
        });
        container.innerHTML = html;
    }

3.3.2详情信息展示

我们不仅可以在地图上展示项目列表，还可以点击项目信息，实现详细信息的查看，实现代码如下：

function showInfoWindow(p) {
        if (!p.latLng || !infoWindow) return;
        var totalUnits = p.rooms.reduce(function(s, r) { return s + (r.units || 0); }, 0);
        var color = districtColors[p.district] || '#409eff';
        var content = '<div style="padding:8px 4px;min-width:200px;">' +
            '<div style="font-size:15px;font-weight:bold;color:#333;margin-bottom:6px;border-left:3px solid ' + color + ';padding-left:8px;">' + escapeHtml(p.name) + '</div>' +
            '<div style="font-size:12px;color:#666;margin-bottom:4px;">📍 ' + escapeHtml(p.address) + '</div>' +
            '<div style="font-size:12px;color:#888;margin-top:6px;">' +
            '🏠 ' + totalUnits + '套 &nbsp; ⏰ ' + (p.policy || '-') +
            '</div></div>';
        infoWindow.setPosition(p.latLng);
        infoWindow.setContent(content);
        infoWindow.open();
    }

四、系统展示

4.1 整体展示

平台采用 “左侧菜单 + 右侧地图” 经典 GIS 布局，底部为版权与数据更新时间。整体风格简洁专业，配色以蓝色（科技）+ 绿色（宜居）为主，适配智慧城市视觉调性。

4.2 公寓地图展示

点位标注：103 个公寓精准落位，热门公寓（>500 套）用红色高亮标记；
弹窗详情：点击任意点位弹出完整信息，含名称、地址、套数、户型、租金、政策说明、申请链接；
筛选功能：左侧选择行政区（岳麓 / 天心 / 雨花等），地图自动过滤对应区域公寓；

4.3 数据分析

从建设套数来看，宁乡市以6,127套位居首位，占总量的18.1%；开福区以5,268套紧随其后，占比15.6%；湘江新区以4,922套排名第三，占比14.6%。三个辖区合计贡献了全市近一半的房源供给。芙蓉区建设套数最少，为1,396套，占比4.1%。

4.4户型分布

单间公寓是绝对主力户型，占总量的64.2%，充分体现了青年人才公寓以小户型为主的定位。宿舍类产品（含宿舍单间、4/6/8/14床位）合计6,208套，占比18.4%，主要面向产业园区企业员工。一室一厅户型2,807套，占比8.3%，为追求独立生活空间的青年提供了更多选择。两室及以上户型合计1,692套，占比5.0%，主要满足已婚青年人才或家庭居住需求。

五、总结

5.1 项目成果

本项目基于腾讯位置服务 + Trae AI，成功实现长沙市青年人才公寓 GIS 可视化平台，达成以下目标，完整系统演示：

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

长沙市青年人才公寓可视化平台

数据可视化：103 个公寓、3.4 万套房源空间化展示，直观呈现全市布局；
功能完整性：覆盖地图基础、点位渲染、筛选查询、图层叠加、AI 交互、视频演示全能力；
开发效率：借助 Trae Skill 与腾讯地图 API，开发周期缩短 60%，代码量减少 50%；
实用价值：为青年人才找房、管理部门监管、政策规划提供高效工具。

5.2 技术亮点

AI+GIS 融合：Trae Skill 实现自然语言控制地图，降低 GIS 使用门槛；
腾讯位置服务：深度融合腾讯位置服务，为公寓保障提供支撑；
轻量化架构：纯 Web 前端 + 轻量后端，无需 GIS 服务，部署便捷；
高扩展性：支持接入更多城市、更多类型保障房数据，扩展 AI 分析、路线规划功能。

5.3 未来展望

后续可迭代方向：

移动端适配：开发微信小程序 / APP，实现手机端地图查询、导航、申请；
AI 智能推荐：基于用户工作地点、预算、户型偏好，智能推荐最优公寓；
大数据分析：接入人口、产业、交通数据，做公寓供需平衡、选址预测分析；
全国复制：将方案标准化，快速复制到其他城市人才公寓 / 保障房可视化项目。

腾讯位置服务实战：长沙市青年人才公寓 GIS 可视化平台开发

【腾讯位置服务开发者征文大赛】腾讯位置服务实战：长沙市青年人才公寓 GIS 可视化平台开发