一、背景与创意

城市灾害发生时，传统应急疏散方案面临三大核心痛点：纸质地图信息滞后，无法反映实时路况；单一导航策略，遇拥堵即瘫痪；静态数字化预案缺乏灵活性，无法应对灾害演化。

在真实灾害场景中，应急指挥人员需要在极短时间内做出判断：灾害点周边有哪些可用资源？不同疏散路线的风险差异是什么？多个目标优先级如何排序？这往往需要调取地图、联系多个部门、查阅历史数据，耗时数十分钟。

本项目的设计理念是将这一流程压缩到 30 秒内：地图层负责精确的地理计算和路径规划，AI 层负责综合研判与建议生成，两者各司其职、深度互补。系统围绕三个核心动作展开——设定灾害点与影响范围，系统自动搜索周边应急资源、同步规划多条策略不同的疏散路线、AI 实时生成专业疏散建议报告。

---

二、技术架构

用户交互层（灾害设定 / 地图操作 / 结果展示）
       ↓
业务逻辑层（危险区建模 → POI搜索 → 路线规划 → AI报告）
       ↓
腾讯地图能力层（JS API v2 / POI搜索 / 路线规划 / 地理编码）
       ↓
AI 能力层（DeepSeek / 通义千问）

技术栈：HTML5 + CSS3 + 原生 JavaScript + 腾讯地图 JS API v2（qq.maps）+ WebService API + 大模型 API。零框架、零后端依赖，任意 HTTP 服务器即可运行。

---

三、核心功能实现

3.1 地图初始化与危险点标记

腾讯地图 JS API v2 内部使用 document.write() 加载子模块，不能动态创建 <script> 标签，必须用同步 <script src=""> 加载：

<!-- index.html -->
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
<script src="js/app.js"></script>

危险点标记 + 真实地理覆盖范围的圆圈：

S.dangerMarker = new qq.maps.Marker({
  position: new qq.maps.LatLng(lat, lng),
  map: S.map,
});

var radius = parseInt($('#radius-slider').value, 10);
S.dangerCircle = new qq.maps.Circle({
  map: S.map,
  center: new qq.maps.LatLng(lat, lng),
  radius: radius,  // 以米为单位，对应真实地理覆盖范围
  fillColor: new qq.maps.Color(239, 68, 68, 0.18),
  strokeColor: '#ef4444',
  strokeWeight: 2,
});

3.2 周边资源 POI 搜索

使用 WebService API（JSONP 方式，无需后端代理），按类型并发搜索：

function searchNearbyPOIs(lat, lng) {
  var keywords = [];
  if ($('#cb-hospital').checked) keywords.push('医院');
  if ($('#cb-fire').checked)    keywords.push('消防站');
  if ($('#cb-shelter').checked) keywords.push('避难场所');
  if ($('#cb-police').checked)  keywords.push('派出所');
  if ($('#cb-school').checked)  keywords.push('学校');

  keywords.forEach(function (kw) {
    var cb = 'poi_cb_' + Math.random().toString(36).slice(2, 10);
    window[cb] = function (res) {
      if (res && res.status === 0 && res.data) {
        res.data.forEach(function (item) {
          S.pois.push({
            name: item.name,
            address: item.address || '',
            latLng: { lat: item.location.lat, lng: item.location.lng },
            type: kw
          });
        });
      }
    };
    var s = document.createElement('script');
    s.src = 'https://apis.map.qq.com/ws/place/v1/search'
      + '?keyword=' + encodeURIComponent(kw)
      + '&boundary=nearby(' + lat + ',' + lng + ',3000)'
      + '&key=YOUR_KEY&output=jsonp&callback=' + cb;
    document.head.appendChild(s);
  });
}

POI 标记按类型自动区分颜色：

类型	颜色	图标
医院	#ef4444 红色	🏥
消防站	#f97316 橙色	🚒
避难场所	#22c55e 绿色	🏠
派出所	#3b82f6 蓝色	🚔
学校	#a855f7 紫色	🏫

3.3 多策略路线规划

同时规划三条策略不同的疏散路线，颜色区分优先级：

var strategies = [
  { key: 'LEAST_TIME',       label: '最快路线',   color: '#22c55e', priority: 'safe'    },
  { key: 'SHORTEST_DISTANCE', label: '最短路线',   color: '#eab308', priority: 'caution' },
  { key: 'REAL_TRAFFIC',    label: '高风险路线', color: '#ef4444', priority: 'danger'  },
];

strategies.forEach(function (s) {
  var cb = 'route_cb_' + Math.random().toString(36).slice(2, 10);
  window[cb] = function (res) {
    if (res && res.status === 0 && res.result && res.result.routes) {
      var route = res.result.routes[0];
      var coords = decodePolyline(route.polyline);  // polyline 是编码字符串，必须解码
      drawRoute({ label: s.label, color: s.color, coords: coords });
    }
  };
  var s = document.createElement('script');
  s.src = 'https://apis.map.qq.com/ws/direction/v1/driving/'
    + '?from=' + slat + ',' + slng + '&to=' + dlat + ',' + dlng
    + '&policy=' + s.key + '&key=YOUR_KEY&output=jsonp&callback=' + cb;
  document.head.appendChild(s);
});

