├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .npmrc ├── .nvmrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── amap.d.ts ├── build ├── .eslintrc.js ├── build-info.ts ├── buildModules.ts ├── config │ └── tsconfig.json ├── full-bundle.ts ├── gulpfile.ts ├── helper.ts ├── plugins │ ├── map-alias.ts │ └── size-reporter.ts ├── tsconfig.json ├── types-definitions.ts └── utils │ ├── constants.ts │ ├── gulp.ts │ ├── log.ts │ ├── paths.ts │ ├── pkg.ts │ ├── process.ts │ └── rollup.ts ├── docs ├── .eslintrc.js ├── .vuepress │ ├── assets │ │ └── mapStyle.js │ ├── client.ts │ ├── components │ │ ├── demo │ │ │ ├── vp-codepen.vue │ │ │ ├── vp-example.vue │ │ │ └── vp-source-code.vue │ │ ├── examples │ │ │ ├── bmap │ │ │ │ ├── basic-setup.vue │ │ │ │ ├── basic.vue │ │ │ │ ├── get-instance-setup.vue │ │ │ │ └── get-instance.vue │ │ │ ├── ext │ │ │ │ └── menu.vue │ │ │ ├── infoWindow │ │ │ │ ├── info-window-custom.vue │ │ │ │ └── info-window.vue │ │ │ ├── layer │ │ │ │ └── xyz-layer.vue │ │ │ ├── marker │ │ │ │ ├── ground-overlay.vue │ │ │ │ ├── label.vue │ │ │ │ ├── map-mask.vue │ │ │ │ ├── marker.vue │ │ │ │ └── marker3d.vue │ │ │ └── vector │ │ │ │ ├── bezier-curve.vue │ │ │ │ ├── circle.vue │ │ │ │ ├── polygon.vue │ │ │ │ ├── polyline.vue │ │ │ │ └── prism.vue │ │ ├── icons │ │ │ ├── back-to-top.vue │ │ │ ├── codepen.vue │ │ │ ├── copy-icon.vue │ │ │ ├── dark.vue │ │ │ ├── element-plus-logo.vue │ │ │ ├── element-plus-text-logo.vue │ │ │ ├── expand.vue │ │ │ ├── external-link-icon.vue │ │ │ ├── github.vue │ │ │ ├── light.vue │ │ │ ├── source-code.vue │ │ │ ├── toggle-button.vue │ │ │ └── translation-icon.vue │ │ └── vp-demo.vue │ ├── composables │ │ └── toggle.ts │ ├── config.ts │ ├── data │ │ └── config.json │ ├── navbar.ts │ ├── plugin │ │ ├── demoPlugin.ts │ │ ├── registerPlugin.ts │ │ └── sitemapPlugin.ts │ ├── public │ │ ├── css │ │ │ └── global.css │ │ ├── favicon.ico │ │ ├── images │ │ │ ├── logo.ico │ │ │ ├── logo.png │ │ │ ├── vehicle.png │ │ │ ├── weixin.png │ │ │ └── zhifubao.jpg │ │ └── robots.txt │ ├── sidebar.ts │ ├── theme │ │ ├── index.ts │ │ └── layouts │ │ │ └── Layout.vue │ └── utils │ │ ├── highlight.ts │ │ └── paths.ts ├── README.md ├── package.json ├── tsconfig.json └── zh-cn │ ├── base │ ├── bmap.md │ └── get-bmap-instance.md │ ├── component │ ├── ext │ │ └── menu.md │ ├── infoWindow │ │ ├── info-window-custom.md │ │ └── info-window.md │ ├── layer │ │ └── xyz-layer.md │ ├── marker │ │ ├── ground-overlay.md │ │ ├── label.md │ │ ├── map-mask.md │ │ ├── marker-3d.md │ │ └── marker.md │ └── vector │ │ ├── bezier-curve.md │ │ ├── circle.md │ │ ├── polygon.md │ │ ├── polyline.md │ │ └── prism.md │ ├── introduction │ ├── compatible.md │ ├── init.md │ ├── install.md │ └── update.md │ └── other │ └── donation.md ├── ide-api └── component │ ├── bezier-curve.md │ ├── bmap.md │ ├── circle.md │ ├── ground-overlay.md │ ├── info-window-custom.md │ ├── info-window.md │ ├── label.md │ ├── marker-3d.md │ ├── marker.md │ ├── menu-item.md │ ├── menu.md │ ├── polygon.md │ ├── polyline.md │ └── prism.md ├── image ├── weixin.png └── zhifubao.jpg ├── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── scripts ├── .eslintrc.js └── publish.sh ├── shims-vue.d.ts ├── src ├── mixins │ └── register-component.ts ├── packages │ ├── BezierCurve │ │ ├── BezierCurve.vue │ │ └── index.ts │ ├── Circle │ │ ├── Circle.vue │ │ └── index.ts │ ├── GroundOverlay │ │ ├── GroundOverlay.vue │ │ └── index.ts │ ├── InfoWindow │ │ ├── InfoWindow.vue │ │ └── index.ts │ ├── InfoWindowCustom │ │ ├── InfoWindowCustom.vue │ │ └── index.ts │ ├── Label │ │ ├── Label.vue │ │ └── index.ts │ ├── MapMask │ │ ├── MapMask.vue │ │ └── index.ts │ ├── Marker │ │ ├── Marker.vue │ │ └── index.ts │ ├── Marker3d │ │ ├── Marker3d.vue │ │ └── index.ts │ ├── Menu │ │ ├── Menu.vue │ │ └── index.ts │ ├── MenuItem │ │ ├── MenuItem.vue │ │ └── index.ts │ ├── Polygon │ │ ├── Polygon.vue │ │ └── index.ts │ ├── Polyline │ │ ├── Polyline.vue │ │ └── index.ts │ ├── Prism │ │ ├── Prism.vue │ │ └── index.ts │ ├── XyzLayer │ │ ├── XyzLayer.vue │ │ └── index.ts │ ├── index.ts │ ├── map │ │ ├── bmap.vue │ │ └── index.ts │ └── package.json ├── services │ ├── index.ts │ ├── injected-amap-api-instance.ts │ ├── lazy-bmap-api-loader.js │ └── package.json ├── utils │ ├── compile.js │ ├── constant.js │ ├── convert-helper.js │ ├── event-helper.js │ ├── guid.js │ ├── threeUtil.js │ ├── types.ts │ ├── util.js │ └── with-install.ts └── vue-map │ ├── component.ts │ ├── defaults.ts │ ├── index.ts │ ├── make-installer.ts │ └── package-template.json ├── test ├── .eslintignore ├── .eslintrc.js ├── App.vue ├── assets │ ├── china.json │ ├── chongqing.json │ ├── citys.json │ └── logo.png ├── components │ └── Menu.vue ├── env.d.ts ├── index.html ├── main.ts ├── public │ └── vehicle.png ├── router │ └── index.ts ├── tsconfig.json └── views │ ├── BezierCurve.vue │ ├── Circle.vue │ ├── GroundOverlay.vue │ ├── InfoWindow.vue │ ├── InfoWindowCustom.vue │ ├── Label.vue │ ├── Map.vue │ ├── MapMask.vue │ ├── Marker.vue │ ├── Marker3d.vue │ ├── Menu.vue │ ├── Polygon.vue │ ├── Polyline.vue │ ├── Prism.vue │ └── XyzLayer.vue ├── tsconfig.json ├── typings ├── global.d.ts ├── vue-shim.d.ts └── vue-test-utils.d.ts └── vite.config.ts /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | !.* 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Build and Release Folders 2 | bin-debug/ 3 | bin-release/ 4 | [Oo]bj/ 5 | [Bb]in/ 6 | 7 | # Other files and folders 8 | .settings/ 9 | 10 | # Executables 11 | *.swf 12 | *.air 13 | *.ipa 14 | *.apk 15 | 16 | # Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties` 17 | # should NOT be excluded as they contain compiler settings and other important 18 | # information for Eclipse / Flash Builder. 19 | 20 | dist 21 | node_modules 22 | .idea 23 | *.log 24 | .temp 25 | .cache 26 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist = true 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v16 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.4 2 | * 解决XYZLayer销毁报错问题 3 | 4 | ### 1.0.3 5 | * 加载JS增加离线模式 6 | * 增加地图掩膜、XyzLayer图层 7 | 8 | ### 1.0.2 9 | * 开放lazyBMapApiLoaderInstance 10 | 11 | ### 1.0.1 12 | * 解决某些情况下无法加载地图问题 13 | 14 | ### 1.0.0 15 | vue3版本发布 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 gyy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # vue-bmap-gl 3 | [![npm (tag)](https://img.shields.io/npm/v/vue-bmap-gl/next)](https://www.npmjs.org/package/vue-bmap-gl) 4 | [![NPM downloads](http://img.shields.io/npm/dm/vue-bmap-gl.svg)](https://npmjs.org/package/vue-bmap-gl) 5 | ![JS gzip size](http://img.badgesize.io/https://unpkg.com/vue-bmap-gl@next/dist/index.min.js?compression=gzip&label=gzip%20size:%20JS) 6 | [![NPM](https://img.shields.io/npm/l/vue-bmap-gl)](https://gitee.com/guyangyang/vue-bmap-gl) 7 | [![star](https://gitee.com/guyangyang/vue-bmap-gl/badge/star.svg?theme=dark)](https://gitee.com/guyangyang/vue-bmap-gl/stargazers) 8 | 9 | :x: **由于百度需要开源文档认证，组件库停止维护，后续文档也会同步下线，有需要的可以下载代码本地运行查看文档，百度key也会失效，可以更换为自己的key** 10 | 11 | > vue-bmap-gl@next是一套基于Vue3 和百度GL的地图组件。 12 | > 该版本对原组件进行升级，主要适配Vue3，同时调整事件绑定形式，调整为使用v-on进行事件绑定。 13 | > 支持全量导入、按需导入和自动导入 14 | 15 | >vue2请使用0.x版本，对应分支vue2 16 | 17 | ```html 18 | 觉得有用可以给个star 19 | ``` 20 | 21 | :q 22 | 23 | ## 捐赠支持 24 | 支付宝 25 | 微信 26 | 27 | ## 安装 28 | ``` 29 | npm i -S vue-bmap-gl@next 30 | ``` 31 | 32 | ## 文档 33 | **[https://vue-bmap-gl.guyixi.cn](https://vue-bmap-gl.guyixi.cn)** 34 | 35 | 36 | ## 快速上手 37 | 38 | 引入vue-bmap-gl@next 39 | 40 | ```javascript 41 | // 引入vue-bmap-gl 42 | import VueBMap, {initBMapApiLoader} from 'vue-bmap-gl'; 43 | import 'vue-bmap-gl/dist/style.css'; 44 | 45 | // 初始化vue-bmap-gl 46 | initBMapApiLoader({ 47 | // 高德的key 48 | ak: 'YOUR_KEY', 49 | }); 50 | createApp(App).use(VueBMap) 51 | 52 | ``` 53 | 54 | ## 自动导入 55 | 首先你需要安装```unplugin-vue-components``` 、 ```unplugin-auto-import``` 、 ```@vuemap/unplugin-resolver```这三款插件 56 | ``` 57 | npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver 58 | ``` 59 | 然后在main.ts中导入css和进行初始化key 60 | ```ts 61 | import App from './App.vue' 62 | import {initBMapApiLoader} from 'vue-bmap-gl'; 63 | import 'vue-bmap-gl/dist/style.css' 64 | initBMapApiLoader({ 65 | ak: 'YOUR_KEY' 66 | }) 67 | 68 | createApp(App) 69 | .mount('#app') 70 | ``` 71 | 再修改配置文件，把下列代码插入到你的 Vite 或 Webpack 的配置文件中 72 | ```ts 73 | import { defineConfig } from 'vite' 74 | import vue from '@vitejs/plugin-vue' 75 | import AutoImport from 'unplugin-auto-import/vite' 76 | import Components from 'unplugin-vue-components/vite' 77 | import {VueBmapGlResolver} from '@vuemap/unplugin-resolver' 78 | 79 | // https://vitejs.dev/config/ 80 | export default defineConfig({ 81 | plugins: [ 82 | vue(), 83 | AutoImport({ 84 | resolvers: [VueBmapGlResolver()], 85 | }), 86 | Components({ 87 | resolvers: [VueBmapGlResolver()], 88 | }), 89 | ] 90 | }) 91 | ``` 92 | 93 | ## 组件 94 | 95 | ### 地图 96 | 97 | ```vue 98 | 99 | 100 | ``` 101 | 102 | -------------------------------------------------------------------------------- /amap.d.ts: -------------------------------------------------------------------------------- 1 | declare let BMapGL: any; 2 | 3 | interface customComponent { 4 | $parentComponent: any, 5 | register: any, 6 | mapEntity: any, 7 | needInitComponents: any, 8 | addChildComponent: any 9 | } 10 | 11 | interface IconOptions{ 12 | url: string, 13 | size: [number,number], 14 | imageOffset?: [number,number], 15 | anchor?: [number,number] 16 | } 17 | interface LabelOptions{ 18 | content: string, 19 | offset?: [number,number], 20 | title?: string, 21 | style?: object, 22 | zIndex?: number, 23 | enableMassClear?: boolean 24 | } 25 | interface MapStyleOptions{ 26 | styleId?: string, 27 | styleJson?: object 28 | } 29 | -------------------------------------------------------------------------------- /build/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | 'no-console': 'off', 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /build/build-info.ts: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import { epOutput } from './utils/paths' 3 | import { EP_PKG } from './utils/constants' 4 | import type { ModuleFormat } from 'rollup' 5 | 6 | export const modules = ['esm', 'cjs'] as const 7 | export type Module = typeof modules[number] 8 | export interface BuildInfo { 9 | module: 'ESNext' | 'CommonJS' 10 | format: ModuleFormat 11 | ext: 'mjs' | 'cjs' | 'js' 12 | output: { 13 | /** e.g: `es` */ 14 | name: string 15 | /** e.g: `dist/element-plus/es` */ 16 | path: string 17 | } 18 | 19 | bundle: { 20 | /** e.g: `element-plus/es` */ 21 | path: string 22 | } 23 | } 24 | 25 | export const buildConfig: Record = { 26 | esm: { 27 | module: 'ESNext', 28 | format: 'esm', 29 | ext: 'mjs', 30 | output: { 31 | name: 'es', 32 | path: path.resolve(epOutput, 'es'), 33 | }, 34 | bundle: { 35 | path: `${EP_PKG}/es`, 36 | }, 37 | }, 38 | cjs: { 39 | module: 'CommonJS', 40 | format: 'cjs', 41 | ext: 'js', 42 | output: { 43 | name: 'lib', 44 | path: path.resolve(epOutput, 'lib'), 45 | }, 46 | bundle: { 47 | path: `${EP_PKG}/lib`, 48 | }, 49 | }, 50 | } 51 | export const buildConfigEntries = Object.entries( 52 | buildConfig 53 | ) as BuildConfigEntries 54 | 55 | export type BuildConfig = typeof buildConfig 56 | export type BuildConfigEntries = [Module, BuildInfo][] 57 | -------------------------------------------------------------------------------- /build/buildModules.ts: -------------------------------------------------------------------------------- 1 | import {resolve} from "path"; 2 | import { rollup } from 'rollup' 3 | import vue from 'rollup-plugin-vue' 4 | import { nodeResolve } from '@rollup/plugin-node-resolve' 5 | import commonjs from '@rollup/plugin-commonjs' 6 | import esbuild from 'rollup-plugin-esbuild' 7 | import filesize from 'rollup-plugin-filesize' 8 | import glob from 'fast-glob' 9 | import scss from "rollup-plugin-scss"; 10 | import {buildOutput, vmRoot, pkgRoot} from './utils/paths' 11 | import {generateExternal, writeBundles} from './utils/rollup' 12 | import { excludeFiles } from './utils/pkg' 13 | import { reporter } from './plugins/size-reporter' 14 | import { buildConfigEntries } from './build-info' 15 | import { MapAlias } from './plugins/map-alias' 16 | import type { OutputOptions } from 'rollup' 17 | 18 | export const buildModules = async () => { 19 | const input = excludeFiles( 20 | await glob('**/*.{js,ts,vue}', { 21 | cwd: pkgRoot, 22 | absolute: true, 23 | onlyFiles: true, 24 | }) 25 | ) 26 | const bundle = await rollup({ 27 | input, 28 | plugins: [ 29 | await MapAlias(), 30 | scss({output: resolve(buildOutput, 'style.css')}), 31 | vue({ target: 'browser' }), 32 | nodeResolve({ 33 | extensions: ['.mjs', '.js', '.json', '.ts'], 34 | }), 35 | commonjs(), 36 | esbuild({ 37 | sourceMap: true, 38 | target: 'es2018', 39 | }), 40 | filesize({ reporter }), 41 | ], 42 | external: await generateExternal({ full: false }), 43 | treeshake: false, 44 | }) 45 | await writeBundles( 46 | bundle, 47 | buildConfigEntries.map(([module, config]): OutputOptions => { 48 | return { 49 | format: config.format, 50 | dir: config.output.path, 51 | exports: module === 'cjs' ? 'named' : undefined, 52 | preserveModules: true, 53 | preserveModulesRoot: vmRoot, 54 | sourcemap: true, 55 | entryFileNames: `[name].${config.ext}`, 56 | } 57 | }) 58 | ) 59 | } 60 | -------------------------------------------------------------------------------- /build/config/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "strict": true, 5 | "module": "ES6", 6 | "target": "ES2018", 7 | "noImplicitAny": false, 8 | "declaration": true, 9 | "moduleResolution": "Node", 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "sourceMap": true, 13 | "lib": ["ES2018", "DOM"], 14 | "allowSyntheticDefaultImports": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "resolveJsonModule": true 17 | }, 18 | "include": [ 19 | "../../amap.d.ts", 20 | "../../shims-vue.d.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /build/full-bundle.ts: -------------------------------------------------------------------------------- 1 | import {resolve} from 'path' 2 | import { nodeResolve } from '@rollup/plugin-node-resolve' 3 | import { rollup } from 'rollup' 4 | import commonjs from '@rollup/plugin-commonjs' 5 | import vue from 'rollup-plugin-vue' 6 | import esbuild from 'rollup-plugin-esbuild' 7 | import replace from '@rollup/plugin-replace' 8 | import filesize from 'rollup-plugin-filesize' 9 | import { parallel } from 'gulp' 10 | import scss from "rollup-plugin-scss"; 11 | import {version} from '../src/vue-map/package-template.json'; 12 | import {vmRoot, buildOutput, epOutput} from './utils/paths' 13 | import { generateExternal, writeBundles } from './utils/rollup' 14 | 15 | import { withTaskName } from './utils/gulp' 16 | import {MapAlias} from "./plugins/map-alias"; 17 | 18 | 19 | export const buildFull = (minify: boolean) => async () => { 20 | const bundle = await rollup({ 21 | input: resolve(vmRoot, 'index.ts'), 22 | plugins: [ 23 | await MapAlias(), 24 | scss({output: resolve(buildOutput, 'style.css')}), 25 | nodeResolve({ 26 | extensions: ['.mjs', '.js', '.json', '.ts'], 27 | }), 28 | vue({ 29 | target: 'browser', 30 | exposeFilename: false, 31 | }), 32 | commonjs(), 33 | esbuild({ 34 | minify, 35 | sourceMap: minify, 36 | target: 'es2018', 37 | }), 38 | replace({ 39 | 'process.env.NODE_ENV': JSON.stringify('production'), 40 | 41 | // options 42 | preventAssignment: true, 43 | }), 44 | filesize(), 45 | ], 46 | external: await generateExternal({ full: true }), 47 | }) 48 | const banner = `/*! vue-bmap-gl v${version} */\n` 49 | await writeBundles(bundle, [ 50 | { 51 | format: 'umd', 52 | file: resolve(epOutput, `dist/index${minify ? '.min' : ''}.js`), 53 | exports: 'named', 54 | name: 'VueBMap', 55 | globals: { 56 | vue: 'Vue', 57 | }, 58 | sourcemap: minify, 59 | banner 60 | }, 61 | { 62 | format: 'esm', 63 | file: resolve( 64 | epOutput, 65 | `dist/index.es${minify ? '.min' : ''}.js` 66 | ), 67 | sourcemap: minify, 68 | banner 69 | }, 70 | ]) 71 | } 72 | 73 | export const buildFullBundle = parallel( 74 | withTaskName('buildFullMinified', buildFull(true)), 75 | withTaskName('buildFull', buildFull(false)) 76 | ) 77 | -------------------------------------------------------------------------------- /build/gulpfile.ts: -------------------------------------------------------------------------------- 1 | import {copyFile, mkdir} from "fs/promises"; 2 | import {resolve} from "path"; 3 | import {copy} from 'fs-extra' 4 | import {series, parallel} from 'gulp' 5 | import {run} from './utils/process' 6 | import {withTaskName} from './utils/gulp' 7 | import {buildModules} from './buildModules' 8 | import {buildFullBundle} from "./full-bundle"; 9 | import {buildHelper} from './helper' 10 | import {generateTypesDefinitions} from "./types-definitions"; 11 | import { 12 | buildOutput, 13 | projRoot, 14 | epOutput, 15 | vmRoot 16 | } from './utils/paths' 17 | import {buildConfig} from './build-info' 18 | import type {TaskFunction} from 'gulp' 19 | import type {Module} from './build-info' 20 | 21 | const runTask = (name: string) => 22 | withTaskName(name, () => run(`pnpm run build ${name}`)) 23 | 24 | const createOutput = () => mkdir(epOutput, {recursive: true}) 25 | 26 | export const copyTypesDefinitions: TaskFunction = (done) => { 27 | const src = resolve(buildOutput, 'types') 28 | const copyTypes = (module: Module) => 29 | withTaskName(`copyTypes:${module}`, () => 30 | copy(src, buildConfig[module].output.path, {recursive: true}) 31 | ) 32 | 33 | return parallel(copyTypes('esm'), copyTypes('cjs'))(done) 34 | } 35 | 36 | export const copyFullStyle = async () => { 37 | await mkdir(resolve(epOutput, 'dist'), { recursive: true }) 38 | await copyFile( 39 | resolve(buildOutput, 'style.css'), 40 | resolve(epOutput, 'dist/style.css') 41 | ) 42 | } 43 | 44 | export const copyFiles = () => { 45 | const copyTypings = async () => { 46 | await copyFile( 47 | resolve(projRoot, 'typings/global.d.ts'), 48 | resolve(epOutput, 'global.d.ts') 49 | ) 50 | } 51 | 52 | return Promise.all([ 53 | copyFile( 54 | resolve(projRoot, 'README.md'), 55 | resolve(epOutput, 'README.md') 56 | ), 57 | copyFile( 58 | resolve(projRoot, 'CHANGELOG.md'), 59 | resolve(epOutput, 'CHANGELOG.md') 60 | ), 61 | copyFile( 62 | resolve(vmRoot, 'package-template.json'), 63 | resolve(epOutput, 'package.json') 64 | ), 65 | copyTypings(), 66 | copyFullStyle() 67 | ]) 68 | } 69 | 70 | export default series( 71 | withTaskName('clean', () => run('pnpm run clean:dist')), 72 | withTaskName('createOutput', () => createOutput()), 73 | parallel( 74 | runTask('buildModules'), 75 | runTask('buildFullBundle'), 76 | runTask('generateTypesDefinitions'), 77 | runTask('buildHelper'), 78 | ), 79 | parallel(copyTypesDefinitions, copyFiles) 80 | ) 81 | 82 | export * from './types-definitions' 83 | export * from './buildModules' 84 | export * from './full-bundle' 85 | export * from './helper' 86 | 87 | -------------------------------------------------------------------------------- /build/plugins/map-alias.ts: -------------------------------------------------------------------------------- 1 | import { EP_PREFIX } from '../utils/constants' 2 | import { getDistPackages } from '../utils/pkg' 3 | import type { Plugin } from 'rollup' 4 | 5 | export async function MapAlias(): Promise { 6 | const pkgs = await getDistPackages() 7 | 8 | return { 9 | name: 'map-alias-plugin', 10 | resolveId(id, importer, options) { 11 | if (!id.startsWith(EP_PREFIX)) return 12 | 13 | let updatedId = id 14 | for (const pkg of pkgs) { 15 | if (id.startsWith(pkg.name)){ 16 | updatedId = updatedId.replace(pkg.name, pkg.dir) 17 | } 18 | } 19 | return this.resolve(id, importer, { skipSelf: true, ...options }) 20 | }, 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/plugins/size-reporter.ts: -------------------------------------------------------------------------------- 1 | import { cyan, bold, yellow, green } from 'chalk' 2 | 3 | import type { FileSizeReporter } from 'rollup-plugin-filesize' 4 | 5 | export const reporter: FileSizeReporter = (opt, outputOptions, info) => { 6 | return `${cyan(bold(info.fileName))}: bundle size ${yellow( 7 | info.bundleSize 8 | )} -> minified ${green(info.minSize)}` 9 | } 10 | -------------------------------------------------------------------------------- /build/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "module": "CommonJS", 5 | "target": "ESNext", 6 | "lib": ["ESNext"] 7 | }, 8 | "include": ["**/*.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /build/utils/constants.ts: -------------------------------------------------------------------------------- 1 | export const EP_PREFIX = '@vue-map' 2 | export const EP_PKG = 'vue-bmap-gl' 3 | -------------------------------------------------------------------------------- /build/utils/gulp.ts: -------------------------------------------------------------------------------- 1 | import type { TaskFunction } from 'gulp' 2 | 3 | export const withTaskName = (name: string, fn: T) => 4 | Object.assign(fn, { displayName: name }) 5 | -------------------------------------------------------------------------------- /build/utils/log.ts: -------------------------------------------------------------------------------- 1 | import process from 'process' 2 | import chalk from 'chalk' 3 | 4 | export function cyan(str: string) { 5 | console.log(chalk.cyan(str)) 6 | } 7 | 8 | export function yellow(str: string) { 9 | console.log(chalk.yellow(str)) 10 | } 11 | 12 | export function green(str: string) { 13 | console.log(chalk.green(str)) 14 | } 15 | 16 | export function red(str: string) { 17 | console.error(chalk.red(str)) 18 | } 19 | 20 | export function errorAndExit(e: Error): never { 21 | red(e.stack ?? e.message) 22 | process.exit(1) 23 | } 24 | -------------------------------------------------------------------------------- /build/utils/paths.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | 3 | export const projRoot = resolve(__dirname, '..', '..') 4 | export const docRoot = resolve(projRoot, 'docs') 5 | 6 | export const apiRoot = resolve(projRoot, 'ide-api', 'component') 7 | 8 | export const pkgRoot = resolve(projRoot, 'src') 9 | 10 | export const vmRoot = resolve(pkgRoot, 'vue-map') 11 | 12 | export const epPackage = resolve(vmRoot, 'package-template.json'); 13 | 14 | /** dist */ 15 | export const buildOutput = resolve(projRoot, 'dist') 16 | 17 | /** dist/vue-amap */ 18 | export const epOutput = resolve(buildOutput, 'vue-map') 19 | -------------------------------------------------------------------------------- /build/utils/pkg.ts: -------------------------------------------------------------------------------- 1 | import findWorkspacePackages from '@pnpm/find-workspace-packages' 2 | import { buildConfig } from '../build-info' 3 | import { EP_PREFIX } from './constants' 4 | import { pkgRoot, projRoot } from './paths' 5 | import type { Module } from '../build-info' 6 | 7 | export const getWorkspacePackages = () => findWorkspacePackages(projRoot) 8 | export const getPackageManifest = (pkgPath: string) => { 9 | // eslint-disable-next-line @typescript-eslint/no-var-requires 10 | return require(pkgPath) 11 | } 12 | 13 | export const getPackageDependencies = (pkgPath: string): string[] => { 14 | const manifest = getPackageManifest(pkgPath) 15 | const { dependencies } = manifest 16 | return Object.keys(dependencies ?? {}) 17 | } 18 | 19 | export const excludeFiles = (files: string[]) => { 20 | const excludes = ['node_modules', 'test', 'mock', 'gulpfile', 'dist'] 21 | return files.filter( 22 | (path) => !excludes.some((exclude) => path.includes(exclude)) 23 | ) 24 | } 25 | export const pathRewriter = (module: Module) => { 26 | const config = buildConfig[module] 27 | 28 | return (id: string) => { 29 | id = id.replaceAll(`${EP_PREFIX}/`, `${config.bundle.path}/`) 30 | return id 31 | } 32 | } 33 | 34 | /** 35 | * get package list 36 | */ 37 | export const getDistPackages = async () => 38 | (await getWorkspacePackages()) 39 | .map((pkg) => ({ name: pkg.manifest.name, dir: pkg.dir })) 40 | .filter( 41 | (pkg): pkg is { name: string; dir: string } => 42 | !!pkg.name && 43 | !!pkg.dir && 44 | pkg.name.startsWith(EP_PREFIX) && 45 | pkg.dir.startsWith(pkgRoot) 46 | ) 47 | -------------------------------------------------------------------------------- /build/utils/process.ts: -------------------------------------------------------------------------------- 1 | import { spawn } from 'child_process' 2 | import { green } from 'chalk' 3 | import { projRoot } from './paths' 4 | 5 | export const run = async (command: string, cwd: string = projRoot) => 6 | new Promise((resolve, reject) => { 7 | const [cmd, ...args] = command.split(' ') 8 | console.log(`run: ${green(`${cmd} ${args.join(' ')}`)}`) 9 | const app = spawn(cmd, args, { 10 | cwd, 11 | stdio: 'inherit', 12 | shell: process.platform === 'win32', 13 | }) 14 | 15 | const onProcessExit = () => app.kill('SIGHUP') 16 | 17 | app.on('close', (code) => { 18 | process.removeListener('exit', onProcessExit) 19 | 20 | if (code === 0) resolve() 21 | else 22 | reject( 23 | new Error(`Command failed. \n Command: ${command} \n Code: ${code}`) 24 | ) 25 | }) 26 | process.on('exit', onProcessExit) 27 | }) 28 | -------------------------------------------------------------------------------- /build/utils/rollup.ts: -------------------------------------------------------------------------------- 1 | import { getPackageDependencies } from './pkg' 2 | import { epPackage } from './paths' 3 | import type { OutputOptions, RollupBuild } from 'rollup' 4 | 5 | export function writeBundles(bundle: RollupBuild, options: OutputOptions[]) { 6 | return Promise.all(options.map((option) => bundle.write(option))) 7 | } 8 | 9 | export const generateExternal = async (options: { full: boolean }) => { 10 | return (id: string) => { 11 | const packages: string[] = ['vue'] 12 | if (!options.full) { 13 | // dependencies 14 | packages.push('@vue', ...getPackageDependencies(epPackage)) 15 | } 16 | 17 | return [...new Set(packages)].some( 18 | (pkg) => id === pkg || id.startsWith(`${pkg}/`) 19 | ) 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | 'no-console': 'off', 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /docs/.vuepress/client.ts: -------------------------------------------------------------------------------- 1 | import {defineClientConfig} from '@vuepress/client' 2 | import 'vue-bmap-gl/dist/style.css' 3 | 4 | export default defineClientConfig({ 5 | async enhance({app}) { 6 | if (!__VUEPRESS_SSR__) { 7 | const va = await import('vue-bmap-gl'); 8 | app.use(va); 9 | va.initBMapApiLoader({ 10 | ak: 'KKG8EDD3V4vuyPGcjsLCt16PHacQIx3P' 11 | }) 12 | } 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /docs/.vuepress/components/demo/vp-codepen.vue: -------------------------------------------------------------------------------- 1 | 92 | 93 | 107 | -------------------------------------------------------------------------------- /docs/.vuepress/components/demo/vp-example.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | 25 | 49 | -------------------------------------------------------------------------------- /docs/.vuepress/components/demo/vp-source-code.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 22 | 23 | 29 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/bmap/basic-setup.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 26 | 58 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/bmap/basic.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 26 | 69 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/bmap/get-instance-setup.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 40 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/bmap/get-instance.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 45 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/ext/menu.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 56 | 57 | 60 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/infoWindow/info-window-custom.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 62 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/infoWindow/info-window.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 63 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/layer/xyz-layer.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 45 | 46 | 63 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/marker/ground-overlay.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 35 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/marker/label.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 56 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/marker/map-mask.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 49 | 50 | 66 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/marker/marker.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 64 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/marker/marker3d.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 40 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/vector/bezier-curve.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 58 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/vector/circle.vue: -------------------------------------------------------------------------------- 1 | 20 | 51 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/vector/polygon.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 44 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/vector/polyline.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 49 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/vector/prism.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 48 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/back-to-top.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/codepen.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/copy-icon.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/dark.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/element-plus-logo.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/element-plus-text-logo.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/expand.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/external-link-icon.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/github.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/light.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/source-code.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/toggle-button.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icons/translation-icon.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /docs/.vuepress/composables/toggle.ts: -------------------------------------------------------------------------------- 1 | import { isRef, ref } from 'vue' 2 | 3 | import type { Ref } from 'vue' 4 | 5 | const isBool = (val: unknown): val is boolean => { 6 | return typeof val === 'boolean' 7 | } 8 | 9 | export const useToggle = (getToggled?: Ref) => { 10 | const val = isRef(getToggled) 11 | ? getToggled 12 | : ref(isBool(getToggled) ? getToggled : false) 13 | 14 | return [ 15 | val, 16 | (toggle?: boolean) => { 17 | val.value = isBool(toggle) ? toggle : !val.value 18 | }, 19 | ] as const 20 | } 21 | -------------------------------------------------------------------------------- /docs/.vuepress/config.ts: -------------------------------------------------------------------------------- 1 | import {defineUserConfig} from 'vuepress' 2 | import Navbar from './navbar' 3 | import Sidebar from './sidebar' 4 | import registerPlugin from "./plugin/registerPlugin"; 5 | import {containerPlugin} from './plugin/demoPlugin' 6 | import {sitemapPlugin} from './plugin/sitemapPlugin' 7 | import {localTheme} from "./theme"; 8 | import { searchPlugin } from '@vuepress/plugin-search' 9 | 10 | 11 | export default defineUserConfig({ 12 | // 站点配置 13 | lang: 'zh-CN', 14 | title: 'vue-bmap-gl', 15 | description: '百度地图GL版本的vue3对应封装', 16 | head: [ 17 | ['link', {rel: 'stylesheet', type: 'text/css' ,href: '/css/global.css'}], 18 | ['script', {}, `var _hmt = _hmt || []; 19 | (function() { 20 | var hm = document.createElement("script"); 21 | hm.src = "https://hm.baidu.com/hm.js?220fb8a7ec11fe29bc25f3ace66e958f"; 22 | var s = document.getElementsByTagName("script")[0]; 23 | s.parentNode.insertBefore(hm, s); 24 | })();` 25 | ] 26 | // ['script', {src: 'https://cdn.jsdelivr.net/npm/@vuemap/vue-amap@1.0.1/dist/index.js'}] 27 | ], 28 | 29 | // 主题和它的配置 30 | theme: localTheme({ 31 | logo: 'https://vuejs.org/images/logo.png', 32 | docsDir: 'docs', 33 | editLink: false, 34 | lastUpdatedText: '最后更新时间', 35 | contributorsText: '贡献者', 36 | tip: '提示', 37 | warning: '警告', 38 | navbar: Navbar, 39 | sidebar: Sidebar, 40 | }), 41 | plugins: [ 42 | containerPlugin(), 43 | registerPlugin, 44 | sitemapPlugin(), 45 | searchPlugin() 46 | ], 47 | port: 8081 48 | }) 49 | -------------------------------------------------------------------------------- /docs/.vuepress/data/config.json: -------------------------------------------------------------------------------- 1 | {"publishDate":"2022-12-04"} 2 | -------------------------------------------------------------------------------- /docs/.vuepress/navbar.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | text: 'vue-mapvgl', 4 | children: [ 5 | { 6 | text: 'vue3版本', 7 | link: 'https://vue-mapvgl.guyixi.cn' 8 | }, 9 | { 10 | text: 'vue2版本', 11 | link: 'https://docs.guyixi.cn/vue-mapvgl/#/' 12 | } 13 | ] 14 | }, 15 | { 16 | text: '@vuemap/vue-amap', 17 | children: [ 18 | { 19 | text: 'vue3版本', 20 | link: 'https://vue-amap.guyixi.cn' 21 | }, 22 | { 23 | text: 'vue2版本', 24 | link: 'https://docs.guyixi.cn/vue-amap/#/' 25 | } 26 | ] 27 | }, 28 | { 29 | text: 'vue2版本', 30 | link: 'https://docs.guyixi.cn/vue-bmap-gl/#/' 31 | }, 32 | { 33 | text: '更新日志', 34 | link: 'https://gitee.com/guyangyang/vue-bmap-gl/blob/dev/CHANGELOG.md' 35 | }, 36 | { 37 | text: '源码', 38 | children: [ 39 | { 40 | text: 'gitee', 41 | link: 'https://gitee.com/guyangyang/vue-bmap-gl' 42 | }, 43 | { 44 | text: 'github', 45 | link: 'https://github.com/yangyanggu/vue-bmap-gl/' 46 | } 47 | ] 48 | }, 49 | 50 | ] 51 | -------------------------------------------------------------------------------- /docs/.vuepress/plugin/registerPlugin.ts: -------------------------------------------------------------------------------- 1 | import {resolve} from 'path' 2 | import {registerComponentsPlugin} from "@vuepress/plugin-register-components"; 3 | import {vpRoot} from '../utils/paths' 4 | 5 | export default registerComponentsPlugin({ 6 | componentsDir: resolve(vpRoot, 'components'), 7 | }); 8 | -------------------------------------------------------------------------------- /docs/.vuepress/plugin/sitemapPlugin.ts: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import fs from 'fs' 3 | import {Readable} from 'stream' 4 | import {SitemapStream, streamToPromise} from 'sitemap' 5 | import {hostname} from '../utils/paths' 6 | import type {Plugin, PluginObject} from '@vuepress/core' 7 | 8 | import type {LinkItem} from 'sitemap' 9 | 10 | export const sitemapPlugin = (): Plugin => { 11 | const pluginObj: PluginObject = { 12 | name: 'sitemap-plugin', 13 | multiple: true, 14 | } 15 | 16 | pluginObj.onGenerated = (app) => { 17 | const pages = app.pages; 18 | const links = [] as LinkItem[]; 19 | pages.forEach(page => { 20 | links.push({ 21 | lang: 'zh-CN', 22 | url: page.path 23 | }) 24 | }) 25 | const stream = new SitemapStream( { hostname } ) 26 | const file = app.dir.dest('sitemap.xml'); 27 | // Return a promise that resolves with your XML string 28 | streamToPromise(Readable.from(links).pipe(stream)).then((data) => 29 | fs.writeFileSync(file, data.toString(), { 30 | encoding: 'utf-8' 31 | }) 32 | ) 33 | } 34 | return pluginObj; 35 | } 36 | -------------------------------------------------------------------------------- /docs/.vuepress/public/css/global.css: -------------------------------------------------------------------------------- 1 | .bmap-page-container{ 2 | height: 300px; 3 | } 4 | .control-container{ 5 | padding: 6px 12px; 6 | background: #dcdcdc; 7 | } 8 | .control-container>button{ 9 | margin-right: 8px; 10 | } 11 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangyanggu/vue-bmap-gl/10306b58bea5a0b52b4b5bae88922d19a5d69248/docs/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/public/images/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangyanggu/vue-bmap-gl/10306b58bea5a0b52b4b5bae88922d19a5d69248/docs/.vuepress/public/images/logo.ico -------------------------------------------------------------------------------- /docs/.vuepress/public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangyanggu/vue-bmap-gl/10306b58bea5a0b52b4b5bae88922d19a5d69248/docs/.vuepress/public/images/logo.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/vehicle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangyanggu/vue-bmap-gl/10306b58bea5a0b52b4b5bae88922d19a5d69248/docs/.vuepress/public/images/vehicle.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/weixin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangyanggu/vue-bmap-gl/10306b58bea5a0b52b4b5bae88922d19a5d69248/docs/.vuepress/public/images/weixin.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/zhifubao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangyanggu/vue-bmap-gl/10306b58bea5a0b52b4b5bae88922d19a5d69248/docs/.vuepress/public/images/zhifubao.jpg -------------------------------------------------------------------------------- /docs/.vuepress/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: * 3 | -------------------------------------------------------------------------------- /docs/.vuepress/sidebar.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | text: '基础', 4 | children: [ 5 | '/zh-cn/introduction/install.md', 6 | '/zh-cn/introduction/init.md', 7 | '/zh-cn/introduction/compatible.md', 8 | '/zh-cn/other/donation.md', 9 | '/zh-cn/introduction/update.md', 10 | ], 11 | }, 12 | { 13 | text: '地图', 14 | children: [ 15 | '/zh-cn/base/bmap.md', 16 | '/zh-cn/base/get-bmap-instance.md' 17 | ], 18 | }, 19 | { 20 | text: '图层', 21 | children: [ 22 | '/zh-cn/component/layer/xyz-layer.md' 23 | ], 24 | }, 25 | { 26 | text: '遮盖物', 27 | children: [ 28 | '/zh-cn/component/marker/ground-overlay.md', 29 | '/zh-cn/component/marker/label.md', 30 | '/zh-cn/component/marker/marker.md', 31 | '/zh-cn/component/marker/marker-3d.md', 32 | '/zh-cn/component/marker/map-mask.md', 33 | ], 34 | }, 35 | { 36 | text: '矢量图形', 37 | children: [ 38 | '/zh-cn/component/vector/polygon.md', 39 | '/zh-cn/component/vector/polyline.md', 40 | '/zh-cn/component/vector/bezier-curve.md', 41 | '/zh-cn/component/vector/circle.md', 42 | '/zh-cn/component/vector/prism.md', 43 | ], 44 | }, 45 | { 46 | text: '窗体', 47 | children: [ 48 | '/zh-cn/component/infoWindow/info-window.md', 49 | '/zh-cn/component/infoWindow/info-window-custom.md', 50 | ], 51 | }, 52 | { 53 | text: '扩展', 54 | children: [ 55 | '/zh-cn/component/ext/menu.md', 56 | ], 57 | } 58 | ] 59 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import { defaultTheme } from '@vuepress/theme-default' 2 | import { path } from '@vuepress/utils' 3 | import type { Theme } from '@vuepress/core' 4 | import type { DefaultThemeOptions } from '@vuepress/theme-default' 5 | 6 | export const localTheme = (options: DefaultThemeOptions): Theme => { 7 | return { 8 | name: 'vuepress-theme-local', 9 | extends: defaultTheme(options), 10 | layouts: { 11 | Layout: path.resolve(__dirname, 'layouts/Layout.vue'), 12 | }, 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/layouts/Layout.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | 28 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/utils/highlight.ts: -------------------------------------------------------------------------------- 1 | // ref https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/highlight.ts 2 | import chalk from 'chalk' 3 | import escapeHtml from 'escape-html' 4 | import prism from 'prismjs' 5 | 6 | // prism is listed as actual dep so it's ok to require 7 | const loadLanguages = require('prismjs/components/index') 8 | 9 | // required to make embedded highlighting work... 10 | loadLanguages(['markup', 'css', 'javascript']) 11 | 12 | function wrap(code: string, lang: string): string { 13 | if (lang === 'text') { 14 | code = escapeHtml(code) 15 | } 16 | return `
${code}
` 17 | } 18 | 19 | export const highlight = (str: string, lang: string) => { 20 | if (!lang) { 21 | return wrap(str, 'text') 22 | } 23 | lang = lang.toLowerCase() 24 | const rawLang = lang 25 | if (lang === 'vue' || lang === 'html') { 26 | lang = 'markup' 27 | } 28 | if (lang === 'md') { 29 | lang = 'markdown' 30 | } 31 | if (lang === 'ts') { 32 | lang = 'typescript' 33 | } 34 | if (lang === 'py') { 35 | lang = 'python' 36 | } 37 | if (!prism.languages[lang]) { 38 | try { 39 | loadLanguages([lang]) 40 | } catch (e) { 41 | // eslint-disable-next-line no-console 42 | console.warn( 43 | chalk.yellow( 44 | `[vitepress] Syntax highlight for language "${lang}" is not supported.` 45 | ) 46 | ) 47 | } 48 | } 49 | if (prism.languages[lang]) { 50 | const code = prism.highlight(str, prism.languages[lang], lang) 51 | return wrap(code, rawLang) 52 | } 53 | return wrap(str, 'text') 54 | } 55 | -------------------------------------------------------------------------------- /docs/.vuepress/utils/paths.ts: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | 3 | export const vpRoot = path.resolve(__dirname, '..') 4 | export const docRoot = path.resolve(vpRoot, '..') 5 | export const projRoot = path.resolve(docRoot, '..') 6 | export const hostname = 'https://vue-bmap-gl.guyixi.cn'; 7 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | title: 首页 4 | heroImage: https://vuejs.org/images/logo.png 5 | actions: 6 | - text: 快速上手 7 | link: /zh-cn/introduction/init.html 8 | type: primary 9 | - text: 项目简介 10 | link: https://gitee.com/guyangyang/vue-bmap-gl/tree/dev 11 | type: secondary 12 | features: 13 | - title: Vue 驱动 14 | details: 享受 Vue 的开发体验，只需要关注数据变化。 15 | - title: 全面 16 | details: 针对百度组件进行全面封装。 17 | - title: 可自定义 18 | details: 提供多个接口开发原生对象，方便快速实现自定义功能。 19 | footer: MIT Licensed | Copyright © 2021-present guyy 20 | footerHtml: true 21 | --- 22 | 23 | ## npm 安装 24 | 25 | 推荐 npm 安装。 26 | 27 | ``` 28 | npm install vue-bmap-gl@next --save 29 | ``` 30 | 31 | ## CDN 32 | 33 | 目前可通过 [unpkg.com/vue-bmap-gl@next](https://unpkg.com/vue-bmap-gl@next/dist/index.js) 获取最新版本的资源。 34 | 35 | ```html 36 | 37 | 38 | ``` 39 | 40 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vue-map/docs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "dev": "vuepress dev .", 7 | "build": "vuepress build ." 8 | }, 9 | "author": "", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@vueuse/core": "7.2.2", 13 | "clipboard-copy": "4.0.1", 14 | "vue-bmap-gl": "1.0.3" 15 | }, 16 | "devDependencies": { 17 | "@types/markdown-it": "12.2.3", 18 | "@vuepress/plugin-register-components": "v2.0.0-beta.48", 19 | "@vuepress/client": "v2.0.0-beta.48", 20 | "@vuepress/plugin-search": "v2.0.0-beta.48", 21 | "escape-html": "1.0.3", 22 | "markdown-it": "12.3.0", 23 | "markdown-it-container": "3.0.0", 24 | "prismjs": "1.25.0", 25 | "vuepress": "2.0.0-beta.48", 26 | "sitemap": "^7.0.0", 27 | "vue": "^3.2.26" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "target": "esnext", 6 | "lib": ["esnext"] 7 | }, 8 | "include": ["**/*.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /docs/zh-cn/base/get-bmap-instance.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 获取地图实例 3 | --- 4 | # 地图 5 | 6 | 获取地图实例方式有两种：
7 | 1、通过init事件
8 | 2、通过ref获取地图组件对象，然后调用$$getInstance方法
9 | 10 | 详细使用请查看下面的示例，可以在控制台看出打印效果 11 | 12 | ## 基础示例 13 | 14 | ### 普通示例 15 | ::: demo 16 | examples/bmap/get-instance 17 | ::: 18 | 19 | ### Setup示例 20 | ::: demo 21 | examples/bmap/get-instance-setup 22 | ::: 23 | -------------------------------------------------------------------------------- /docs/zh-cn/component/ext/menu.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 右击菜单 3 | --- 4 | 5 | # 右击菜单 6 | 7 | ## 基础示例 8 | 9 | ::: demo 10 | 11 | examples/ext/menu 12 | 13 | ::: 14 | 15 | ## el-bmap-menu 静态属性 16 | 仅且可以初始化配置，不支持响应式。 17 | 18 | 名称 | 类型 | 说明 19 | ---|---|---| 20 | 21 | 22 | ## el-bmap-menu 动态属性 23 | 24 | 支持响应式。 25 | 26 | 名称 | 类型 | 说明 27 | ---|---|---| 28 | 29 | ## el-bmap-menu 事件 30 | 31 | 事件 | 参数 | 说明 32 | ---|---|---| 33 | open | event{type, target, point, pixel} | 右键菜单打开时触发，事件参数point和pixel分别表示菜单开启时的地理和像素坐标点 34 | close | event{type, target, point, pixel} | 右键菜单关闭时触发，事件参数point和pixel分别表示菜单开启时的地理和像素坐标点 35 | 36 | ## el-bmap-menu-item 静态属性 37 | 仅且可以初始化配置，不支持响应式。 38 | 39 | 名称 | 类型 | 说明 40 | ---|---|---| 41 | width | Number | 指定此菜单项的宽度，菜单以最长的菜单项宽度为准 42 | domId | String | 指定此菜单项dom的id 43 | 44 | ## el-bmap-menu-item 动态属性 45 | 46 | 支持响应式。 47 | 48 | 名称 | 类型 | 说明 49 | ---|---|---| 50 | text | String | 菜单项显示的文本 51 | enable | Boolean | 是否启用菜单项 52 | 53 | ## el-bmap-menu-item 事件 54 | 55 | 事件 | 参数 | 说明 56 | ---|---|---| 57 | -------------------------------------------------------------------------------- /docs/zh-cn/component/infoWindow/info-window-custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 自定义信息窗体 3 | description: 自定义信息窗体,用于提供自定义窗体的需求 4 | --- 5 | # 自定义信息窗体 6 | 该组件为自定义组件，用于提供自定义窗体的需求 7 | 8 | ## 基础示例 9 | 10 | ::: demo 11 | 12 | examples/infoWindow/info-window-custom 13 | 14 | ::: 15 | 16 | 17 | 18 | ## 静态属性 19 | 20 | 名称 | 类型 | 说明 21 | ---|---|---| 22 | enableAutoPan | Boolean | 是否开启信息窗口打开时地图自动移动（默认开启） 23 | enableCloseOnClick | Boolean | 是否开启点击地图关闭信息窗口（默认开启） 24 | anchor | String | 锚点，默认是 bottom，只有当enableAutoPan为false时生效。可选值：auto(自动根据可显示位置进行处理，优先bottom)、top(顶部中心)、right(右侧中心)、bottom(底部中心)、left(左侧中心) 、top-left(左上角)、top-right(右上角)、bottom-left(左下角)、bottom-right(右下角) 25 | 26 | ## 动态属性 27 | 28 | 支持响应式。 29 | 30 | 名称 | 类型 | 说明 31 | ---|---|---| 32 | position | Array[x,y] | 信息窗体显示基点位置 33 | offset | Array[x,y] | 信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的infoWindowOffset属性值，您可以为信息窗添加偏移量来改变默认位置 34 | visible | Boolean | 信息窗体是否显示。可以同时显示多个，需要自定义控制显隐。可以给visible属性增加.sync，用于同步组件显隐，主要用于点击地图隐藏信息框时，同步修改父组件的值 35 | isCustom | Boolean | 是否自定义，true时信息框不提供任何默认样式 36 | 37 | ## ref 可用方法 38 | 提供无副作用的同步帮助方法 39 | 40 | 函数 | 返回 | 说明 41 | ---|---|---| 42 | 43 | ## 事件 44 | 45 | 事件 | 参数 | 说明 46 | ---|---|---| 47 | open| | 信息窗体打开之后触发事件 48 | close | | 信息窗口被关闭时触发此事件 49 | -------------------------------------------------------------------------------- /docs/zh-cn/component/infoWindow/info-window.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 信息窗体 3 | --- 4 | 5 | # 信息窗体 6 | 7 | ## 基础示例 8 | 9 | ::: demo 10 | 11 | examples/infoWindow/info-window 12 | 13 | ::: 14 | 15 | 16 | ## 静态属性 17 | 18 | 名称 | 类型 | 说明 19 | ---|---|---| 20 | 21 | ## 动态属性 22 | 23 | 支持响应式。 24 | 25 | 名称 | 类型 | 说明 26 | ---|---|---| 27 | title | String | 信息窗标题文字，支持HTML内容 28 | content | String/HTML | 显示内容。支持字符串和HTML。 29 | width | Number | 信息窗宽度，单位像素。取值范围：0, 220 - 730。如果您指定宽度为0，则信息窗口的宽度将按照其内容自动调整 30 | height | Number | 信息窗高度，单位像素。取值范围：0, 60 - 650。如果您指定高度为0，则信息窗口的高度将按照其内容自动调整 31 | maxWidth | Number | 信息窗最大化时的宽度，单位像素。取值范围：220 - 730 32 | position | Array[x,y] | 信息窗体显示基点位置 33 | offset | Array[x,y] | 信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的infoWindowOffset属性值，您可以为信息窗添加偏移量来改变默认位置 34 | enableAutoPan | Boolean | 是否开启信息窗口打开时地图自动移动（默认开启） 35 | enableCloseOnClick | Boolean | 是否开启点击地图关闭信息窗口（默认开启） 36 | visible | Boolean | 信息窗体是否显示。**这里需要注意的是，百度地图只支持同时一个信息窗体的显示**。所以一旦有窗体显示切换的场景，visible数组的状态需要自行维护。 37 | 38 | 39 | ## ref 可用方法 40 | 提供无副作用的同步帮助方法 41 | 42 | 函数 | 返回 | 说明 43 | ---|---|---| 44 | $$getInstance() | [BMapGL.InfoWindow](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b6) | 获取`infoWindow`实例 45 | 46 | ## 事件 47 | 48 | 事件 | 参数 | 说明 49 | ---|---|---| 50 | init | Object | 百度组件实例 51 | open| event{type, target, point} | 信息窗体打开之后触发事件 52 | close | event{type, target, point} | 信息窗口被关闭时触发此事件 53 | maximize| event{type, target} | 信息窗口最大化后触发此事件 54 | restore | event{type, target} | 信息窗口还原时触发此事件 55 | clickclose | event{type, target} | 点击信息窗口的关闭按钮时触发此事件 56 | -------------------------------------------------------------------------------- /docs/zh-cn/component/layer/xyz-layer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: XYZLayer 3 | description: XYZLayer 4 | --- 5 | # XYZLayer 6 | 7 | ## 基础示例 8 | 9 | [官方参数示例](https://lbs.baidu.com/jsdemo.htm#wms) 10 | 11 | 12 | ::: demo 13 | 14 | examples/layer/xyz-layer 15 | 16 | ::: 17 | 18 | 19 | ## 静态属性 20 | 仅且可以初始化配置，不支持响应式。 21 | 22 | 名称 | 类型 | 说明 23 | ---|----------|---| 24 | tileUrlTemplate | String | 图像数据请求地址。可通过{0,1,2}标记实现多请求地址的配置；可通过[z]，[x]，[y]，[b]引用默认的*Template。WMTS/TMS/自定义栅格图层服务默认使用[z]，[x]，[y]，瓦片大小为256*256。WMS服务默认使用[b]。 25 | xTemplate | Function | 通过输入的网格x、y、z参数计算[x]具体返回值。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。 26 | yTemplate | Function | 通过输入的网格x、y、z参数计算[y]具体返回值。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。 27 | zTemplate | Function | 通过输入的网格x、y、z参数计算[z]具体返回值。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。 28 | bTemplate | Function | 通过输入的网格x、y、z参数计算[b]具体返回值，返回值默认为四至坐标拼接成的字符串：’minX,minY,maxX,maxY’。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。 29 | minZoom | Number | 设置图层显示的最小缩放等级。 30 | maxZoom | Number | 设置图层显示的最大缩放等级。 31 | extent | Array | 设置图层加载数据的四至范围，输入的范围数值默认为EPSG:3857坐标[minX,minY,maxX,maxY]。 32 | extentCRSIsWGS84 | Boolean | 标记参数extend数组数据是否为EPSG:4326坐标。默认false，如果设置为true，参数extent数值需要是EPSG:4326 坐标。 33 | boundary | Array | 设置图层掩膜。可通过BMapGL.Boundary()获取行政区域的坐标数据。 34 | useThumbData | Boolean | 缩放图层时，是否使用跨图层的瓦片进行平滑切换。默认false。如果影响透明图层的展示效果，可以设置false；如果非透明图层，可以设置true。 35 | tms | Boolean | tileUrlTemplate中[y]是否为tms请求服务形式。默认false。如果是则设置为true。 36 | 37 | 38 | ## 动态属性 39 | 支持响应式。 40 | 41 | 名称 | 类型 | 说明 42 | ---|---|---| 43 | 44 | ## ref 可用方法 45 | 提供无副作用的同步帮助方法 46 | 47 | 函数 | 返回 | 说明 48 | ---|---------------------------------------------------------------------------------------|---| 49 | $$getInstance() | [BMapGL.XYZLayer](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a8b55) | 获取`MapMask`实例 50 | $$addBoundary | Array | 设置图层掩膜。boundaries可通过BMapGL.Boundary()获取行政区域的坐标数据。 51 | $$clearBoundary | 无 | 清空图层掩膜。 52 | 53 | ## 事件 54 | 55 | 事件 | 参数 | 说明 56 | ---|---|---| 57 | init | Object | 组件实例 58 | -------------------------------------------------------------------------------- /docs/zh-cn/component/marker/ground-overlay.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 地面叠加层, 3 | description: 可以用于叠加图片在图层上，根据地图进行相应缩放 4 | --- 5 | # 地面叠加层 6 | 可以用于叠加图片在图层上，根据地图进行相应缩放 7 | 8 | ## 基础示例 9 | 10 | ::: demo 11 | 12 | examples/marker/ground-overlay 13 | 14 | ::: 15 | 16 | ## 静态属性 17 | 仅且可以初始化配置，不支持响应式。 18 | 19 | 名称 | 类型 | 说明 20 | ---|---|---| 21 | 22 | ## 动态属性 23 | 支持响应式。 24 | 25 | 名称 | 类型 | 说明 26 | ---|---|---| 27 | bounds | Array [[x,y],[x,y]] | 区域 28 | type | String | 'video' 、 'canvas'，默认为image 29 | url | String Canvas | 图片、视频 url 或 自定义的canvas对象 30 | opacity | Number | 图片透明度，取值范围[0,1]，0表示完全透明，1表示不透明默认值：1 31 | visible | Boolean | 覆盖物显隐控制,默认true 32 | 33 | ## ref 可用方法 34 | 提供无副作用的同步帮助方法 35 | 36 | 函数 | 返回 | 说明 37 | ---|---|---| 38 | $$getInstance() | [BMapGL.GroundOverlay](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b16) | 获取`BMapGL.GroundOverlay`实例 39 | 40 | ## 事件 41 | 42 | 事件 | 参数 | 说明 43 | ---|---|---| 44 | init | Object | 百度组件实例 45 | click | event{type, target} | 鼠标左键单击事件 46 | dblclick | event{type, target} | 鼠标左键双击事件 47 | -------------------------------------------------------------------------------- /docs/zh-cn/component/marker/label.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 文本 3 | description: 文本功能与百度原有API有些区别，增加isCustom属性和支持slot 4 | --- 5 | # 文本 6 | 文本功能与百度原有API有些区别，增加以下功能
7 | * isCustom属性，该属性用于取消label默认设置的边框和背景颜色 8 | * 支持slot方式 9 | 10 | ## 基础示例 11 | 12 | ::: demo 13 | 14 | examples/marker/label 15 | 16 | ::: 17 | 18 | 19 | ## 静态属性 20 | 仅且可以初始化配置，不支持响应式。 21 | 22 | 名称 | 类型 | 说明 23 | ---|---|---| 24 | isCustom | Boolean | 是否自定义样式，默认false，设置为true时会将style设置为{border:'none',background:'none'}，该属性会覆盖labelStyle属性 25 | 26 | ## 动态属性 27 | 支持响应式。 28 | 29 | 名称 | 类型 | 说明 30 | ---|---|---| 31 | content | String | 标记显示的文本内容 32 | position | Array [x,y] | 点标记在地图上显示的位置 33 | offset | Array [x,y] | 点标记显示位置偏移量 34 | title | String | 鼠标滑过点标记时的文字提示，不设置则鼠标滑过点标无文字提示 35 | labelStyle | Object | 设置文本标注样式，该样式将作用于文本标注的容器元素上。其中styles为JavaScript对象常量，比如： setStyle({ color : "red", fontSize : "12px" }) 注意：如果css的属性名中包含连字符，需要将连字符去掉并将其后的字母进行大写处理，例如：背景色属性要写成：backgroundColor 36 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 37 | visible | Boolean | 覆盖物显隐控制,默认true 38 | 39 | 40 | ## ref 可用方法 41 | 提供无副作用的同步帮助方法 42 | 43 | 函数 | 返回 | 说明 44 | ---|---|---| 45 | $$getInstance() | [BMapGL.Label](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b8) | 获取`Label`实例 46 | 47 | 48 | ## 事件 49 | 50 | 事件 | 参数 | 说明 51 | ---|---|---| 52 | init | Object | 组件实例 53 | click | event{type, target, point, pixel} | 鼠标左键单击事件 54 | dblclick | event{type, target, point, pixel} | 鼠标左键双击事件 55 | rightclick | event{type, target, point, pixel} | 右键单击 56 | mousedown | event{type, target, point, pixel} | 鼠标按下 57 | mouseup | event{type, target, point, pixel} | 鼠标抬起 58 | mouseover | event{type, target, point, pixel} | 鼠标经过 59 | mouseout | event{type, target, point, pixel} | 鼠标移出 60 | remove | event{type, target} | 移除文本标注时触发 61 | -------------------------------------------------------------------------------- /docs/zh-cn/component/marker/map-mask.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 掩膜 3 | description: 掩膜 4 | --- 5 | # 掩膜 6 | 7 | ## 基础示例 8 | 9 | ::: demo 10 | 11 | examples/marker/map-mask 12 | 13 | ::: 14 | 15 | 16 | ## 静态属性 17 | 仅且可以初始化配置，不支持响应式。 18 | 19 | 名称 | 类型 | 说明 20 | ---|---|---| 21 | path | Array | 区域坐标点数组 22 | showRegion | String | 展示区域内部还是外部，取值'inside'或'outside'，默认为'inside' 23 | isBuildingMask | Boolean | 楼块是否参与掩膜，默认为false 24 | isMapMask | Boolean | 底图是否参与掩膜，默认为false 25 | isPoiMask | Boolean | 底图上的Poi是否参与掩膜，默认为false 26 | 27 | 28 | ## 动态属性 29 | 支持响应式。 30 | 31 | 名称 | 类型 | 说明 32 | ---|---|---| 33 | 34 | ## ref 可用方法 35 | 提供无副作用的同步帮助方法 36 | 37 | 函数 | 返回 | 说明 38 | ---|---------------------------------------------------------------------------------------|---| 39 | $$getInstance() | [BMapGL.MapMask](https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/AreaMask) | 获取`MapMask`实例 40 | 41 | ## 事件 42 | 43 | 事件 | 参数 | 说明 44 | ---|---|---| 45 | init | Object | 组件实例 46 | -------------------------------------------------------------------------------- /docs/zh-cn/component/marker/marker-3d.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3D点坐标 3 | description: 3D点坐标 4 | --- 5 | # 3D点坐标 6 | 7 | ## 基础示例 8 | 9 | ::: demo 10 | 11 | examples/marker/marker3d 12 | 13 | ::: 14 | 15 | 16 | ## 静态属性 17 | 仅且可以初始化配置，不支持响应式。 18 | 19 | 名称 | 类型 | 说明 20 | ---|---|---| 21 | 22 | ## 动态属性 23 | 支持响应式。 24 | 25 | 名称 | 类型 | 说明 26 | ---|---|---| 27 | position | Array [x,y] | 点标记在地图上显示的位置，默认为地图中心点。 28 | height | number | 点标记显示位置偏移量，默认值为[-8,-8]。Marker指定position后，默认以marker左上角位置为基准点，对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。 29 | icon | {url:'',size:[],imageOffset:[],anchor:[]} | 该值为标号图标，详细参数说明见下面表，可为空。 30 | size | number | 点的大小，默认为50 31 | shape | number | 点的形状，1 为圆形，2 为正方形，默认为 1。也可以使用对应的常量 BMAP_SHAPE_CIRCLE 和 BMAP_SHAPE_RECT 32 | fillColor | String | 点的颜色，格式为 '#xxxxxx'，比如'#f00' 33 | fillOpacity | Number | 点的透明度，范围0-1，默认0.8 34 | 35 | icon参数说明 36 | 37 | 名称 | 类型 | 说明 38 | ---|---|---| 39 | url | String | 图标的图片地址，可以是http地址，也可以是base64 40 | size | Array [x,y] | 图片的大小，根据实际图片大小来控制 41 | imageOffset | Array [x,y] | 图标所用的图片相对于可视区域的偏移值，
此功能的作用等同于CSS中的background-position属性 42 | anchor | Array [x,y] | 图标的定位点相对于图标左上角的偏移值 43 | 44 | 45 | ## ref 可用方法 46 | 提供无副作用的同步帮助方法 47 | 48 | 函数 | 返回 | 说明 49 | ---|---|---| 50 | $$getInstance() | [BMapGL.Marker](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b2) | 获取`marker`实例 51 | 52 | ## 事件 53 | 54 | 事件 | 参数 | 说明 55 | ---|---|---| 56 | init | Object | 实例初始化事件 57 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 58 | -------------------------------------------------------------------------------- /docs/zh-cn/component/vector/bezier-curve.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 贝塞尔曲线 3 | description: 贝塞尔曲线 4 | --- 5 | # 贝塞尔曲线 6 | 7 | ## 基础示例 8 | 9 | ::: demo 10 | 11 | examples/vector/bezier-curve 12 | 13 | ::: 14 | 15 | ## 静态属性 16 | 仅且可以初始化配置，不支持响应式。 17 | 18 | 名称 | 类型 | 说明 19 | ---|---|---| 20 | 21 | 22 | ## 动态属性 23 | 支持响应式。 24 | 25 | 名称 | 类型 | 说明 26 | ---|---|---| 27 | path | Array [[x,y],[x,y]] | 贝瑟尔曲线的路径。 28 | controlPoints | Array [[x,y],[x,y]] | 贝瑟尔曲线的控制点。 29 | strokeColor | String | 线条颜色，如‘#000000’、‘red’ 30 | strokeOpacity | Number | 透明度 31 | strokeWeight | Number | 线宽 32 | strokeStyle | String | 虚线或者视线，'dashed'、'solid' 33 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 34 | visible | Boolean | 覆盖物显隐控制,默认true 35 | 36 | ## ref 可用方法 37 | 提供无副作用的同步帮助方法 38 | 39 | 函数 | 返回 | 说明 40 | ---|---|---| 41 | $$getInstance() | [BMapGL.BezierCurve](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b18) | 获取`BezierCurve`实例 42 | $$getPath() | Array [[x,y],[x,y]] | 获取贝瑟尔曲线的路径 43 | $$getControlPoints | Array [[x,y],[x,y]] | 贝瑟尔曲线的控制点 44 | 45 | ## 事件 46 | 47 | 事件 | 参数 | 说明 48 | ---|---|---| 49 | init | Object | 组件实例 50 | -------------------------------------------------------------------------------- /docs/zh-cn/component/vector/circle.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 圆形 3 | description: 圆形 4 | --- 5 | # 圆形 6 | 7 | ## 基础示例 8 | 9 | ::: demo 10 | 11 | examples/vector/circle 12 | 13 | ::: 14 | 15 | 16 | ## 静态属性 17 | 仅且可以初始化配置，不支持响应式。 18 | 19 | 名称 | 类型 | 说明 20 | ---|---|---| 21 | 22 | ## 动态属性 23 | 支持响应式。 24 | 25 | 名称 | 类型 | 说明 26 | ---|---|---| 27 | center | Array[x,y] | 圆心位置 28 | radius | Number | 圆半径，单位:米 29 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。 30 | strokeOpacity | Number | 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 31 | strokeWeight | Number | 轮廓线宽度,以像素为单位 32 | fillColor | String | 圆形填充颜色,使用16进制颜色代码赋值。 33 | fillOpacity | Float | 圆形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 34 | strokeStyle | String | 轮廓线样式，实线:solid，虚线:dashed 35 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 36 | enableEditing | Boolean | 是否启用线编辑，默认为false 37 | enableClicking | Boolean | 是否响应点击事件，默认为true 38 | visible | Boolean | 覆盖物显隐控制,默认true 39 | 40 | ## ref 可用方法 41 | 提供无副作用的同步帮助方法 42 | 43 | 函数 | 返回 | 说明 44 | ---|---|---| 45 | $$getInstance() | [BMapGL.Circle](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b14) | 获取`circle`实例 46 | $$getCenter() | [lng:Number,lat:Number] | 获取 `circle` 圆心坐标 47 | $$getRadius | Number | 返回圆形的半径，单位为米 48 | 49 | ## 事件 50 | 51 | 事件 | 参数 | 说明 52 | ---|---|---| 53 | init | Object | 组件实例 54 | click | event{type, target, point, pixel} | 鼠标左键单击事件 55 | dblclick | event{type, target, point, pixel} | 鼠标左键双击事件 56 | rightclick | event{type, target, point, pixel} | 右键单击 57 | mousedown | event{type, target, point, pixel} | 鼠标按下 58 | mouseup | event{type, target, point, pixel} | 鼠标抬起 59 | mouseover | event{type, target, point, pixel} | 鼠标经过 60 | mouseout | event{type, target, point, pixel} | 鼠标移出 61 | remove | {type, target} | 移除圆形时触发此事件 62 | lineupdate | {type, target} | 圆形覆盖物的属性发生变化时触发此事件 63 | -------------------------------------------------------------------------------- /docs/zh-cn/component/vector/polygon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 多边形 3 | description: 多边形 4 | --- 5 | # 多边形 6 | 7 | ## 基础示例 8 | 9 | ::: demo 10 | 11 | examples/vector/polygon 12 | 13 | ::: 14 | 15 | 16 | ## 静态属性 17 | 仅且可以初始化配置，不支持响应式。 18 | 19 | 名称 | 类型 | 说明 20 | ---|---|---| 21 | 22 | ## 动态属性 23 | 支持响应式。 24 | 25 | 名称 | 类型 | 说明 26 | ---|---|---| 27 | path | Array| 多边形轮廓线的节点坐标数组，当为“环”多边形时（多边形区域在多边形内显示为“岛”），path为二维数组，数组元素为多边形轮廓的节点坐标数组“环”多边形时，要求数组第一个元素为外多边形，其余为“岛”多边形，外多边形需包含“岛”多边形，否则程序不作处理 28 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600 29 | strokeOpacity | float | 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 30 | strokeWeight | Number | 轮廓线宽度 31 | strokeStyle | String | 轮廓线样式，实线:solid，虚线:dashed 32 | fillColor | String | 多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00 33 | fillOpacity | Float | 多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 34 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 35 | enableEditing | Boolean | 多边形当前是否可编辑 36 | enableClicking | Boolean | 是否响应点击事件，默认为true 37 | visible | Boolean | 覆盖物显隐控制,默认true 38 | 39 | ## ref 可用方法 40 | 提供无副作用的同步帮助方法 41 | 42 | 函数 | 返回 | 说明 43 | ---|---|---| 44 | $$getInstance() | [BMapGL.Polygon](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b12) | 获取`polygon`实例 45 | $$getPath() | [[lng:Number,lat:Number]] | 获取 `polygon` 的边界坐标 46 | 47 | ## 事件 48 | 49 | 事件 | 参数 | 说明 50 | ---|---|---| 51 | init | Object | 组件实例 52 | click | event{type, target, point, pixel} | 鼠标左键单击事件 53 | dblclick | event{type, target, point, pixel} | 鼠标左键双击事件 54 | rightclick | event{type, target, point, pixel} | 右键单击 55 | mousedown | event{type, target, point, pixel} | 鼠标按下 56 | mouseup | event{type, target, point, pixel} | 鼠标抬起 57 | mouseover | event{type, target, point, pixel} | 鼠标经过 58 | mouseout | event{type, target, point, pixel} | 鼠标移出 59 | remove | {type, target} | 移除圆形时触发此事件 60 | lineupdate | {type, target} | 圆形覆盖物的属性发生变化时触发此事件，使用该事件后会导致修改path后图形不刷新问题 61 | editend | {type, target} | 拖拽编辑后触发此事件 62 | -------------------------------------------------------------------------------- /docs/zh-cn/component/vector/polyline.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 折线 3 | description: 折线 4 | --- 5 | # 折线 6 | 7 | ## 基础示例 8 | 9 | ::: demo 10 | 11 | examples/vector/polyline 12 | 13 | ::: 14 | 15 | 16 | ## 静态属性 17 | 18 | 仅且可以初始化配置，不支持响应式。 19 | 20 | 名称 | 类型 | 说明 21 | ---|---|---| 22 | geodesic | Boolean | 是否开启大地线模式，true时，两点连线将以大地线的形式。默认为false 23 | clip | Boolean | 是否进行跨经度180度裁剪，绘制跨精度180时为了优化效果，可以设置成false，默认为true 24 | 25 | 26 | ## 动态属性 27 | 28 | 支持响应式。 29 | 30 | 名称 | 类型 | 说明 31 | ---|---|---| 32 | path | Array | 折线的节点坐标数组 33 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600 34 | strokeOpacity | Number | 线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 35 | strokeWeight | Number | 线条宽度，单位：像素 36 | strokeStyle | String | 线样式，实线:solid，虚线:dashed 37 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 38 | enableEditing | Boolean | 多边形当前是否可编辑 39 | enableClicking | Boolean | 是否响应点击事件，默认为true 40 | visible | Boolean | 覆盖物显隐控制,默认true 41 | 42 | 43 | ## ref 可用方法 44 | 提供无副作用的同步帮助方法 45 | 46 | 函数 | 返回 | 说明 47 | ---|---|---| 48 | $$getInstance() | [BMapGL.Polyline](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b10) | 获取`polyline`实例 49 | $$getPath() | [ [lng:Number, lat:Number] ] | 获取 `polyline` 获取折线路径的节点数组 50 | 51 | 52 | ## 事件 53 | 54 | 事件 | 参数 | 说明 55 | ---|---|---| 56 | init | Object | 组件实例 57 | click | event{type, target, point, pixel} | 鼠标左键单击事件 58 | dblclick | event{type, target, point, pixel} | 鼠标左键双击事件 59 | rightclick | event{type, target, point, pixel} | 右键单击 60 | mousedown | event{type, target, point, pixel} | 鼠标按下 61 | mouseup | event{type, target, point, pixel} | 鼠标抬起 62 | mouseover | event{type, target, point, pixel} | 鼠标经过 63 | mouseout | event{type, target, point, pixel} | 鼠标移出 64 | remove | {type, target} | 移除圆形时触发此事件 65 | lineupdate | {type, target} | 圆形覆盖物的属性发生变化时触发此事件，使用该事件后会导致修改path后图形不刷新问题 66 | editend | {type, target} | 拖拽编辑后触发此事件 67 | -------------------------------------------------------------------------------- /docs/zh-cn/component/vector/prism.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3D棱柱 3 | description: 3D棱柱 4 | --- 5 | # 3D棱柱 6 | 7 | ## 基础示例 8 | 9 | ::: demo 10 | 11 | examples/vector/prism 12 | 13 | ::: 14 | 15 | 16 | ## 静态属性 17 | 18 | 仅且可以初始化配置，不支持响应式。 19 | 20 | 名称 | 类型 | 说明 21 | ---|---|---| 22 | 23 | 24 | ## 动态属性 25 | 26 | 支持响应式。 27 | 28 | 名称 | 类型 | 说明 29 | ---|---|---| 30 | path | Array [[x,y],[x,y]] | 底面多边形的点数组 31 | altitude | Number | 棱柱的高，单位：米 32 | topFillColor | String | 顶面填充颜色 33 | topFillOpacity | Number | 顶面填充颜色透明度，取值范围0 - 1 34 | sideFillColor | String | 侧面填充颜色 35 | sideFillOpacity | Number | 侧面填充颜色透明度，取值范围0 - 1 36 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 37 | 38 | 39 | ## ref 可用方法 40 | 提供无副作用的同步帮助方法 41 | 42 | 函数 | 返回 | 说明 43 | ---|---|---| 44 | $$getInstance() | [BMapGL.Polyline](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b10) | 获取`polyline`实例 45 | $$getPath() | [ [lng:Number, lat:Number] ] | 获取 `prism` 获取折线路径的节点数组 46 | 47 | 48 | ## 事件 49 | 50 | 事件 | 参数 | 说明 51 | ---|---|---| 52 | init | Object | 组件实例 53 | click | event{type, target, point, pixel} | 鼠标左键单击事件 54 | dblclick | event{type, target, point, pixel} | 鼠标左键双击事件 55 | rightclick | event{type, target, point, pixel} | 右键单击 56 | mousedown | event{type, target, point, pixel} | 鼠标按下 57 | mouseup | event{type, target, point, pixel} | 鼠标抬起 58 | mouseover | event{type, target, point, pixel} | 鼠标经过 59 | mouseout | event{type, target, point, pixel} | 鼠标移出 60 | -------------------------------------------------------------------------------- /docs/zh-cn/introduction/compatible.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 兼容百度原生 SDK 3 | --- 4 | 5 | # 兼容百度原生 SDK 6 | 7 | --- 8 | 9 | `vue-bmap-gl` 能够抛开百度原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入百度原生 SDK 来支持。这章将介绍如何在 vue-bmap-gl 中使用百度 SDK。 10 | 11 | 12 | ## 实例方式 13 | 14 | 对于大多数 `vue-amap` 组件，都有 `init` 这个 `event`，参数为百度地图对应组件的实例，通过这样暴露百度实例的方式，开发者能够非常自由地将原生 SDK 和 vue-bmap-gl 结合起来使用。 15 | 16 | 17 | *若涉及到百度原生 `AMap` 需要注意的点：* 18 | 19 | * 确保 `vue-bmap-gl` 的导入名不是 `BMapGL`，推荐 `import VueBMap from 'vue-bmap-gl'` 避免和百度全局的 `BMapGL` 冲突。 20 | * 若 `eslint` 报错 `BMapGL is undefined` 之类的错误。请将 `BMapGL` 配置到 `.eslintrc` 的 `globals` 中。 21 | 22 | ### 地图示例 23 | ::: demo 24 | 25 | examples/bmap/basic 26 | 27 | ::: 28 | -------------------------------------------------------------------------------- /docs/zh-cn/introduction/install.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 安装 3 | --- 4 | 5 | # 安装 6 | 7 | --- 8 | 9 | ## npm 安装 10 | 11 | 推荐 npm 安装。 12 | 13 | ``` 14 | npm install vue-bmap-gl@next --save 15 | ``` 16 | 17 | ## CDN 18 | 19 | 目前可通过 [unpkg.com/vue-bmap-gl](https://unpkg.com/vue-bmap-gl@next/dist/index.js) 获取最新版本的资源。 20 | 21 | ```html 22 | 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/zh-cn/introduction/update.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 升级说明 3 | --- 4 | 5 | # 升级说明 6 | vue-bmap-gl vue3版本与vue2版本的API主要有以下几个不同点: 7 | * 取消bmapManager对象，获取实例的方式调整为ref或者监听init事件 8 | * 所有事件绑定调整为v-on，例如绑定click事件： `@click="clickMarker"` 9 | * 信息框的visible双向绑定调整为使用 v-model:visible，不再支持.sync 10 | -------------------------------------------------------------------------------- /docs/zh-cn/other/donation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 捐赠支持 3 | --- 4 | 5 | ## 捐赠支持 6 | 支付宝 7 | 微信 8 | -------------------------------------------------------------------------------- /ide-api/component/bezier-curve.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bmap 3 | --- 4 | 5 | # BmapBezierCurve 6 | 7 | 贝塞尔曲线 8 | 9 | ## Attributes 10 | 11 | Attribute | Type | Description 12 | ---|---|---| 13 | path | Array [[x,y],[x,y]] | 贝瑟尔曲线的路径。 14 | controlPoints | Array [[x,y],[x,y]] | 贝瑟尔曲线的控制点。 15 | strokeColor | String | 线条颜色，如‘#000000’、‘red’ 16 | strokeOpacity | Number | 透明度 17 | strokeWeight | Number | 线宽 18 | strokeStyle | String | 虚线或者视线，'dashed'、'solid' 19 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 20 | visible | Boolean | 覆盖物显隐控制,默认true 21 | 22 | ## Events 23 | 24 | Event Name | Parameters | Description 25 | ---|---|---| 26 | init | Object | 组件实例 27 | -------------------------------------------------------------------------------- /ide-api/component/circle.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapCircle 3 | --- 4 | # BmapCircle 5 | 6 | 圆形 7 | 8 | ## Attributes 9 | 10 | Attribute | Type | Description 11 | ---|---|---| 12 | center | Array[x,y] | 圆心位置 13 | radius | Number | 圆半径，单位:米 14 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。 15 | strokeOpacity | Number | 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 16 | strokeWeight | Number | 轮廓线宽度,以像素为单位 17 | fillColor | String | 圆形填充颜色,使用16进制颜色代码赋值。 18 | fillOpacity | Float | 圆形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 19 | strokeStyle | String | 轮廓线样式，实线:solid，虚线:dashed 20 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 21 | enableEditing | Boolean | 是否启用线编辑，默认为false 22 | enableClicking | Boolean | 是否响应点击事件，默认为true 23 | visible | Boolean | 覆盖物显隐控制,默认true 24 | 25 | ## Events 26 | 27 | Event Name | Parameters | Description 28 | ---|---|---| 29 | init | Object | 组件实例 30 | click | event{type, target, point, pixel} | 鼠标左键单击事件 31 | dblclick | event{type, target, point, pixel} | 鼠标左键双击事件 32 | rightclick | event{type, target, point, pixel} | 右键单击 33 | mousedown | event{type, target, point, pixel} | 鼠标按下 34 | mouseup | event{type, target, point, pixel} | 鼠标抬起 35 | mouseover | event{type, target, point, pixel} | 鼠标经过 36 | mouseout | event{type, target, point, pixel} | 鼠标移出 37 | remove | {type, target} | 移除圆形时触发此事件 38 | lineupdate | {type, target} | 圆形覆盖物的属性发生变化时触发此事件 39 | -------------------------------------------------------------------------------- /ide-api/component/ground-overlay.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapGroundOverlay 3 | --- 4 | # BmapGroundOverlay 5 | 6 | 地面叠加层,可以用于叠加图片在图层上，根据地图进行相应缩放 7 | 8 | ## Attributes 9 | 10 | Attribute | Type | Description 11 | ---|---|---| 12 | bounds | Array [[x,y],[x,y]] | 区域 13 | type | String | 'video' 、 'canvas'，默认为image 14 | url | String Canvas | 图片、视频 url 或 自定义的canvas对象 15 | opacity | Number | 图片透明度，取值范围[0,1]，0表示完全透明，1表示不透明默认值：1 16 | visible | Boolean | 覆盖物显隐控制,默认true 17 | 18 | ## Events 19 | 20 | Event Name | Parameters | Description 21 | ---|---|---| 22 | init | Object | 百度组件实例 23 | click | event{type, target} | 鼠标左键单击事件 24 | dblclick | event{type, target} | 鼠标左键双击事件 25 | -------------------------------------------------------------------------------- /ide-api/component/info-window-custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapInfoWindowCustom 3 | --- 4 | # BmapInfoWindowCustom 5 | 6 | 该组件为自定义组件，用于提供自定义窗体的需求 7 | 8 | ## Attributes 9 | 10 | Attribute | Type | Description 11 | ---|---|---| 12 | enableAutoPan | Boolean | 是否开启信息窗口打开时地图自动移动（默认开启） 13 | enableCloseOnClick | Boolean | 是否开启点击地图关闭信息窗口（默认开启） 14 | anchor | String | 锚点，默认是 bottom，只有当enableAutoPan为false时生效。可选值：auto(自动根据可显示位置进行处理，优先bottom)、top(顶部中心)、right(右侧中心)、bottom(底部中心)、left(左侧中心) 、top-left(左上角)、top-right(右上角)、bottom-left(左下角)、bottom-right(右下角) 15 | position | Array[x,y] | 信息窗体显示基点位置 16 | offset | Array[x,y] | 信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的infoWindowOffset属性值，您可以为信息窗添加偏移量来改变默认位置 17 | visible | Boolean | 信息窗体是否显示。可以同时显示多个，需要自定义控制显隐。可以给visible属性增加.sync，用于同步组件显隐，主要用于点击地图隐藏信息框时，同步修改父组件的值 18 | isCustom | Boolean | 是否自定义，true时信息框不提供任何默认样式 19 | 20 | ## Events 21 | 22 | Event Name | Parameters | Description 23 | ---|---|---| 24 | open| | 信息窗体打开之后触发事件 25 | close | | 信息窗口被关闭时触发此事件 26 | -------------------------------------------------------------------------------- /ide-api/component/info-window.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapInfoWindow 3 | --- 4 | # BmapInfoWindow 5 | 6 | 信息窗体 7 | 8 | ## Attributes 9 | 10 | Attribute | Type | Description 11 | ---|---|---| 12 | title | String | 信息窗标题文字，支持HTML内容 13 | content | String/HTML | 显示内容。支持字符串和HTML。 14 | width | Number | 信息窗宽度，单位像素。取值范围：0, 220 - 730。如果您指定宽度为0，则信息窗口的宽度将按照其内容自动调整 15 | height | Number | 信息窗高度，单位像素。取值范围：0, 60 - 650。如果您指定高度为0，则信息窗口的高度将按照其内容自动调整 16 | maxWidth | Number | 信息窗最大化时的宽度，单位像素。取值范围：220 - 730 17 | position | Array[x,y] | 信息窗体显示基点位置 18 | offset | Array[x,y] | 信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的infoWindowOffset属性值，您可以为信息窗添加偏移量来改变默认位置 19 | enableAutoPan | Boolean | 是否开启信息窗口打开时地图自动移动（默认开启） 20 | enableCloseOnClick | Boolean | 是否开启点击地图关闭信息窗口（默认开启） 21 | visible | Boolean | 信息窗体是否显示。**这里需要注意的是，百度地图只支持同时一个信息窗体的显示**。所以一旦有窗体显示切换的场景，visible数组的状态需要自行维护。 22 | 23 | ## Events 24 | 25 | Event Name | Parameters | Description 26 | ---|---|---| 27 | init | Object | 百度组件实例 28 | open| event{type, target, point} | 信息窗体打开之后触发事件 29 | close | event{type, target, point} | 信息窗口被关闭时触发此事件 30 | maximize| event{type, target} | 信息窗口最大化后触发此事件 31 | restore | event{type, target} | 信息窗口还原时触发此事件 32 | clickclose | event{type, target} | 点击信息窗口的关闭按钮时触发此事件 33 | -------------------------------------------------------------------------------- /ide-api/component/label.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapLabel 3 | --- 4 | # BmapLabel 5 | 6 | 文本功能与百度原有API有些区别，增加以下功能:1、isCustom属性，该属性用于取消label默认设置的边框和背景颜色，2、支持slot方式 7 | 8 | ## Attributes 9 | 10 | Attribute | Type | Description 11 | ---|---|---| 12 | isCustom | Boolean | 是否自定义样式，默认false，设置为true时会将style设置为{border:'none',background:'none'}，该属性会覆盖labelStyle属性 13 | content | String | 标记显示的文本内容 14 | position | Array [x,y] | 点标记在地图上显示的位置 15 | offset | Array [x,y] | 点标记显示位置偏移量 16 | title | String | 鼠标滑过点标记时的文字提示，不设置则鼠标滑过点标无文字提示 17 | labelStyle | Object | 设置文本标注样式，该样式将作用于文本标注的容器元素上。其中styles为JavaScript对象常量，比如： setStyle({ color : "red", fontSize : "12px" }) 注意：如果css的属性名中包含连字符，需要将连字符去掉并将其后的字母进行大写处理，例如：背景色属性要写成：backgroundColor 18 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 19 | visible | Boolean | 覆盖物显隐控制,默认true 20 | 21 | ## Events 22 | 23 | Event Name | Parameters | Description 24 | ---|---|---| 25 | init | Object | 组件实例 26 | click | event{type, target, point, pixel} | 鼠标左键单击事件 27 | dblclick | event{type, target, point, pixel} | 鼠标左键双击事件 28 | rightclick | event{type, target, point, pixel} | 右键单击 29 | mousedown | event{type, target, point, pixel} | 鼠标按下 30 | mouseup | event{type, target, point, pixel} | 鼠标抬起 31 | mouseover | event{type, target, point, pixel} | 鼠标经过 32 | mouseout | event{type, target, point, pixel} | 鼠标移出 33 | remove | event{type, target} | 移除文本标注时触发 34 | -------------------------------------------------------------------------------- /ide-api/component/marker-3d.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapMarker3d 3 | --- 4 | # BmapMarker3d 5 | 3D点坐标 6 | 7 | ## Attributes 8 | 9 | Attribute | Type | Description 10 | ---|---|---| 11 | position | Array [x,y] | 点标记在地图上显示的位置，默认为地图中心点。 12 | height | number | 点标记显示位置偏移量，默认值为[-8,-8]。Marker指定position后，默认以marker左上角位置为基准点，对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。 13 | icon | {url:'',size:[],imageOffset:[],anchor:[]} | 该值为标号图标，详细参数说明见下面表，可为空。 14 | size | number | 点的大小，默认为50 15 | shape | number | 点的形状，1 为圆形，2 为正方形，默认为 1。也可以使用对应的常量 BMAP_SHAPE_CIRCLE 和 BMAP_SHAPE_RECT 16 | fillColor | String | 点的颜色，格式为 '#xxxxxx'，比如'#f00' 17 | fillOpacity | Number | 点的透明度，范围0-1，默认0.8 18 | 19 | ## Events 20 | 21 | Event Name | Parameters | Description 22 | ---|---|---| 23 | init | Object | 实例初始化事件 24 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 25 | -------------------------------------------------------------------------------- /ide-api/component/marker.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapMarker 3 | --- 4 | # BmapMarker 5 | 6 | 点坐标 7 | 8 | ## Attributes 9 | 10 | Attribute | Type | Description 11 | ---|---|---| 12 | position | Array [x,y] | 点标记在地图上显示的位置，默认为地图中心点。 13 | offset | Array [x,y] | 点标记显示位置偏移量，默认值为[-8,-8]。Marker指定position后，默认以marker左上角位置为基准点，对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。 14 | icon | {url:'',size:[],imageOffset:[],anchor:[]} | 该值为标号图标，详细参数说明见下面表，可为空。 15 | title | String | 鼠标滑过点标记时的文字提示，不设置则鼠标滑过点标无文字提示。 16 | label | {content,offset: [x, y],title} | 添加文本标注，content为文本标注的内容，offset为偏移量，左上角为偏移量为（0,0）,title为鼠标滑过label的提示 17 | draggingCursor | String | 拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范 18 | rotation | Number | 点标记的旋转角度 19 | zIndex | String | 覆盖物的zIndex 20 | raiseOnDrag | Boolean | 拖拽标注时，标注是否开启离开地图表面效果。默认为false 21 | enableClicking | Boolean | 是否响应点击事件。默认为true 22 | enableDragging | Boolean | 设置点标记是否可拖拽移动，默认为false。 23 | enableMassClear | Boolean | 是否允许覆盖物在map.clearOverlays方法中被清除，默认true。 24 | visible | Boolean | 覆盖物显隐控制,默认true 25 | 26 | ## Events 27 | 28 | Event Name | Parameters | Description 29 | ---|---|---| 30 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 31 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 32 | rightclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标右键单击事件 33 | mousemove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移动 34 | mouseover | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移近点标记时触发事件 35 | mouseout | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移出点标记时触发事件 36 | mousedown | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下时触发事件 37 | mouseup | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下后抬起时触发事件 38 | dragstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 开始拖拽点标记时触发事件 39 | dragging | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标拖拽移动点标记时触发事件 40 | dragend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 点标记拖拽移动结束触发事件 41 | moveend | | 点标记执行moveTo动画结束时触发事件，也可以由moveAlong方法触发 42 | movealong | | 点标记执行moveAlong动画一次后触发事件 43 | touchstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸开始时触发事件，仅适用移动设备 44 | touchmove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸移动进行中时触发事件，仅适用移动设备 45 | touchend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸结束时触发事件，仅适用移动设备 46 | -------------------------------------------------------------------------------- /ide-api/component/menu-item.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapMenuItem 3 | --- 4 | # BmapMenuItem 5 | 6 | ## Attributes 7 | Attribute | Type | Description 8 | ---|---|---| 9 | width | Number | 指定此菜单项的宽度，菜单以最长的菜单项宽度为准 10 | domId | String | 指定此菜单项dom的id 11 | text | String | 菜单项显示的文本 12 | enable | Boolean | 是否启用菜单项 13 | callback | Function | 点击菜单项触发的回调 14 | 15 | ## Events 16 | 17 | Event Name | Parameters | Description 18 | ---|---|---| 19 | -------------------------------------------------------------------------------- /ide-api/component/menu.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapMenu 3 | --- 4 | # BmapMenu 5 | 6 | 右击菜单 7 | 8 | ## Events 9 | 10 | Event Name | Parameters | Description 11 | ---|---|---| 12 | open | event{type, target, point, pixel} | 右键菜单打开时触发，事件参数point和pixel分别表示菜单开启时的地理和像素坐标点 13 | close | event{type, target, point, pixel} | 右键菜单关闭时触发，事件参数point和pixel分别表示菜单开启时的地理和像素坐标点 14 | 15 | -------------------------------------------------------------------------------- /ide-api/component/polygon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapPolygon 3 | --- 4 | # BmapPolygon 5 | 6 | 多边形 7 | 8 | ## Attributes 9 | 10 | Attribute | Type | Description 11 | ---|---|---| 12 | path | Array| 多边形轮廓线的节点坐标数组，当为“环”多边形时（多边形区域在多边形内显示为“岛”），path为二维数组，数组元素为多边形轮廓的节点坐标数组“环”多边形时，要求数组第一个元素为外多边形，其余为“岛”多边形，外多边形需包含“岛”多边形，否则程序不作处理 13 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600 14 | strokeOpacity | float | 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 15 | strokeWeight | Number | 轮廓线宽度 16 | strokeStyle | String | 轮廓线样式，实线:solid，虚线:dashed 17 | fillColor | String | 多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00 18 | fillOpacity | Float | 多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 19 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 20 | enableEditing | Boolean | 多边形当前是否可编辑 21 | enableClicking | Boolean | 是否响应点击事件，默认为true 22 | visible | Boolean | 覆盖物显隐控制,默认true 23 | 24 | ## Events 25 | 26 | Event Name | Parameters | Description 27 | ---|---|---| 28 | init | Object | 组件实例 29 | click | event{type, target, point, pixel} | 鼠标左键单击事件 30 | dblclick | event{type, target, point, pixel} | 鼠标左键双击事件 31 | rightclick | event{type, target, point, pixel} | 右键单击 32 | mousedown | event{type, target, point, pixel} | 鼠标按下 33 | mouseup | event{type, target, point, pixel} | 鼠标抬起 34 | mouseover | event{type, target, point, pixel} | 鼠标经过 35 | mouseout | event{type, target, point, pixel} | 鼠标移出 36 | remove | {type, target} | 移除圆形时触发此事件 37 | lineupdate | {type, target} | 圆形覆盖物的属性发生变化时触发此事件，使用该事件后会导致修改path后图形不刷新问题 38 | editend | {type, target} | 拖拽编辑后触发此事件 39 | -------------------------------------------------------------------------------- /ide-api/component/polyline.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapPolyline 3 | --- 4 | # BmapPolyline 5 | 6 | 折线 7 | 8 | ## Attributes 9 | 10 | Attribute | Type | Description 11 | ---|---|---| 12 | geodesic | Boolean | 是否开启大地线模式，true时，两点连线将以大地线的形式。默认为false 13 | clip | Boolean | 是否进行跨经度180度裁剪，绘制跨精度180时为了优化效果，可以设置成false，默认为true 14 | path | Array | 折线的节点坐标数组 15 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600 16 | strokeOpacity | Number | 线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 17 | strokeWeight | Number | 线条宽度，单位：像素 18 | strokeStyle | String | 线样式，实线:solid，虚线:dashed 19 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 20 | enableEditing | Boolean | 多边形当前是否可编辑 21 | enableClicking | Boolean | 是否响应点击事件，默认为true 22 | visible | Boolean | 覆盖物显隐控制,默认true 23 | 24 | ## Events 25 | 26 | Event Name | Parameters | Description 27 | ---|---|---| 28 | init | Object | 组件实例 29 | click | event{type, target, point, pixel} | 鼠标左键单击事件 30 | dblclick | event{type, target, point, pixel} | 鼠标左键双击事件 31 | rightclick | event{type, target, point, pixel} | 右键单击 32 | mousedown | event{type, target, point, pixel} | 鼠标按下 33 | mouseup | event{type, target, point, pixel} | 鼠标抬起 34 | mouseover | event{type, target, point, pixel} | 鼠标经过 35 | mouseout | event{type, target, point, pixel} | 鼠标移出 36 | remove | {type, target} | 移除圆形时触发此事件 37 | lineupdate | {type, target} | 圆形覆盖物的属性发生变化时触发此事件，使用该事件后会导致修改path后图形不刷新问题 38 | editend | {type, target} | 拖拽编辑后触发此事件 39 | -------------------------------------------------------------------------------- /ide-api/component/prism.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BmapPrism 3 | --- 4 | # BmapPrism 5 | 6 | 3D棱柱 7 | 8 | ## Attributes 9 | 10 | Attribute | Type | Description 11 | ---|---|---| 12 | path | Array [[x,y],[x,y]] | 底面多边形的点数组 13 | altitude | Number | 棱柱的高，单位：米 14 | topFillColor | String | 顶面填充颜色 15 | topFillOpacity | Number | 顶面填充颜色透明度，取值范围0 - 1 16 | sideFillColor | String | 侧面填充颜色 17 | sideFillOpacity | Number | 侧面填充颜色透明度，取值范围0 - 1 18 | enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true 19 | 20 | ## Events 21 | 22 | Event Name | Parameters | Description 23 | ---|---|---| 24 | init | Object | 组件实例 25 | click | event{type, target, point, pixel} | 鼠标左键单击事件 26 | dblclick | event{type, target, point, pixel} | 鼠标左键双击事件 27 | rightclick | event{type, target, point, pixel} | 右键单击 28 | mousedown | event{type, target, point, pixel} | 鼠标按下 29 | mouseup | event{type, target, point, pixel} | 鼠标抬起 30 | mouseover | event{type, target, point, pixel} | 鼠标经过 31 | mouseout | event{type, target, point, pixel} | 鼠标移出 32 | -------------------------------------------------------------------------------- /image/weixin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangyanggu/vue-bmap-gl/10306b58bea5a0b52b4b5bae88922d19a5d69248/image/weixin.png -------------------------------------------------------------------------------- /image/zhifubao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangyanggu/vue-bmap-gl/10306b58bea5a0b52b4b5bae88922d19a5d69248/image/zhifubao.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "packageManager": "pnpm@6.23.6", 4 | "workspaces": [ 5 | "src/*", 6 | "docs" 7 | ], 8 | "engines": { 9 | "node": ">= 16" 10 | }, 11 | "scripts": { 12 | "build": "gulp --require sucrase/register/ts -f build/gulpfile.ts", 13 | "dev": "vite", 14 | "clean:dist": "rimraf dist", 15 | "lint": "eslint src", 16 | "docs:dev": "pnpm run -C docs dev", 17 | "docs:build": "pnpm run -C docs build" 18 | }, 19 | "browserslist": [ 20 | "> 1%", 21 | "not ie 11", 22 | "not op_mini all" 23 | ], 24 | "dependencies": { 25 | "lodash-es": "^4.17.21", 26 | "uppercamelcase": "^1.1.0", 27 | "@vue-map/packages": "workspace:*", 28 | "@vue-map/services": "workspace:*" 29 | }, 30 | "devDependencies": { 31 | "@pnpm/find-workspace-packages": "3.1.28", 32 | "@pnpm/logger": "4.0.0", 33 | "@pnpm/types": "7.6.0", 34 | "@rollup/plugin-commonjs": "^21.0.1", 35 | "@rollup/plugin-node-resolve": "^13.1.1", 36 | "@rollup/plugin-replace": "3.0.0", 37 | "@types/gulp": "4.0.9", 38 | "@types/jest": "27.0.2", 39 | "@types/lodash-es": "4.17.5", 40 | "@types/sass": "1.43.1", 41 | "@typescript-eslint/eslint-plugin": "5.6.0", 42 | "@typescript-eslint/parser": "5.6.0", 43 | "@types/fs-extra": "9.0.13", 44 | "@vitejs/plugin-vue": "^2.0.0", 45 | "@vue/compiler-sfc": "3.2.26", 46 | "element-plus": "^1.2.0-beta.6", 47 | "esbuild": "0.14.2", 48 | "eslint": "8.4.1", 49 | "eslint-config-prettier": "8.3.0", 50 | "eslint-define-config": "1.2.0", 51 | "eslint-plugin-import": "2.25.3", 52 | "eslint-plugin-vue": "8.2.0", 53 | "gulp": "4.0.2", 54 | "rimraf": "3.0.2", 55 | "rollup": "^2.61.1", 56 | "rollup-plugin-esbuild": "4.7.2", 57 | "rollup-plugin-filesize": "9.1.1", 58 | "rollup-plugin-scss": "3.0.0", 59 | "rollup-plugin-vue": "6.0.0", 60 | "sass": "^1.45.0", 61 | "sucrase": "^3.20.3", 62 | "typescript": "^4.5.4", 63 | "vite": "^2.7.2", 64 | "vue": "3.2.26", 65 | "vue-router": "^4.0.12", 66 | "vue-tsc": "^0.29.8", 67 | "components-helper": "^1.0.5", 68 | "ts-morph": "13.0.2", 69 | "fs-extra": "10.0.0", 70 | "fast-glob": "3.2.7" 71 | }, 72 | "peerDependencies": { 73 | "vue": "^3.2.0" 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | # 2 | packages: 3 | - 'src/**' 4 | - docs 5 | - '!packages/__mocks__' 6 | - '!**/__tests__/**' 7 | -------------------------------------------------------------------------------- /scripts/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | 'no-console': 'off', 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /scripts/publish.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | set -e 4 | 5 | pnpm run build 6 | 7 | cd ../dist/vue-map 8 | npm publish --tag=next 9 | cd - 10 | 11 | echo "Publish completed" 12 | -------------------------------------------------------------------------------- /shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | import { ComponentCustomProperties } from 'vue' 2 | 3 | declare module '@vue/runtime-core' { 4 | interface ComponentCustomProperties{ 5 | $amapComponent ?: any, 6 | $parentComponent ?: any 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/packages/BezierCurve/BezierCurve.vue: -------------------------------------------------------------------------------- 1 | 82 | -------------------------------------------------------------------------------- /src/packages/BezierCurve/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import BezierCurve from './BezierCurve.vue' 3 | 4 | export const ElBmapBezierCurve = withInstall(BezierCurve) 5 | export default ElBmapBezierCurve 6 | -------------------------------------------------------------------------------- /src/packages/Circle/Circle.vue: -------------------------------------------------------------------------------- 1 | 93 | -------------------------------------------------------------------------------- /src/packages/Circle/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import Circle from './Circle.vue' 3 | 4 | export const ElBmapCircle = withInstall(Circle) 5 | export default ElBmapCircle 6 | -------------------------------------------------------------------------------- /src/packages/GroundOverlay/GroundOverlay.vue: -------------------------------------------------------------------------------- 1 | 64 | -------------------------------------------------------------------------------- /src/packages/GroundOverlay/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import GroundOverlay from './GroundOverlay.vue' 3 | 4 | export const ElBmapGroundOverlay = withInstall(GroundOverlay) 5 | export default ElBmapGroundOverlay 6 | -------------------------------------------------------------------------------- /src/packages/InfoWindow/InfoWindow.vue: -------------------------------------------------------------------------------- 1 | 6 | 99 | -------------------------------------------------------------------------------- /src/packages/InfoWindow/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import InfoWindow from './InfoWindow.vue' 3 | 4 | export const ElBmapInfoWindow = withInstall(InfoWindow) 5 | export default ElBmapInfoWindow 6 | -------------------------------------------------------------------------------- /src/packages/InfoWindowCustom/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import InfoWindowCustom from './InfoWindowCustom.vue' 3 | 4 | export const ElBmapInfoWindowCustom = withInstall(InfoWindowCustom) 5 | export default ElBmapInfoWindowCustom 6 | -------------------------------------------------------------------------------- /src/packages/Label/Label.vue: -------------------------------------------------------------------------------- 1 | 6 | 103 | -------------------------------------------------------------------------------- /src/packages/Label/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import Label from './Label.vue' 3 | 4 | export const ElBmapLabel = withInstall(Label) 5 | export default ElBmapLabel 6 | -------------------------------------------------------------------------------- /src/packages/MapMask/MapMask.vue: -------------------------------------------------------------------------------- 1 | 63 | -------------------------------------------------------------------------------- /src/packages/MapMask/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import MapMask from './MapMask.vue' 3 | 4 | export const ElBmapMapMask = withInstall(MapMask) 5 | export default ElBmapMapMask 6 | -------------------------------------------------------------------------------- /src/packages/Marker/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import Marker from './Marker.vue' 3 | 4 | export const ElBmapMarker = withInstall(Marker) 5 | export default ElBmapMarker 6 | -------------------------------------------------------------------------------- /src/packages/Marker3d/Marker3d.vue: -------------------------------------------------------------------------------- 1 | 86 | -------------------------------------------------------------------------------- /src/packages/Marker3d/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import Marker3d from './Marker3d.vue' 3 | 4 | export const ElBmapMarker3d = withInstall(Marker3d) 5 | export default ElBmapMarker3d 6 | -------------------------------------------------------------------------------- /src/packages/Menu/Menu.vue: -------------------------------------------------------------------------------- 1 | 4 | 39 | -------------------------------------------------------------------------------- /src/packages/Menu/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import Menu from './Menu.vue' 3 | 4 | export const ElBmapMenu = withInstall(Menu) 5 | export default ElBmapMenu 6 | -------------------------------------------------------------------------------- /src/packages/MenuItem/MenuItem.vue: -------------------------------------------------------------------------------- 1 | 69 | -------------------------------------------------------------------------------- /src/packages/MenuItem/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import MenuItem from './MenuItem.vue' 3 | 4 | export const ElBmapMenuItem = withInstall(MenuItem) 5 | export default ElBmapMenuItem 6 | -------------------------------------------------------------------------------- /src/packages/Polygon/Polygon.vue: -------------------------------------------------------------------------------- 1 | 82 | -------------------------------------------------------------------------------- /src/packages/Polygon/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import Polygon from './Polygon.vue' 3 | 4 | export const ElBmapPolygon = withInstall(Polygon) 5 | export default ElBmapPolygon 6 | -------------------------------------------------------------------------------- /src/packages/Polyline/Polyline.vue: -------------------------------------------------------------------------------- 1 | 88 | -------------------------------------------------------------------------------- /src/packages/Polyline/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import Polyline from './Polyline.vue' 3 | 4 | export const ElBmapPolyline = withInstall(Polyline) 5 | export default ElBmapPolyline 6 | -------------------------------------------------------------------------------- /src/packages/Prism/Prism.vue: -------------------------------------------------------------------------------- 1 | 67 | -------------------------------------------------------------------------------- /src/packages/Prism/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import Prism from './Prism.vue' 3 | 4 | export const ElBmapPrism = withInstall(Prism) 5 | export default ElBmapPrism 6 | -------------------------------------------------------------------------------- /src/packages/XyzLayer/XyzLayer.vue: -------------------------------------------------------------------------------- 1 | 88 | -------------------------------------------------------------------------------- /src/packages/XyzLayer/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import XyzLayer from './XyzLayer.vue' 3 | 4 | export const ElBmapXyzLayer = withInstall(XyzLayer) 5 | export default ElBmapXyzLayer 6 | -------------------------------------------------------------------------------- /src/packages/index.ts: -------------------------------------------------------------------------------- 1 | export * from './map' 2 | export * from './BezierCurve' 3 | export * from './Circle' 4 | export * from './GroundOverlay' 5 | export * from './InfoWindow' 6 | export * from './InfoWindowCustom' 7 | export * from './Label' 8 | export * from './Marker' 9 | export * from './Marker3d' 10 | export * from './Menu' 11 | export * from './MenuItem' 12 | export * from './Polygon' 13 | export * from './Polyline' 14 | export * from './Prism' 15 | export * from './MapMask' 16 | export * from './XyzLayer' 17 | -------------------------------------------------------------------------------- /src/packages/map/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/with-install' 2 | import Bmap from './bmap.vue' 3 | 4 | export const ElBmap = withInstall(Bmap) 5 | export default ElBmap 6 | -------------------------------------------------------------------------------- /src/packages/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vue-map/packages", 3 | "version": "0.0.1", 4 | "description": "all components are settled here", 5 | "peerDependencies": { 6 | "vue": "^3.2.0" 7 | }, 8 | "main": "index.ts", 9 | "module": "index.ts", 10 | "types": "index.d.ts", 11 | "unpkg": "index.js", 12 | "jsdelivr": "index.js", 13 | "sideEffects": false 14 | } 15 | -------------------------------------------------------------------------------- /src/services/index.ts: -------------------------------------------------------------------------------- 1 | export {initBMapApiLoader, lazyBMapApiLoaderInstance} from './injected-amap-api-instance' 2 | -------------------------------------------------------------------------------- /src/services/injected-amap-api-instance.ts: -------------------------------------------------------------------------------- 1 | import BMapAPILoader from './lazy-bmap-api-loader'; 2 | let lazyBMapApiLoaderInstance = null as any; 3 | 4 | type LoaderConfig = { 5 | ak: string; 6 | v?: string; 7 | type?: string; 8 | protocol?: string; 9 | hostAndPath?: string; 10 | plugins?: string 11 | offline?: boolean 12 | } 13 | 14 | export const initBMapApiLoader = (config: LoaderConfig) => { 15 | if (lazyBMapApiLoaderInstance) return; 16 | if (!lazyBMapApiLoaderInstance) lazyBMapApiLoaderInstance = new BMapAPILoader(config); 17 | lazyBMapApiLoaderInstance.load(); 18 | }; 19 | export {lazyBMapApiLoaderInstance}; 20 | -------------------------------------------------------------------------------- /src/services/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vue-map/services", 3 | "version": "0.0.1", 4 | "description": "all components are settled here", 5 | "peerDependencies": { 6 | "vue": "^3.2.0" 7 | }, 8 | "main": "index.ts", 9 | "module": "index.ts", 10 | "types": "index.d.ts", 11 | "unpkg": "index.js", 12 | "jsdelivr": "index.js", 13 | "sideEffects": false 14 | } 15 | -------------------------------------------------------------------------------- /src/utils/compile.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | export const compile = (tpl, vm) => { 4 | let keys = ['methods', 'computed', 'data', 'filters']; 5 | let props = {}; 6 | 7 | let node = Vue.compile(tpl); 8 | keys.forEach(key => { 9 | props[key] = vm.$parent.$parent.$options[key]; 10 | 11 | if (key === 'data' && typeof props[key] === 'function') { 12 | props[key] = props[key](); 13 | } 14 | }); 15 | 16 | let vNode = new Vue({ 17 | ...props, 18 | ...node 19 | }); 20 | 21 | vNode.$mount(); 22 | return vNode; 23 | }; 24 | 25 | export const mountedVNode = (vn) => { 26 | const instance = new Vue({render: (h) => h('div', vn)}); 27 | instance.$mount(); 28 | return instance; 29 | }; 30 | 31 | export const mountedRenderFn = (renderFn, vueInstance) => { 32 | const instance = new Vue({render: h => renderFn(h, vueInstance)}); 33 | instance.$mount(); 34 | return instance; 35 | }; 36 | -------------------------------------------------------------------------------- /src/utils/constant.js: -------------------------------------------------------------------------------- 1 | export default { 2 | AMAP_READY_EVENT: 'AMAP_READY_EVENT' 3 | }; 4 | -------------------------------------------------------------------------------- /src/utils/convert-helper.js: -------------------------------------------------------------------------------- 1 | export function toPixel(arr) { 2 | return new BMapGL.Pixel(arr[0], arr[1]); 3 | } 4 | 5 | export function toSize(arr) { 6 | if (!arr || !Array.isArray(arr)) return null; 7 | return new BMapGL.Size(arr[0], arr[1]); 8 | } 9 | 10 | export function pixelTo(pixel) { 11 | if (Array.isArray(pixel)) return pixel; 12 | return [pixel.x, pixel.y]; 13 | } 14 | 15 | export function toLngLat(arr) { 16 | if (!arr || !Array.isArray(arr)) return null; 17 | return new BMapGL.Point(arr[0], arr[1]); 18 | } 19 | 20 | export function lngLatTo(lngLat) { 21 | if (!lngLat) return null; 22 | return [lngLat.lng, lngLat.lat]; 23 | } 24 | 25 | /** 26 | * @param arrs 二重数组 southWest, northEast 27 | */ 28 | export function toBounds(arrs) { 29 | return new BMapGL.Bounds(toLngLat(arrs[0]), toLngLat(arrs[1])); 30 | } 31 | 32 | export const commonConvertMap = { 33 | position: toLngLat, 34 | offset: toSize 35 | /* bounds: toBounds, 36 | LngLat: toLngLat, 37 | Pixel: toPixel, 38 | Size: toSize, 39 | Bounds: toBounds*/ 40 | }; 41 | -------------------------------------------------------------------------------- /src/utils/event-helper.js: -------------------------------------------------------------------------------- 1 | let eventHelper; 2 | 3 | class EventHelper { 4 | constructor() { 5 | /** 6 | * listener has表 7 | * { 8 | * instance: { 9 | * eventName: [...handlers] 10 | * } 11 | * } 12 | */ 13 | this._listener = new Map(); 14 | } 15 | 16 | addListener(instance, eventName, handler, context) { 17 | if (!BMapGL) throw new Error('please wait for Map API load'); 18 | if (!instance.addEventListener) { 19 | return; 20 | } 21 | // let listener = AMap.event.addListener(instance, eventName, handler, context); 22 | instance.addEventListener(eventName, handler, context); 23 | if (!this._listener.get(instance)) this._listener.set(instance, {}); 24 | const listenerMap = this._listener.get(instance); 25 | if (!listenerMap[eventName]) listenerMap[eventName] = []; 26 | listenerMap[eventName].push(handler); 27 | 28 | } 29 | 30 | removeListener(instance, eventName, handler) { 31 | if (!BMapGL) throw new Error('please wait for Map API load'); 32 | if (!instance.removeEventListener) { 33 | return; 34 | } 35 | if (!this._listener.get(instance) || !this._listener.get(instance)[eventName]) return; 36 | const listenerArr = this._listener.get(instance)[eventName]; 37 | if (handler) { 38 | const lIndex = listenerArr.indexOf(handler); 39 | instance.removeEventListener(eventName, listenerArr[lIndex]); 40 | listenerArr.splice(lIndex, 1); 41 | } else { 42 | listenerArr.forEach(listener => { 43 | instance.removeEventListener(eventName, listener); 44 | }); 45 | this._listener.get(instance)[eventName] = []; 46 | } 47 | } 48 | 49 | addListenerOnce(instance, eventName, handler, context) { 50 | return instance.on(eventName, handler, context, true); 51 | } 52 | 53 | trigger(instance, eventName, args) { 54 | return instance.emit(eventName, args); 55 | } 56 | 57 | clearListeners(instance) { 58 | const listeners = this._listener.get(instance); 59 | if (!listeners) return; 60 | Object.keys(listeners).map(eventName => { 61 | instance.clearEvents(eventName); 62 | }); 63 | } 64 | } 65 | 66 | eventHelper = eventHelper || new EventHelper(); 67 | 68 | export default eventHelper; 69 | -------------------------------------------------------------------------------- /src/utils/guid.js: -------------------------------------------------------------------------------- 1 | export default function guid() { 2 | let s = []; 3 | let hexDigits = '0123456789abcdef'; 4 | for (var i = 0; i < 36; i++) { 5 | s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); 6 | } 7 | s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010 8 | s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01 9 | s[8] = s[13] = s[18] = s[23] = '-'; 10 | 11 | var uuid = s.join(''); 12 | return uuid; 13 | } 14 | -------------------------------------------------------------------------------- /src/utils/threeUtil.js: -------------------------------------------------------------------------------- 1 | export function clearScene(scene) { 2 | scene.traverse(child => { 3 | clearGroup(child); 4 | }); 5 | } 6 | 7 | export function clearGroup(group) { 8 | const clearCache = (mesh) => { 9 | if (mesh.geometry) { 10 | mesh.geometry.dispose(); // 删除几何体 11 | } 12 | if (mesh.material) { 13 | mesh.material.dispose(); // 删除材质 14 | } 15 | if (mesh.material.texture) { 16 | mesh.material.texture.dispose(); 17 | } 18 | }; 19 | const removeObj = (item) => { 20 | let array = item.children.filter((x) => x); 21 | array.forEach(v => { 22 | if (v.children.length) { 23 | removeObj(v); 24 | } else { 25 | if (v.isMesh) { 26 | clearCache(v); 27 | } 28 | } 29 | }); 30 | array = null; 31 | }; 32 | removeObj(group); 33 | } 34 | -------------------------------------------------------------------------------- /src/utils/types.ts: -------------------------------------------------------------------------------- 1 | import type {Plugin} from "vue"; 2 | 3 | export type SFCWithInstall = T & Plugin 4 | -------------------------------------------------------------------------------- /src/utils/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 判断对象是不是map实例对象 3 | * @param instance 4 | * @returns {string|boolean} 5 | */ 6 | export function isMapInstance(instance) { 7 | if (!instance) { 8 | return false; 9 | } 10 | return instance.className === 'AMap.Map'; 11 | } 12 | 13 | /** 14 | * 判断对象是不是OverlayGroup实例对象 15 | * @param instance 16 | * @returns {string|boolean} 17 | */ 18 | export function isOverlayGroupInstance(instance) { 19 | if (!instance) { 20 | return false; 21 | } 22 | return instance.className === 'Overlay.OverlayGroup'; 23 | } 24 | 25 | /** 26 | * 判断对象是不是IndoorMap实例对象 27 | * @param instance 28 | * @returns {string|boolean} 29 | */ 30 | export function isIndoorMapInstance(instance) { 31 | if (!instance) { 32 | return false; 33 | } 34 | return instance.className === 'AMap.IndoorMap'; 35 | } 36 | 37 | /** 38 | * 判断对象是不是LabelsLayer实例对象 39 | * @param instance 40 | * @returns {string|boolean} 41 | */ 42 | export function isLabelsLayerInstance(instance) { 43 | if (!instance) { 44 | return false; 45 | } 46 | return instance.className === 'AMap.LabelsLayer'; 47 | } 48 | 49 | /** 50 | * 判断对象是不是VectorLayer实例对象 51 | * @param instance 52 | * @returns {string|boolean} 53 | */ 54 | export function isVectorLayerInstance(instance) { 55 | if (!instance) { 56 | return false; 57 | } 58 | return instance.CLASS_NAME === 'AMap.VectorLayer'; 59 | } 60 | 61 | /** 62 | * 将$props中的事件名称转换为地图组件需要的事件名 63 | * @param functionName 64 | * @returns {string|*} 65 | */ 66 | export function convertEventToLowerCase(functionName){ 67 | if(!functionName || functionName.length < 4){ 68 | return functionName; 69 | } 70 | const func = functionName.substring(3, functionName.length); 71 | const firstLetter = functionName[2].toLowerCase(); 72 | return firstLetter + func; 73 | } 74 | 75 | export const eventReg = /^on[A-Z]+/; 76 | -------------------------------------------------------------------------------- /src/utils/with-install.ts: -------------------------------------------------------------------------------- 1 | import { NOOP } from '@vue/shared' 2 | import type { SFCWithInstall } from './types' 3 | 4 | export const withInstall = >( 5 | main: T, 6 | extra?: E 7 | ) => { 8 | (main as SFCWithInstall).install = (app): void => { 9 | for (const comp of [main, ...Object.values(extra ?? {})]) { 10 | app.component(comp.name, comp) 11 | } 12 | } 13 | 14 | if (extra) { 15 | for (const [key, comp] of Object.entries(extra)) { 16 | (main as any)[key] = comp 17 | } 18 | } 19 | return main as SFCWithInstall & E 20 | } 21 | 22 | export const withInstallFunction = (fn: T, name: string) => { 23 | (fn as SFCWithInstall).install = (app) => { 24 | app.config.globalProperties[name] = fn 25 | } 26 | 27 | return fn as SFCWithInstall 28 | } 29 | 30 | export const withNoopInstall = (component: T) => { 31 | (component as SFCWithInstall).install = NOOP 32 | 33 | return component as SFCWithInstall 34 | } 35 | -------------------------------------------------------------------------------- /src/vue-map/component.ts: -------------------------------------------------------------------------------- 1 | import { ElBmap } from '@vue-map/packages/map' 2 | import {ElBmapBezierCurve} from '@vue-map/packages/BezierCurve' 3 | import {ElBmapCircle} from '@vue-map/packages/Circle' 4 | import {ElBmapGroundOverlay} from '@vue-map/packages/GroundOverlay' 5 | import {ElBmapInfoWindow} from '@vue-map/packages/InfoWindow' 6 | import {ElBmapInfoWindowCustom} from '@vue-map/packages/InfoWindowCustom' 7 | import {ElBmapLabel} from '@vue-map/packages/Label' 8 | import {ElBmapMarker} from '@vue-map/packages/Marker' 9 | import {ElBmapMarker3d} from '@vue-map/packages/Marker3d' 10 | import {ElBmapMenu} from '@vue-map/packages/Menu' 11 | import {ElBmapMenuItem} from '@vue-map/packages/MenuItem' 12 | import {ElBmapPolygon} from '@vue-map/packages/Polygon' 13 | import {ElBmapPolyline} from '@vue-map/packages/Polyline' 14 | import {ElBmapPrism} from '@vue-map/packages/Prism' 15 | import {ElBmapMapMask} from '@vue-map/packages/MapMask' 16 | import {ElBmapXyzLayer} from '@vue-map/packages/XyzLayer' 17 | 18 | 19 | import type { Plugin } from 'vue' 20 | 21 | export default [ 22 | ElBmap, 23 | ElBmapBezierCurve, 24 | ElBmapCircle, 25 | ElBmapGroundOverlay, 26 | ElBmapInfoWindow, 27 | ElBmapInfoWindowCustom, 28 | ElBmapLabel, 29 | ElBmapMarker, 30 | ElBmapMarker3d, 31 | ElBmapMenu, 32 | ElBmapMenuItem, 33 | ElBmapPolygon, 34 | ElBmapPolyline, 35 | ElBmapPrism, 36 | ElBmapMapMask, 37 | ElBmapXyzLayer 38 | ] as Plugin[] 39 | -------------------------------------------------------------------------------- /src/vue-map/defaults.ts: -------------------------------------------------------------------------------- 1 | import { makeInstaller } from './make-installer' 2 | import Components from './component' 3 | 4 | export default makeInstaller([...Components]) 5 | -------------------------------------------------------------------------------- /src/vue-map/index.ts: -------------------------------------------------------------------------------- 1 | import installer from './defaults' 2 | export * from '@vue-map/services'; 3 | export * from '@vue-map/packages' 4 | export { makeInstaller } from './make-installer' 5 | export { default } from './defaults' 6 | export const install = installer.install 7 | -------------------------------------------------------------------------------- /src/vue-map/make-installer.ts: -------------------------------------------------------------------------------- 1 | import type { App, Plugin } from 'vue' 2 | 3 | export const makeInstaller = (components: Plugin[] = []) => { 4 | const apps: App[] = [] 5 | 6 | const install = (app: App) => { 7 | 8 | if (apps.includes(app)) return 9 | apps.push(app) 10 | 11 | components.forEach((c) => app.use(c)) 12 | } 13 | 14 | return { 15 | install, 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/vue-map/package-template.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-bmap-gl", 3 | "version": "1.0.4", 4 | "description": "bmap-gl vue3", 5 | "keywords": [ 6 | "bmap-gl", 7 | "bmap", 8 | "map", 9 | "vue3", 10 | "vue" 11 | ], 12 | "exports": { 13 | ".": { 14 | "require": "./lib/index.js", 15 | "import": "./es/index.mjs" 16 | }, 17 | "./es": "./es/index.mjs", 18 | "./lib": "./lib/index.js", 19 | "./*": "./*" 20 | }, 21 | "main": "lib/index.js", 22 | "module": "es/index.mjs", 23 | "style": "dist/style.css", 24 | "unpkg": "dist/index.js", 25 | "jsdelivr": "dist/index.js", 26 | "sideEffects": [ 27 | "dist/*", 28 | "lib/packages/**/*", 29 | "es/packages/**/*" 30 | ], 31 | "repository": "git@gitee.com:guyangyang/vue-bmap-gl.git", 32 | "author": "guyangyang <407042815@qq.com>", 33 | "license": "MIT", 34 | "bugs": { 35 | "url": "https://gitee.com/guyangyang/vue-bmap-gl/issues" 36 | }, 37 | "homepage": "https://vue-bmap-gl.guyixi.cn", 38 | "scripts": { 39 | "build": "gulp --require sucrase/register/ts -f build/gulpfile.ts", 40 | "dev": "vite", 41 | "clean:dist": "rimraf dist", 42 | "lint": "eslint src" 43 | }, 44 | "dependencies": { 45 | "uppercamelcase": "^1.1.0" 46 | }, 47 | "devDependencies": { 48 | }, 49 | "peerDependencies": { 50 | "vue": "^3.2.0" 51 | }, 52 | "vetur": { 53 | "tags": "tags.json", 54 | "attributes": "attributes.json" 55 | }, 56 | "web-types": "web-types.json" 57 | } 58 | -------------------------------------------------------------------------------- /test/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | !.* 4 | assets 5 | -------------------------------------------------------------------------------- /test/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | 'no-console': 'off', 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /test/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | 21 | 45 | -------------------------------------------------------------------------------- /test/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangyanggu/vue-bmap-gl/10306b58bea5a0b52b4b5bae88922d19a5d69248/test/assets/logo.png -------------------------------------------------------------------------------- /test/components/Menu.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 39 | 40 | 47 | -------------------------------------------------------------------------------- /test/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /test/main.ts: -------------------------------------------------------------------------------- 1 | import {createApp} from 'vue' 2 | import Element from 'element-plus' 3 | import {initBMapApiLoader} from '@vue-map/services' 4 | import App from './App.vue' 5 | import 'element-plus/dist/index.css' 6 | import router from './router/index' 7 | 8 | initBMapApiLoader({ 9 | ak: 'KKG8EDD3V4vuyPGcjsLCt16PHacQIx3P', 10 | plugins: 'Lushu,TrackAnimation', 11 | // offline: true 12 | }) 13 | 14 | createApp(App) 15 | .use(Element) 16 | .use(router) 17 | .mount('#app') 18 | -------------------------------------------------------------------------------- /test/public/vehicle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangyanggu/vue-bmap-gl/10306b58bea5a0b52b4b5bae88922d19a5d69248/test/public/vehicle.png -------------------------------------------------------------------------------- /test/router/index.ts: -------------------------------------------------------------------------------- 1 | import {createRouter, createWebHashHistory} from "vue-router"; 2 | 3 | import Map from '../views/Map.vue'; 4 | import BezierCurve from "../views/BezierCurve.vue"; 5 | import Circle from "../views/Circle.vue"; 6 | import GroundOverlay from "../views/GroundOverlay.vue"; 7 | import InfoWindow from "../views/InfoWindow.vue"; 8 | import InfoWindowCustom from "../views/InfoWindowCustom.vue"; 9 | import Label from '../views/Label.vue' 10 | import Marker from '../views/Marker.vue' 11 | import Marker3d from '../views/Marker3d.vue' 12 | import Menu from '../views/Menu.vue' 13 | import Polygon from '../views/Polygon.vue' 14 | import Polyline from '../views/Polyline.vue' 15 | import Prism from "../views/Prism.vue"; 16 | import MapMask from "../views/MapMask.vue"; 17 | import XyzLayer from "../views/XyzLayer.vue"; 18 | 19 | export const routes = [ 20 | {path: '/',name: '地图', component: Map}, 21 | {path: '/bezierCurve',name: '贝塞尔曲线' , component: BezierCurve}, 22 | {path: '/circle',name: '圆' , component: Circle}, 23 | {path: '/groundOverlay',name: '地面叠加层' , component: GroundOverlay}, 24 | {path: '/infoWindow',name: '信息框', component: InfoWindow}, 25 | {path: '/infoWindowCustom',name: '自定义信息框', component: InfoWindowCustom}, 26 | {path: '/label', name: '文本', component: Label}, 27 | {path: '/marker', name: '标号', component: Marker}, 28 | {path: '/marker3d', name: '3D标号', component: Marker3d}, 29 | {path: '/menu', name: '菜单', component: Menu}, 30 | {path: '/polygon', name: '多边形', component: Polygon}, 31 | {path: '/polyline', name: '折线', component: Polyline}, 32 | {path: '/prism', name: '3D棱柱', component: Prism}, 33 | {path: '/mapMask', name: '掩膜',component: MapMask}, 34 | {path: '/xyzLayer', name: 'XYZLayer' ,component: XyzLayer}, 35 | ] 36 | 37 | export default createRouter({ 38 | history: createWebHashHistory(), 39 | routes 40 | }) 41 | -------------------------------------------------------------------------------- /test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "module": "CommonJS", 5 | "target": "ESNext", 6 | "lib": ["ESNext"] 7 | }, 8 | "include": [ 9 | "**/*.ts", 10 | "**/*.vue", 11 | "../node_modules/.pnpm/@amap+amap-jsapi-loader@1.0.1/node_modules/@amap/amap-jsapi-loader/src/global.d.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /test/views/BezierCurve.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 85 | 86 | 102 | -------------------------------------------------------------------------------- /test/views/Circle.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 93 | 94 | 110 | -------------------------------------------------------------------------------- /test/views/GroundOverlay.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 82 | 83 | 99 | -------------------------------------------------------------------------------- /test/views/InfoWindow.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 97 | 98 | 114 | -------------------------------------------------------------------------------- /test/views/InfoWindowCustom.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 88 | 89 | 105 | -------------------------------------------------------------------------------- /test/views/Label.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 83 | 84 | 100 | -------------------------------------------------------------------------------- /test/views/Map.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 54 | 55 | 71 | -------------------------------------------------------------------------------- /test/views/MapMask.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 55 | 56 | 72 | -------------------------------------------------------------------------------- /test/views/Marker.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 91 | 92 | 108 | -------------------------------------------------------------------------------- /test/views/Marker3d.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 67 | 68 | 84 | -------------------------------------------------------------------------------- /test/views/Menu.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 68 | 69 | 85 | -------------------------------------------------------------------------------- /test/views/Polygon.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 69 | 70 | 86 | -------------------------------------------------------------------------------- /test/views/Polyline.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 69 | 70 | 86 | -------------------------------------------------------------------------------- /test/views/Prism.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 80 | 81 | 97 | -------------------------------------------------------------------------------- /test/views/XyzLayer.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 51 | 52 | 69 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "strict": true, 5 | "module": "ES6", 6 | "target": "ES2018", 7 | "noImplicitAny": false, 8 | "declaration": true, 9 | "moduleResolution": "Node", 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "sourceMap": true, 13 | "lib": ["ES2018", "DOM"], 14 | "allowSyntheticDefaultImports": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "resolveJsonModule": true 17 | }, 18 | "include": [ 19 | "src", 20 | "amap.d.ts", 21 | "shims-vue.d.ts" 22 | ], 23 | "exclude": ["node_modules", "**/__test?__", "**/dist"] 24 | } 25 | -------------------------------------------------------------------------------- /typings/global.d.ts: -------------------------------------------------------------------------------- 1 | // GlobalComponents for Volar 2 | declare module '@vue/runtime-core' { 3 | export interface GlobalComponents { 4 | ElBmap: typeof import('vue-bmap-gl')['ElBmap'], 5 | ElBmapBezierCurve: typeof import('vue-bmap-gl')['ElBmapBezierCurve'], 6 | ElBmapCircle: typeof import('vue-bmap-gl')['ElBmapCircle'], 7 | ElBmapGroundOverlay: typeof import('vue-bmap-gl')['ElBmapGroundOverlay'], 8 | ElBmapInfoWindow: typeof import('vue-bmap-gl')['ElBmapInfoWindow'], 9 | ElBmapInfoWindowCustom: typeof import('vue-bmap-gl')['ElBmapInfoWindowCustom'], 10 | ElBmapLabel: typeof import('vue-bmap-gl')['ElBmapLabel'], 11 | ElBmapMarker: typeof import('vue-bmap-gl')['ElBmapMarker'], 12 | ElBmapMarker3d: typeof import('vue-bmap-gl')['ElBmapMarker3d'], 13 | ElBmapMenu: typeof import('vue-bmap-gl')['ElBmapMenu'], 14 | ElBmapMenuItem: typeof import('vue-bmap-gl')['ElBmapMenuItem'], 15 | ElBmapPolygon: typeof import('vue-bmap-gl')['ElBmapPolygon'], 16 | ElBmapPolyline: typeof import('vue-bmap-gl')['ElBmapPolyline'], 17 | ElBmapPrism: typeof import('vue-bmap-gl')['ElBmapPrism'], 18 | ElBmapMapMask: typeof import('vue-bmap-gl')['ElBmapMapMask'], 19 | ElBmapXyzLayer: typeof import('vue-bmap-gl')['ElBmapXyzLayer'], 20 | } 21 | } 22 | 23 | export {} 24 | -------------------------------------------------------------------------------- /typings/vue-shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue' 3 | // eslint-disable-next-line @typescript-eslint/ban-types 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | -------------------------------------------------------------------------------- /typings/vue-test-utils.d.ts: -------------------------------------------------------------------------------- 1 | import type { ComponentPublicInstance, CSSProperties } from 'vue' 2 | 3 | declare module '@vue/test-utils' { 4 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 5 | interface DOMWrapper { 6 | style: CSSProperties 7 | } 8 | 9 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 10 | interface VueWrapper { 11 | style: CSSProperties 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import {defineConfig} from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | root: './test', 7 | plugins: [vue()] 8 | }) 9 | --------------------------------------------------------------------------------