Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: yue1123/vue3-baidu-map-gl
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v0.0.40
Choose a base ref
...
head repository: yue1123/vue3-baidu-map-gl
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v1.0.0
Choose a head ref
  • 5 commits
  • 11 files changed
  • 1 contributor

Commits on Nov 22, 2022

  1. feat: update docs content

    yue1123 committed Nov 22, 2022
    Copy the full SHA
    7f0f874 View commit details
  2. docs: update content

    yue1123 committed Nov 22, 2022
    Copy the full SHA
    7f5d537 View commit details
  3. Copy the full SHA
    2e5955d View commit details
  4. docs: update hooks nums

    yue1123 committed Nov 22, 2022
    Copy the full SHA
    23d41b5 View commit details
  5. feat: publish 1.0.0

    yue1123 committed Nov 22, 2022
    Copy the full SHA
    d5a9462 View commit details
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -10,18 +10,20 @@
<p align="center">
<img src="https://img.shields.io/github/license/yue1123/img-previewer?style=flat-square" alt="">
<img src="https://img.shields.io/github/package-json/v/yue1123/vue3-baidu-map-gl?color=f90&style=flat-square" alt="GitHub package.json version (subfolder of monorepo)">
<img alt="npm" src="https://img.shields.io/npm/dw/vue3-baidu-map-gl?label=npm%20downloads&style=flat-square" style="margin-left:10px">
</div>
</p>

基于百度地图 JavaScript GL 版(使用了 WebGL 对地图、覆盖物等进行渲染,支持 3D 视角展示地图) API 封装设计的 Vue3 组件/hooks 库,开箱即用。

开源不易,点亮 🌟star🌟 是支持更新的最大动力 ✌🏻
如果你觉得还不错,点亮 🌟star🌟 是支持更新的最大动力 ✌🏻

