❤
npm
Sign UpSign In

hy-map-hub
TypeScript icon, indicating that this package has built-in type declarations

0.0.76 • Public • Published

command-center-v3-map-service

简介

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

EdgeIE EdgeEdge FirefoxFirefox ChromeChrome SafariSafari
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
    }
  }

/hy-map-hub/

    Package Sidebar

    Install

    npm i hy-map-hub

    Weekly Downloads

    39

    Version

    0.0.76

    License

    none

    Unpacked Size

    1.58 MB

    Total Files

    9

    Last publish

    Collaborators

    • zhangxiaopang
    • cheungkaki
    • danlei
    • danlei-1
    Try on RunKit
    Report malware