3.4 AI 应急疏散建议报告

AI 不是替代地图，而是做综合判断：

var prompt = `你是一位城市应急管理专家。请根据以下信息生成"城市灾害应急疏散指挥建议报告"：
- 灾害类型：${disaster}，影响半径：${radius}米
- 周边安全资源点：${poiCount}个
- 已规划疏散路线：${routeInfo || '暂无'}

报告要求：
1. Markdown 格式输出
2. 包含：灾害评估、疏散策略建议、路线风险评估、资源利用建议、注意事项
3. 500-800 字，专业简洁，适合应急指挥人员`;

var response = await fetch('https://api.deepseek.com/chat/completions', {
  method: 'POST',
  headers: { 'Authorization': 'Bearer ' + apiKey, 'Content-Type': 'application/json' },
  body: JSON.stringify({
    model: 'deepseek-chat',
    messages: [{ role: 'user', content: prompt }],
    temperature: 0.3,  // 低温保证输出稳定
  }),
});

---

四、关键技术难点

难点 1：腾讯地图 JS API 的 document.write 问题

动态创建 <script> 标签时，腾讯地图内部 document.write() 报错：

Failed to execute 'write' on 'Document': It isn't possible to write
into a document from an asynchronously-loaded external script

解决：改用同步 <script src=""> 标签，直接放在 HTML 中，不动态注入。

难点 2：Polyline 是编码字符串

路线规划 API 返回的 polyline 类似 eh~cF~u~cVq@，不是坐标数组，直接传给 Polyline 组件会报错。

解决：实现 decodePolyline() 函数，类似 Google Polyline Algorithm：

function decodePolyline(encoded) {
  var len = encoded.length, index = 0, lat = 0, lng = 0, result = [];
  while (index < len) {
    var b, shift = 0, d = 0;
    do { b = encoded.charCodeAt(index++) - 63; d |= (b & 0x1f) << shift; shift += 5; } while (b >= 0x20);
    lat += ((d & 1) ? ~(d >> 1) : (d >> 1));
    shift = 0; d = 0;
    do { b = encoded.charCodeAt(index++) - 63; d |= (b & 0x1f) << shift; shift += 5; } while (b >= 0x20);
    lng += ((d & 1) ? ~(d >> 1) : (d >> 1));
    result.push(new qq.maps.LatLng(lat / 1000000, lng / 1000000));
  }
  return result;
}

难点 3：file:// 协议无法加载地图

直接双击 HTML 文件（file:// 协议）地图无法加载。

解决：启动本地 HTTP 服务器：

python -m http.server 3000
# 访问 http://localhost:3000/evac-planner/

---

五、运行效果

以下展示项目实际运行的四个关键场景，每张截图对应一个核心功能节点：

地图正常加载

启动本地 HTTP 服务器后访问 http://localhost:3000，通过浏览器访问项目地址，腾讯地图完整渲染，左侧为交互地图区域，右侧为功能控制面板。

定位标记危险点和周边资源搜索

输入「天心阁」→ 点「定位」→ 地图出现红色危险区域圆圈。
右侧面板「周边资源分布」显示各类型 POI 数量，地图上彩色标记。

疏散路线规划

同时会标记好路线在地图上显示。后续要增加在右侧路线卡片中点击「🚶 导航到此处」，跳转腾讯地图 App 打开详细导航。

AI 应急疏散建议报告

在界面底部填入 DeepSeek API Key（或通义千问 Key），点击"生成应急疏散建议报告"按钮。系统汇总当前灾害信息、资源分布和路线规划结果构造 Prompt，调用大模型 API 生成报告，并实时渲染到右侧面板中。报告以txt格式呈现，包含风险评估、策略建议和资源调度方案等专业内容。

---

六、总结与展望

本项目完整实现了从地图选点到 AI 报告的端到端应急疏散规划流程，深度整合了腾讯地图的多个核心能力——地图渲染、地理编码、POI 搜索和路线规划——并在此基础上叠加了大模型的专业研判能力。系统的核心价值在于将原本割裂的地图工具与应急知识进行有机融合，让指挥人员在灾害发生的第一时间就能获得空间可视化 + 决策建议的一体化支持。

未来的扩展方向主要集中在以下几个维度：实时路况接入可以让路线拥堵评估更准确；微信小程序版可以将能力延伸到移动端，让疏散人员也能使用；历史案例库的建立可以为未来训练专用应急模型积累数据；多人协作标注功能则能支持多方同时感知灾情，提高协同响应效率。

未来扩展方向：

方向	说明
实时路况接入	让路线拥堵评估更准确
微信小程序版	提升移动端应急可用性
历史案例库	积累数据训练专属应急模型
多人协作标注	支持多方同步险情感知