hy-map-hub v0.0.76
简介
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:
- Fork 代码!
- 创建自己的分支:
git checkout -b feat/xxxx
- 提交的修改:
git commit -am 'feat(function): add xxxxx'
- 推送的分支:
git push origin feat/xxxx
- 提交
pull request
Git 贡献提交规范
feat
增加新功能fix
修复问题/BUGstyle
代码风格相关无影响运行结果的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
}
}
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
6 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago