简介

command-center-v3-map-service 用于兼容不同地图服务商，例如高德、百度、leaflet。

特性

• 统一入参：参数类型的定义取自leaflet
• 统一返回参: 参数类型的定义取自leaflet，实例统一为any，为了兼容
• 统一方法：开发者只需要专注使用二次封装的实例和方法
• 独立地图服务类：在内部去实现不同服务商的功能
• 统一经纬度 内置 CoordinateConverter 类，统一经纬度

文档

文档地址

准备

• node 和 git -项目开发环境
• Vite - 熟悉 vite 特性
• Vue3 - 熟悉 Vue 基础语法
• TypeScript - 熟悉TypeScript基本语法
• Es6+ - 熟悉 es6 基本语法
• 熟悉 不同地图服务商 基本使用

安装使用

• 获取项目代码

git clone https://gitee.com/szhuayu/command-center-v3-map-service.git

• 安装依赖

pnpm install

• 运行

pnpm run dev

• 打包

pnpm  run build

Pull Request:

1. Fork 代码!
2. 创建自己的分支: git checkout -b feat/xxxx
3. 提交的修改: git commit -am 'feat(function): add xxxxx'
4. 推送的分支: git push origin feat/xxxx
5. 提交pull request

Git 贡献提交规范

• 参考 vue 规范 (Angular)

  • feat 增加新功能
  • fix 修复问题/BUG
  • style 代码风格相关无影响运行结果的
  • perf 优化/性能提升
  • refactor 重构
  • revert 撤销修改
  • test 测试相关
  • docs 文档/注释
  • chore 依赖更新/脚手架配置修改等
  • workflow 工作流改进
  • ci 持续集成
  • types 类型定义文件更改
  • wip 开发中

浏览器支持

本地开发推荐使用Chrome 80+ 浏览器

支持现代浏览器, 不支持 IE

| IE | Edge | Firefox | Chrome | Safari | | :-: | :-: | :-: | :-: | :-: | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

架构设计

主要的类

• HyMap（门面类）
• MapProvider（类型约束）
• MapProviderFactory（匹配地图服务）
• CoordinateConverter（经纬度转换）
• 若干地图服务类

工作流程

1、通过 MapProviderFactory 匹配服务商

const Provider = MapProviderFactory.createMapProvider(MapEnum.AMAP)

2、创建 HyMap 实例

const H = ref<HyMap>()

H.value = new HyMap(Provider, SessionCache.getCache('mapConfig') as MapConfig)

3、后续直接通过H.value使用，摘取片段

async function initMap() {
  map.value = await H.value.map('container', {
      minZoom: 8,
      maxZoom: 16,
      center: [22.238567, 113.56097],
      zoom: 13,
      zoomControl: false,
      doubleClickZoom: true,
      attributionControl: false,
      dragging: true,
      boxZoom: true,
      scrollWheelZoom: true
    },
    // 兼容高德初始化流程,这里是leaflet传入的自定义瓦片信息,非必传
    {
      layerType: layerType.value,
      urlTemplates: layersUrlList.value,
    }
  )

  // 地图加载完成
  map.value.on('complete', (data: TileLayer[]) => {
    // 初始化完成后就可以为所欲为了
    // initMarker()
    // initPolyline()
    // initPolygon()
    // initCircle()
  })

  // 地图拖拽
  map.value.on('dragend', () => {})

  // 地图缩放
  map.value.on('zoomend', () => {})
}

目录拆分

├─ src # 主目录
│  ├─ common # 全局组件（所有项目通用的组件）
│  ├─ main.ts # 主入口
│  ├─ router # 路由配置
│  ├─ service # 接口文件
│  ├─ stores # 数据仓库
│  ├─ assets # 静态资源
│  ├─ utils # 工具类(重点在这里)
│  |  |  buildUrl # url拼接工具
│  |  |  cache # 本地存储工具
│  |  |  is # 类型判断工具
│  |  ├─ coordinate-converter # 经纬度转换类
│  |  ├─ hy-map # 地图类
│  |  |  ├─ enums # 地图枚举
│  |  |  ├─ types # 地图类型
│  |  |  ├─ providers # 地图服务商类
│  |  |  ├─ services
│  |  |  |  ├─ HyMap # 门面类
│  |  |  |  ├─ MapProvider # 类型约束类
│  |  |  |  ├─ MapProviderFactory # 地图服务商匹配类
│  └─ views # 页面
└─

HyMap门面类

接收 mapConfig 地图配置、mapProvider 地图服务实例进行参数、方法、返回值的分发

export class HyMap {
  private mapConfig: MapConfig
  private mapProvider: MapProvider

  constructor(provider: MapProvider, config: MapConfig) {
    this.mapConfig = config
    this.mapProvider = provider

    this.initMapConfig()
  }

  initMapConfig() {
    this.mapProvider.initMapConfig(this.mapConfig)
  }

  placeSearch(param: PlaceSearchParam) {
    return this.mapProvider.placeSearch(param)
  }

  reverseGeocoder(param: ReverseGeocoder) {
    this.mapProvider.reverseGeocoder(param)
  }

  map(element: string | HTMLElement, options?: MapOptions, diyOption?: MapDiyOption): Promise<any> {
    return this.mapProvider.map (element, options, diyOption)
  }
}

