一、技术选型与架构设计

1.1 核心组件栈

本案例采用Vue3作为前端框架，其Composition API特性为地图组件开发提供了更灵活的代码组织方式。Leaflet作为轻量级地图库，在保持12KB最小体积的同时，提供完整的地图交互功能，支持矢量渲染、热力图、聚合标记等扩展能力。后端采用Node.js技术栈，Express框架处理HTTP请求，PostgreSQL+PostGIS空间数据库存储地理数据，通过CORS实现跨域资源共享。

1.2 系统架构图

客户端层
├─ Vue3单页应用
│  ├─ Leaflet地图容器
│  └─ 交互控制面板
服务层
├─ Express REST API
│  ├─ 数据查询接口
│  └─ 空间分析服务
数据层
└─ PostgreSQL+PostGIS
   ├─ 充电站坐标表
   └─ 行政区划数据

二、前端实现关键技术

2.1 地图组件封装

创建可复用的LeafletMap.vue组件，通过props接收配置参数：

// 组件props定义
const props = defineProps({
  center: { type: Array, default: [32.04, 118.78] }, // 南京默认坐标
  zoom: { type: Number, default: 12 },
  minZoom: { type: Number, default: 10 },
  maxZoom: { type: Number, default: 18 }
})
// 地图初始化
const mapInstance = ref(null)
onMounted(() => {
  mapInstance.value = L.map('map-container', {
    center: props.center,
    zoom: props.zoom,
    layers: [L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')]
  })
})

2.2 动态数据加载

实现按视口范围加载数据的策略，减少初始加载量：

// 监听地图移动事件
mapInstance.value.on('moveend', async () => {
  const bounds = mapInstance.value.getBounds()
  const { minLat, maxLat, minLng, maxLng } = getBoundsCoordinates(bounds)
  try {
    const response = await fetch(`/api/stations?minLat=${minLat}&...`)
    const newData = await response.json()
    updateMarkers(newData) // 更新地图标记
  } catch (error) {
    console.error('数据加载失败:', error)
  }
})

2.3 性能优化方案

标记聚合：使用Leaflet.markercluster插件处理密集点位
瓦片缓存：配置本地缓存策略减少重复请求
Web Worker：将空间计算任务移至后台线程
按需渲染：监听组件可见性控制地图更新

三、后端服务实现

3.1 空间数据库设计

PostGIS扩展提供强大的空间数据处理能力：

-- 创建充电站表
CREATE TABLE charging_stations (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100),
  location GEOGRAPHY(Point, 4326),
  capacity INTEGER,
  operator VARCHAR(50),
  last_update TIMESTAMP
);
-- 创建空间索引
CREATE INDEX idx_stations_location ON charging_stations USING GIST(location);

3.2 REST API实现

关键接口示例：

// 空间查询接口
app.get('/api/stations', async (req, res) => {
  const { minLat, maxLat, minLng, maxLng } = req.query
  const bbox = `ST_MakeEnvelope(${minLng}, ${minLat}, ${maxLng}, ${maxLat}, 4326)`
  try {
    const query = `
      SELECT id, name, ST_AsText(location) as geom, capacity 
      FROM charging_stations 
      WHERE location && ${bbox}
    `
    const result = await pool.query(query)
    res.json(result.rows.map(row => ({
      ...row,
      location: parseGeoJSON(row.geom) // 转换为GeoJSON格式
    })))
  } catch (error) {
    res.status(500).json({ error: '数据库查询失败' })
  }
})

3.3 服务部署方案

开发环境：使用nodemon实现热重载
生产部署：PM2进程管理+Nginx反向代理

容器化：提供Dockerfile实现环境标准化

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
EXPOSE 3000
CMD ["node", "src/server.js"]

四、完整开发流程

4.1 环境准备

# 前端依赖安装
npm install vue@next leaflet @vueuse/core
# 后端依赖安装
npm install express pg cors dotenv

4.2 配置文件示例

.env环境变量配置：

DB_HOST=localhost
DB_PORT=5432
DB_USER=postgres
DB_PASSWORD=your_password
DB_NAME=charging_stations

4.3 启动命令

# 前端开发模式
npm run dev
# 后端启动
node src/server.js
# 生产构建
npm run build && cp -r dist/* ../backend/public/

五、扩展功能建议

路径规划：集成OSRM或GraphHopper实现导航功能
实时监控：通过WebSocket推送设备状态更新
数据分析：添加充电时段热力图展示
移动适配：优化触摸交互支持移动端访问
三维展示：结合Mapbox GL实现倾斜摄影效果

本案例完整源码包含前后端实现代码、数据库脚本及部署文档，开发者可通过修改配置文件快速适配其他城市的地理数据。项目采用MIT协议开源，既可作为学习地理信息可视化的参考实现，也可直接用于商业项目的基础框架。

基于Vue3与Leaflet的地理信息可视化实践：以充电站分布平台为例