基于高德地图API的场景营销系统-全景智图平台

立项背景与目标
本项目立足“精准触达+可视化运营”诉求，解决传统营销对人群理解粗放、投放范围难以核验、标签资产复用效率低的问题。通过将地理位置与标签人群画像能力融合，运营人员可以在地图上直接“看见”潜在人群的地理分布、业务热点与覆盖差异，并以业务语义（网点、区域、商圈、出行特征等）组织营销策略。项目目标：①支持按地理圈选+多维标签组合定义高价值人群；②快速配置与沉淀可复用“营销场景”；③闭环承接短信触达与效果统计；④沉淀标签与费用使用、活动执行的全过程透明化数据资产；⑤为后续拓展更多触达渠道（短信、推送、线下屏、联盟广告等）奠定统一人群底座。

软件功能与核心模块
平台整体能力分层丰富：
(1) 网点分析：围绕任意地点（自建或选择）进行半径/多边形圈选，查看区域人群规模、结构与差异，辅助线下拓展、投放参照。
(2) 线索管理：采集并聚合标记人群（或场景内人群）在既定周期内的关键行为（访问、消费、到店频次等），输出可导出的数据清单与汇总表。
(3) 费用中心：对营销短信、标签采购、人群计算等资源消耗建立费用科目与结余视图，支撑预算控制与内部核算。
(4) 营销中心：核心业务域。包括“营销场景创建”与“短信模板管理”。场景创建支持：地图绘制（多边形/圆形）、多形状组合、标签条件分组（且/或逻辑）、动态估算覆盖量、场景持久化；短信模块支持模板撰写、签名/短链插入、字数与分段提示、状态流转。
(5) 数据报表：沉淀活动发送、转化、消耗、触达覆盖趋势，为复盘与ROI 优化提供量化依据。
(6) 标签营销：展示可采购或已授权标签目录（分类→标签→可选值），模拟标签选购、组合分析与应用到场景过滤的链路。
(7) 统一首页：汇总营销人数、短信发送量/余量、活动执行阶段指标，并提供高频操作入口（新建场景 / 活动 / 短信）。

核心功能聚焦两类：
A. 营销场景创建：通过 Map 交互圈选（多区域叠加），再叠加标签条件（分组逻辑、最大数量控制、层级下拉联动），形成“可保存+可复用”的人群定义。系统以内部估算模型（地理基数 × 标签衰减）近实时反馈预估覆盖，帮助运营快速迭代。
B. 短信模板：用于后续对上述场景人群批量触达，支持插入签名、短链与变量占位，提供内容长度、计费条数提示与状态管理。

整体架构与设计思路
前端采用 Vue2 + Vue Router + Vuex 作为基础框架，结合 Element‑UI 实现通用表单、弹窗、栅格、交互反馈；ECharts 用于后续数据报表可视分析；高德地图（AMap JS API + 自定义覆盖物）承担核心的地理圈选与多形态（圆形 / 多边形）可视化；通信层统一封装 axios，再按业务域拆分 api 目录。前端设计思路是用“人群构建 → 触达内容 → 效果反馈”形成闭环：用户先在营销场景模块通过地图+标签组合生成目标人群，再在短信模块配置内容并最终进入发送/统计环节。后端提供标签目录、地理人群计算、短信模板与发送、费用与报表等 REST 接口；前后端通过语义明确的资源路径 + 约定字段保持解耦。整体架构重心是“地理圈选 + 标签规则树”。

个人负责内容与成果
我独立负责全部前端：框架搭建、目录规划、地图交互实现、标签规则构建器、营销场景生命周期、短信模板功能、费用与统计入口、权限指令、统一数值与格式化工具、打包与版本写入等。项目在 6 个月周期内按计划交付，与广州移动合作顺利上线，功能稳定后支撑公司月均创收 70 万以上。

难点、坑与解决方案
(1) 地图圈选 & 多形状融合：难点在于用户频繁绘制 / 修改 / 删除多边形与圆形，容易出现坐标顺序混淆、覆盖物引用残留、编辑过程中实时估算卡顿。
解决：
约定内部存储统一使用 [lng, lat]，显示层与回显层做一次转换函数（reshowGeoData / GLOBAL.lnglatChange）；
对绘制事件归一成 shapeGroup 数组，删除与清空统一调用 MapView 封装方法，避免直接操作第三方实例造成“脏引用”；
覆盖数估算拆分为两段：地理基数（一次性含随机扰动） + 标签衰减（乘法衰减确保“越筛越少”），减少重复全量计算；
删除形状时即时重算基数并重置 lastTagCount，防止历史标签衰减链拉偏。

(2) 标签多层嵌套组合：需求允许且/或逻辑、组内再分组、最大 7 条限制、层级下拉联动（分类→标签→取值），并且回显时需要异步补齐每个标签的取值候选。难点在于：深层递归状态管理易污染原对象、重复接口请求、保存结构混入 UI 字段。解决：
数据结构明确区分 GROUP / TAG；
严格限制添加 / 删除逻辑入口全部走方法封装，再通过计算数目与启用/禁用按钮状态；
引入衰减估算时先深拷贝再统计，防止在统计过程中意外改写响应式引用。