MapProvider类型约束

约束地图服务商的参数、方法、返回值

export class MapProvider {
  // 初始化地图
  initMapConfig: (config: MapConfig) => void

  // poi搜索
  placeSearch: (param: PlaceSearchParam) => void

  // 逆地理编码
  reverseGeocoder: (param: ReverseGeocoder) => void

  // 初始化地图
  map: (element: string | HTMLElement, options?: MapOptions, diyOption?: MapDiyOption) => Promise<any>
}

MapProviderFactory匹配地图服务

返回的地图实例即为HyMap门面类中的mapProvider

export class MapProviderFactory {
  static createMapProvider(mapEnum: MapEnum): MapProvider {
    switch (mapEnum) {
      case MapEnum.GOOGLE:
        return new GoogleMapProvider()
      case MapEnum.AMAP:
        return new AMapProvider()
      case MapEnum.TIANDITU:
        return new TianMapProvider()
      case MapEnum.LEAFLETJS:
        return new LeafletJsProvider()
      default:
        throw new Error('Invalid map type')
    }
  }
}

CoordinateConverter经纬度转换

拆分两个转换类别 poi 坐标系转换 和 地图 坐标系转换，他们又分别有请求转换、响应转换

// poi 坐标系转换 (目标坐标 To Poi坐标)
  poiReqConverter(coordinate: Coordinate | LatLngTuple): Coordinate | LatLngTuple {
    const mapCoordinate = this.mapConfig.bmCorrect
    const poiCoordinate = this.mapConfig.poiServer.bmCorrect

    switch (true) {
      case mapCoordinate === CoordinateEnum.WGS84 && poiCoordinate === CoordinateEnum.GCJ02:
        return this.WGS84ToGCJ02(coordinate)
      case mapCoordinate === CoordinateEnum.WGS84 && poiCoordinate === CoordinateEnum.BD09:
        return this.WGS84ToBD09(coordinate)
      case mapCoordinate === CoordinateEnum.GCJ02 && poiCoordinate === CoordinateEnum.WGS84:
        return this.GCJ02ToWGS84(coordinate)
      case mapCoordinate === CoordinateEnum.GCJ02 && poiCoordinate === CoordinateEnum.BD09:
        return this.GCJ02ToBD09(coordinate)
      case mapCoordinate === CoordinateEnum.BD09 && poiCoordinate === CoordinateEnum.GCJ02:
        return this.BD09ToGCJ02(coordinate)
      case mapCoordinate === CoordinateEnum.BD09 && poiCoordinate === CoordinateEnum.WGS84:
        return this.BD09ToWGS84(coordinate)
      default:
        return coordinate
    }
  }

  // poi 坐标系转换 (Poi坐标 To 目标坐标)
  poiRespConverter(coordinate: Coordinate | LatLngTuple): Coordinate | LatLngTuple {
    const mapCoordinate = this.mapConfig.bmCorrect
    const poiCoordinate = this.mapConfig.poiServer.bmCorrect

    switch (true) {
      case mapCoordinate === CoordinateEnum.WGS84 && poiCoordinate === CoordinateEnum.GCJ02:
        return this.GCJ02ToWGS84(coordinate)
      case mapCoordinate === CoordinateEnum.WGS84 && poiCoordinate === CoordinateEnum.BD09:
        return this.BD09ToWGS84(coordinate)
      case mapCoordinate === CoordinateEnum.GCJ02 && poiCoordinate === CoordinateEnum.WGS84:
        return this.WGS84ToGCJ02(coordinate)
      case mapCoordinate === CoordinateEnum.GCJ02 && poiCoordinate === CoordinateEnum.BD09:
        return this.BD09ToGCJ02(coordinate)
      case mapCoordinate === CoordinateEnum.BD09 && poiCoordinate === CoordinateEnum.GCJ02:
        return this.GCJ02ToBD09(coordinate)
      case mapCoordinate === CoordinateEnum.BD09 && poiCoordinate === CoordinateEnum.WGS84:
        return this.WGS84ToBD09(coordinate)
      default:
        return coordinate
    }
  }

  // 地图 坐标系转换
  mapReqConverter(coordinate: Coordinate | LatLngTuple): Coordinate | LatLngTuple {
    const mapCoordinate = this.mapConfig.bmCorrect

    switch (mapCoordinate) {
      case CoordinateEnum.WGS84:
        return this.WGS84ToGCJ02(coordinate)
      case CoordinateEnum.GCJ02:
        return coordinate
      case CoordinateEnum.BD09:
        return this.BD09ToGCJ02(coordinate)
      default:
        return coordinate
    }
  }

  // 地图 坐标系转换
  mapRespConverter(coordinate: Coordinate | LatLngTuple): Coordinate | LatLngTuple {
    const mapCoordinate = this.mapConfig.bmCorrect

    switch (mapCoordinate) {
      case CoordinateEnum.WGS84:
        return coordinate
      case CoordinateEnum.GCJ02:
        return this.GCJ02ToWGS84(coordinate)
      case CoordinateEnum.BD09:
        return this.BD09ToWGS84(coordinate)
      default:
        return coordinate
    }
  }