[Plauground](https://sfc.vuejs.org/#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)

## :sparkles: 特性

- 🚀 自动加载百度地图 SDK,将百度地图繁琐的 Api 封装进组件,你只需关注组件本身
- 📦 20+ 高质量的开箱即用 Vue 3 组件以及 7+ hooks 封装
- 📦 20+ 高质量的开箱即用 Vue 3 组件以及 8+ hooks 封装
- 📐 遵循直觉的、简约的 Api 设计
- ⚡ Composition Api,更好的性能
- 🔨 完整的 TypeScript 支持,更好的体验
10 changes: 7 additions & 3 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
@@ -20,11 +20,11 @@ export default defineConfig({
link: '/zh/guide/quick-start'
},
{
text: '演练场',
text: '游乐场',
link: 'https://sfc.vuejs.org/#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'
},
{
text: '赞助',
text: '❤️ 赞助',
link: '/sponsor/'
},
{
@@ -43,7 +43,11 @@ export default defineConfig({
link: 'https://lbsyun.baidu.com/index.php?title=open/custom'
},
{
text: '百度地图JSAPI WebGL v1.0类参考',
text: '百度地图开发资源下载',
link: 'https://lbsyun.baidu.com/index.php?title=open/dev-res'
},
{
text: '百度地图GL v1.0类参考',
link: 'https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html'
}
]
4 changes: 4 additions & 0 deletions docs/.vitepress/sidebar.config.zh.ts
Original file line number Diff line number Diff line change
@@ -166,6 +166,10 @@ const sidebarConfig = {
text: 'useAddressGeocoder 地址解析',
link: '/zh/hooks/useAddressGeocoder'
},
{
text: 'usePointConvertor 坐标转换',
link: '/zh/hooks/usePointConvertor'
},
{
text: 'useAreaBoundary 区域边界',
link: '/zh/hooks/useAreaBoundary'
2 changes: 1 addition & 1 deletion docs/index.md
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ title: Vue3 BaiduMap GL
hero:
name: Vue3 BaiduMap GL
text: 易用 & 完整 & 高性能
tagline: 基于 Vue 3.0 和 百度地图GL的高质量地图组件/hooks库
tagline: 基于 Vue 3.0 和 百度地图GL的高质量地图组件+hooks库
image:
src: /logo.png
alt: Vue3 BaiduMap GL
3 changes: 2 additions & 1 deletion docs/zh/guide/quick-start.md
Original file line number Diff line number Diff line change
@@ -3,14 +3,15 @@
<div style="display:flex;justify-content:flex-start;margin-top:15px;">
<img src="https://img.shields.io/github/license/yue1123/img-previewer?style=flat-square" alt="GitHub license" >
<img src="https://img.shields.io/github/package-json/v/yue1123/vue3-baidu-map-gl?color=f90&style=flat-square" alt="" style="margin-left:10px">
<img alt="npm" src="https://img.shields.io/npm/dw/vue3-baidu-map-gl?label=npm%20downloads&style=flat-square" style="margin-left:10px">
</div>

基于百度地图 JavaScript GL 版(使用了 WebGL 对地图、覆盖物等进行渲染,支持 3D 视角展示地图) API 封装设计的 Vue3 组件库,开发体验良好,代码优雅。

## :sparkles: 特性

- 🚀 自动加载百度地图 SDK,将百度地图繁琐的 Api 封装进组件,你只需关注组件本身
- 📦 20+ 高质量的开箱即用 Vue 3 组件以及 7+ hooks 封装
- 📦 20+ 高质量的开箱即用 Vue 3 组件以及 8+ hooks 封装
- 📐 遵循直觉的、简约的 Api 设计
- ⚡ Composition Api,更好的性能
- 🔨 完整的 TypeScript 支持,更好的体验
4 changes: 2 additions & 2 deletions docs/zh/hooks/useAddressGeocoder.md
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ import { useAddressGeocoder } from 'vue3-baidu-map-gl'
<span>纬度 - {{ point?.lat }}</span>
<span>经度 - {{ point?.lng }}</span>
</div>
<div class="state" v-else-if="!isEmpty">
<div class="state" v-else-if="isEmpty">
没有解析到结果 !
</div>
<div class="state" v-else>
@@ -135,7 +135,7 @@ import { useAddressGeocoder } from 'vue3-baidu-map-gl'
<span>纬度 - {{ point?.lat }}</span>
<span>经度 - {{ point?.lng }}</span>
</div>
<div class="state" v-else-if="!isEmpty">没有解析到结果 !</div>
<div class="state" v-else-if="isEmpty">没有解析到结果 !</div>
<div class="state" v-else>解析中...</div>
</div>

205 changes: 205 additions & 0 deletions docs/zh/hooks/usePointConvertor.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
# usePointConvertor 坐标点转换

用于将其他坐标系的坐标转换为百度坐标。

```ts
import { usePointConvertor } from 'vue3-baidu-map-gl'
```

## 示例

<Map @initd="handleInitd" :center="googlePoint">
<template v-if="!isLoading && !isError">
<template v-for="(point, index) in result">
<Marker :position="point"></Marker>
<Label :position="point" style="color:#333;font-size:9px" content="转换后的百度标注(正确)"></Label>
</template>
</template>
<Marker :position="googlePoint"></Marker>
<Label :position="googlePoint" style="color:#333;font-size:9px" content="未转换的谷歌标注(错误)"></Label>
</Map>

<script lang="ts" setup>
import { CoordinatesFromType, CoordinatesToType, usePointConvertor } from 'vue3-baidu-map-gl'
const { convert, result, isLoading, isError } = usePointConvertor()
const googlePoint = { lng: 116.32715863448607, lat: 39.990912172420714 }
function handleInitd() {
convert([googlePoint], CoordinatesFromType['COORDINATES_GCJ02'], CoordinatesToType['COORDINATES_BD09'])
}
</script>

::: details 点击查看代码

<!-- prettier-ignore -->
```html
<Map @initd="handleInitd" :center="googlePoint">
<template v-if="!isLoading && !isError">
<template v-for="(point, index) in result">
<Marker :position="point"></Marker>
<label :position="point" style="color:#333;font-size:9px" content="转换后的百度标注(正确)"></label>
</template>
</template>
<Marker :position="googlePoint"></Marker>
<label :position="googlePoint" style="color:#333;font-size:9px" content="未转换的谷歌标注(错误)"></label>
</Map>

<script lang="ts" setup>
import { CoordinatesFromType, CoordinatesToType, usePointConvertor } from 'vue3-baidu-map-gl'
const { convert, result, isLoading, isError } = usePointConvertor()
const googlePoint = { lng: 116.32715863448607, lat: 39.990912172420714 }
function handleInitd() {
convert([googlePoint], CoordinatesFromType['COORDINATES_GCJ02'], CoordinatesToType['COORDINATES_BD09'])
}
</script>
```

:::

## 用法

```ts
const { result, convert, isLoading, isError, status } = usePointConvertor()
```

:::tip
该 hooks 依赖于 `BMapGL` ,所以需要在 `Map` 组件初始化完毕调用 `convert` 方法后数据才可用
:::

### 参数


### 引用

| 引用 | 描述 | 类型 |
| --------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| result | 目标坐标点数组 | `{ lng: number; lat: number }[]` |
| isLoading | 是否加载中 | `boolean` |
| isError | 是否出错 | `boolean` |
| status | 当前状态 | [`UsePointConvertorStatus`](#usepointconvertorstatus) |
| convert | 点坐标转换方法,需要在`Map`组件`initd`事件触发后才可调用 | `({ lng: number; lat: number }[], `[`CoordinatesFromType, `](#coordinatesfromtype) [`CoordinatesToType`](#coordinatestotype)`) => void` |

### CoordinatesFromType

原坐标类型

```ts
export enum CoordinatesFromType {
/**
* WGS84坐标(GPS标准坐标)
*/
'COORDINATES_WGS84' = 1,
/**
* WGS84的平面墨卡托坐标(搜狗地图坐标)
*/
'COORDINATES_WGS84_MC' = 2,
/**
* GCJ02坐标(火星坐标),即高德地图、腾讯地图、谷歌坐标和MapABC等地图使用的坐标;
*/
'COORDINATES_GCJ02' = 3,
/**
* GCJ02的平面墨卡托坐标(火星坐标对应的墨卡托平面坐标)
*/
'COORDINATES_GCJ02_MC' = 4,
/**
* 百度地图采用的经纬度坐标(bd09ll)
*/
'COORDINATES_BD09' = 5,
/**
* 百度地图采用的墨卡托平面坐标(bd09mc)
*/
'COORDINATES_BD09_MC' = 6,
/**
* 图吧地图坐标
*/
'COORDINATES_MAPBAR' = 7,
/**
* 51地图坐标
*/
'COORDINATES_51' = 8
}
```

### CoordinatesToType

目标坐标类型

```ts
export enum CoordinatesToType {
/**
* GCJ02坐标(火星坐标),即高德地图、腾讯地图、谷歌坐标和MapABC等地图使用的坐标;
*/
'COORDINATES_GCJ02' = 3,
/**
* 百度地图采用的经纬度坐标(bd09ll)
*/
'COORDINATES_BD09' = 5,
/**
* 百度地图采用的墨卡托平面坐标(bd09mc)
*/
'COORDINATES_BD09_MC' = 6
}
```

### UsePointConvertorStatus

:::warning 警告
当转换不被允许的坐标系,如:X→GPS,可能不会响应返回以下错误 code,会拒绝响应,浏览器直接报跨域请求
:::

| code | 描述 |
| ---- | -------------------------------------------------------------------------- |
| 0 | ok 正常 服务请求正常召回 |
| 1 | 内部错误 |
| 4 | 转换失败 X→GPS 时必现,根据法律规定,不支持将任何类型的坐标转换为 GPS 坐标 |
| 21 | from 非法 |
| 22 | to 非法 |
| 24 | coords 格式非法 |
| 25 | coords 个数非法,超过限制 |
| 26 | 参数错误 |

## 代码示例

<!-- prettier-ignore -->
```html
<Map @initd="handleInitd"></Map>

<script setup lang="ts">
import { useAreaBoundary } from 'vue3-baidu-map-gl'
const { point, set } = usePoint()
function handleInitd() {
set({
lng: 116.297611,
lat: 40.047363
})
}
</script>
```

## TS 类型定义参考

```ts
import { Ref } from 'vue'
/**
* 地图经纬度点
*/
export declare type Point = {
lng: number
lat: number
}
/**
* 获取一个地图经纬度点实例
*/
export declare function usePoint(): {
/**
* BMapGL.Point 实例对象
*/
point: Ref<BMapGL.Point | null>
/**
* 设置实例点坐标
*/
set: ({ lng, lat }: { lng: number; lat: number }) => void
}
```
2 changes: 1 addition & 1 deletion docs/zh/index.md
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ title: Vue3 BaiduMap GL
hero:
name: Vue3 BaiduMap GL
text: 易用 & 完整 & 高性能
tagline: 基于 Vue 3.0 和 百度地图GL的高质量地图组件/hooks库
tagline: 基于 Vue 3.0 和 百度地图GL的高质量地图组件+hooks库
image:
src: /logo.png
alt: Vue3 BaiduMap GL
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "vue3-baidu-map-gl",
"description": "A Vue 3 baidu map gl Component Library. ",
"version": "0.0.40",
"version": "1.0.0",
"main": "es/index.js",
"module": "es/index.js",
"types": "es/index.d.ts",
Loading