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 基本语法
- 熟悉 不同地图服务商 基本使用

安装使用

- 获取项目代码

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

- 安装依赖

`bash
pnpm install
`

- 运行

`bash
pnpm run dev
`

- 打包

`bash
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 |

架构设计

$3

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

$3

1、通过 MapProviderFactory 匹配服务商

`typescript
const Provider = MapProviderFactory.createMapProvider(MapEnum.AMAP)
`

2、创建 HyMap 实例

`typescript
const H = ref()

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

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

`typescript
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', () => {})
}
`

$3

`
├─ 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 # 页面
└─
`

$3

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

`typescript

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 {
return this.mapProvider.map (element, options, diyOption)
}
}
`

$3

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

`typescript
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
}
`

$3

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

`typescript
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')
}
}
}
`

$3

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

`typescript
// 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
}
}
``