kdyjs_ui

开店一件事（kdyjs_ui）

青浦区"开店一件事"可视化平台前端。以 Cesium / SkyScenery 三维地图为核心，叠加 GeoServer 发布的专题图层与本地 GeoJSON 数据，提供开店限制查询、开店选址、沿街店铺分析等功能。

功能概览

• 三维地图：天地图影像/矢量、ArcGIS 影像底图切换，支持相机定位、图层显隐、3D 模型加载
• 专题图层：居民小区、机关单位、医院、公园、学校、博物馆、图书馆、机场车站
• 热力图：餐饮、居民服务、零售、体育、卫生、娱乐、住宿行业，以及化妆品/奶粉/宠物用品订单分布
• 店铺数据：沿街店铺、空置店铺、小区及快递分布 GeoJSON 动态加载
• 选址分析：地址搜索（WFS）、点击地图取点、开店限制查询（餐饮油烟、网吧、娱乐场所、烟草零售、噪声污染）
• 辅助功能：用户反馈提交（DMS 内容接口）、天气信息、智小青 AI 助手（iframe）、测距、全屏、移动端适配

技术栈

分类	技术
框架	Vue 3 + Vue Router 4 + Vuex 4（vuex-persistedstate）
UI	Element Plus 2 + @element-plus/icons-vue
三维地图	Cesium / SkyScenery（public/static/plugins）
GIS 服务	GeoServer WMS / WFS
其他	Axios、ECharts、xlsx、Less、turf.js、heatmap.js

目录结构

kdyjs_ui/
├── public/
│   ├── index.html                 # 入口模板，引入 config.js 与地图插件
│   └── static/
│       ├── config/config.js       # 运行时全局配置（webConfig）
│       ├── data/                  # GeoJSON / Excel 业务数据
│       ├── image/                 # 图标与图片资源
│       └── plugins/               # Cesium、SkyScenery、jQuery、热力图等第三方库
├── src/
│   ├── api/                       # login.js 登录鉴权、interface.js 通用接口
│   ├── components/
│   │   ├── Header.vue             # 顶部标题、时间天气、测距、全屏
│   │   └── Map.vue                # 地图初始化、底图切换、图层/模型加载
│   ├── router/index.js            # 路由（/ 首页、/login 登录）
│   ├── store/index.js             # Vuex 状态
│   ├── utils/                     # request.js 请求封装、constant.js、util.js
│   ├── views/
│   │   ├── HomeView.vue           # 首页：地图容器、图层/热力图、店铺数据、用户反馈
│   │   ├── KDYJS.vue              # 开店限制查询 / 开店选址业务面板
│   │   └── Login.vue              # 登录页
│   ├── App.vue
│   └── main.js
├── vue.config.js                  # 打包、代理、别名等配置
└── package.json

快速开始

环境要求：Node.js 14+（建议 16 / 18），npm 6+。

# 安装依赖
npm install

# 本地开发，默认端口 2118
npm run serve

# 生产打包，输出至 dist/
npm run build

开发访问地址：http://localhost:2118/kdyjs/。项目 publicPath 固定为 /kdyjs/，请勿直接访问根路径。

配置说明

运行时配置 public/static/config/config.js

该文件通过 index.html 以全局变量 webConfig 引入，部署后可直接在服务器上修改，无需重新打包：

• OAUTH_URL / SCRIPT_OAUTH_URL：统一认证服务地址
• KDYJS_URL：开店限制查询等业务接口
• PROXY_URL：地址检索代理接口
• DMS_URL：内容管理接口（用户反馈提交）
• GEOSERVER_URL_WMS / GEOSERVER_URL_WFS：GeoServer 服务地址
• layerList / heatmapList / kdwlList：图层与热力图清单，增删图层只需改这里
• allowText / JZText / JZTextCYType：开店限制提示文案
• userFeedback：用户反馈表单对应的栏目与模型 ID
• zxqUrl：智小青 AI 助手地址

开发代理 vue.config.js

devServer.proxy 将以下前缀转发到后端，本地调试时无需处理跨域：

前缀	说明
/proxy_auth	统一认证
/proxy_kdyjs	开店一件事业务服务
/proxy_proxy	地址检索代理
/proxy_dms	内容管理服务
/proxy_zwdt	政务地图服务（HTTPS）

数据与图层

• 矢量数据位于 public/static/data/，包括沿街店铺、空置店铺、小区清单及各行业/快递分布 GeoJSON
• 热力图数据位于 public/static/data/heatMapData/
• 动态图层通过 webConfig.layerList 与 heatmapList 配置，由 GeoServer 以 WMS 方式加载
• 三维模型地址在 webConfig.modelArr 中配置（3D Tiles）

部署

1. 执行 npm run build，产物在 dist/
2. 将 dist/ 部署到站点 /kdyjs/ 目录下
3. 生产环境需在 Nginx（或其他网关）中配置上述 5 个 /proxy_* 前缀的反向代理，规则与 vue.config.js 中 devServer.proxy 保持一致
4. dist/static/config/config.js 可按部署环境单独修改，不必重新构建

路由

路径	页面	说明
/	HomeView	地图首页（默认进入）
/login	Login	账号密码登录

浏览器支持

面向现代浏览器（Chrome / Edge 等），不支持 IE 11；WebGL 为三维地图运行前提。

版本记录

2025-08-07

• 初始版本，包含基础功能
• 登录流程，添加 token 过期检测
• 数据上图功能，添加数据上图功能
• 首页看板图表，添加项目统计
• config.js配置

2025-09-08

• 开店一件事AIURL地址修改
• 增加与AI页面的推荐点数据传输，并在地图上加载数据展示
• 内置登录用户修改
• 适配移动端展示
• 餐饮服务项目提示修改，智小青功能嵌入，允许添加麦克风标签

2025-09-12

• 适配移动端界面，样式展示优化
• 弹窗背景图路径修改
• PC端界面整体风格重新调整
• 按钮样式风格调整，增加地图的放大缩小功能
• 智小青返回推荐图标及弹出修改

2025-09-22

• 开店一件事移动端界面优化
• 增加窗口关闭和登录调用量统计
• 数据更新增加盈浦街道数据

2026-03-26

• 增加其它行业的热力图显示
• 修改提示语和增加赵巷数据
• 不同类型展示不同的提示词
• 文字描述内容修改

2026-05-25

• 增加快递物流功能
• 修改快递物流勾选点击事件
• 修改小区名称内容显示
• 修改浏览器无痕操作

2026-05-27

• 增加宠物数据功能
• 修改点击图层显示的效果

2026-06-10

• 底图TDT显示异常，进行TDT替换，双击事件异常修改

2026-10-21

• 沿街店铺数据增加分类功能
• 地图上按沿街店铺分类展示不同类型的图标
• 弹框增加类型描述信息，区分是哪种类型
• 分类多选功能，选择不同类型展示不同相关的数据