tg-map-vue3

tg-map-vue3

封装 百度地图, Google地图, Here地图(未完成), Maptalks 的Vue3组件库

项目结构

• tg-map-core: 核心库, 将baidu/google/maptalks地图封装成统一的API
• tg-map-vue3: 基于tg-map-core的Vue3组件
• tg-map-echarts: echarts的tg-map-core插件
• @transcodegroup/tg-map: 基于tg-map-core的Vue2组件, 因为构建工具链完全不同, 放在单独的vue2分支维护

使用

安装:

pnpm install tg-map-vue3

使用:

<template>
    <TgMap> </TgMap>
</template>
<script lang="ts" setup>
import { TgMap } from 'tg-map-vue3'
// 需要手动导入样式文件
import 'tg-map-vue3/dist/tg-map.css'
</script>

发布

在npm上, 登录transcode-group帐号后, 可以发布该项目的所有库

pnpm -r publish

开发

初始化仓库

# 拉取本仓库
git clone https://github.com/TranscodeGroup/tg-map.git
# 进入本地仓库目录
cd tg-map
# 安装依赖
pnpm install

其他项目若需要引用本地开发中的tg-map, 可以根据需要链接tg-map-vue3/tg-map-core:

# 使用相对路径链接tg-map-vue3包
pnpm link ../tg-map
# 使用相对路径链接tg-map-core包
pnpm link ../tg-map/packages/tg-map-core

构建

# 修改代码后要重新构建
pnpm run build

其他

pnpm install

Compile and Hot-Reload for Development

pnpm run dev

Type-Check, Compile and Minify for Production

pnpm run build

Lint with ESLint

pnpm run lint

Customize configuration

See Vite Configuration Reference.

参考文档

• 百度Javascript API v3.0: 老版, 类参考
• 百度Javascript API GL: 新的基于WebGL的实现, 类参考
• Google Maps Javascript API: Google地图, 类参考
• maptalks: 自绘地图, 类参考