当前仓库属于暂停状态,部分功能使用受限,详情请查阅 仓库状态说明
30 Star 190 Fork 40

gyy / vue-mapvgl
暂停

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

vue-mapvgl

npm (tag) NPM downloads JS gzip size NPM star

:x: 由于百度需要开源文档认证,组件库停止维护,后续文档也会同步下线,有需要的可以下载代码本地运行查看文档,百度key也会失效,可以更换为自己的key

vue-mapvgl@next是一套基于Vue3 和百度mapvgl的地图组件。 该组件依赖于vue-bmap-gl@next,使用方式请查看教程 该版本对原组件进行升级,主要适配Vue3。

vue2请使用0.x版本,对应分支vue2

觉得有用可以给个star

捐赠支持

支付宝 微信

安装

npm i -S vue-mapvgl@next

文档

https://vue-mapvgl.guyixi.cn

快速上手

引入vue-bmap-gl@next、vue-mapvgl@next

// 引入vue-bmap-gl
import VueBMap, {initBMapApiLoader} from 'vue-bmap-gl';
import VueMapvgl from 'vue-mapvgl';
import 'vue-bmap-gl/dist/style.css';

// 初始化vue-bmap-gl
initBMapApiLoader({
  // 百度的key
  ak: 'YOUR_KEY',
});
createApp(App).use(VueBMap).use(VueMapvgl)

自动导入

首先你需要安装unplugin-vue-componentsunplugin-auto-import@vuemap/unplugin-resolver这三款插件

npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver

然后在main.ts中导入css和进行初始化key

import App from './App.vue'
import {initBMapApiLoader} from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css'
initBMapApiLoader({
    ak: 'YOUR_KEY'
})

createApp(App)
    .mount('#app')

再修改配置文件,把下列代码插入到你的 Vite 或 Webpack 的配置文件中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {VueBmapGlResolver, VueMapvglResolver} from '@vuemap/unplugin-resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VueBmapGlResolver(),VueMapvglResolver()],
    }),
    Components({
      resolvers: [VueBmapGlResolver(),VueMapvglResolver()],
    }),
  ]
})

组件

目前完成组件:

  • el-bmapv-view (图层管理器,图层的容器)
  • el-bmapv-point-layer (基础点图层 PointLayer)
  • el-bmapv-icon-layer (Icon图标图层 IconLayer)
  • el-bmapv-point-trip-layer (点轨迹图层 PointTripLayer)
  • el-bmapv-heat-point-layer (热力点图层 HeatPointLayer)
  • el-bmapv-heat-map-layer (热点图图层 HeatmapLayer)
  • el-bmapv-heat-grid-layer (热力柱图层 HeatGridLayer)
  • el-bmapv-spark-layer (烟花点图层 SparkLayer)
  • el-bmapv-circle-layer (圆图层 CircleLayer)
  • el-bmapv-ripple-layer (波纹点图层 RippleLayer)
  • el-bmapv-text-layer (文字图层 TextLayer)
  • el-bmapv-fan-layer (雷达图层 FanLayer)
  • el-bmapv-simple-line-layer (基础线图层 SimpleLineLayer)
  • el-bmapv-line-layer (宽线图层 LineLayer)
  • el-bmapv-wall-layer (立体墙图层 WallLayer)
  • el-bmapv-heat-line-layer (热力线图层 HeatLineLayer)
  • el-bmapv-line-flow-layer (蝌蚪线图层 LineFlowLayer)
  • el-bmapv-line-trip-layer (线轨迹图层 LineTripLayer)
  • el-bmapv-wall-trip-layer (墙轨迹图层 WallTripLayer)
  • el-bmapv-fly-line-layer (飞线图层 FlyLineLayer)
  • el-bmapv-shape-layer (基础面图层 ShapeLayer)
  • el-bmapv-shape-line-layer (线状面图层 ShapeLineLayer)
  • el-bmapv-polygon-layer (平面图层 PolygonLayer)
  • el-bmapv-cluster-layer (点聚合图层 ClusterLayer)
  • el-bmapv-honeycomb-layer (蜂窝图层 HoneycombLayer)
  • el-gltf-layer (百度针对gltf的实现)
  • el-gltf-three-layer (根据ThreeLayer以及ThreeJS进行扩展实现的模型加载图层)
  • el-bmapv-marker-list-layer (标注点组件 MarkerListLayer)
  • el-bmapv-bar-layer (柱状图层 BarLayer)

##mapvgl自带后处理器效果

  • 炫光特效 BloomEffect
  • 发光特效 BrightEffect

##mapvgl自带工具

  • 颜色值域生成器 Intensity
  • 3D曲线生成器 BezierCurve
  • 大地线生成器 GeodesicCurve(zh-cn/util/GeodesicCurve.md)
  • Od曲线生成器 OdCurve
MIT License Copyright (c) 2021 gyy Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

百度地图mapvgl组件的vue2和vue3 展开 收起
MIT
取消

发行版 (32)

全部

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/guyangyang/vue-mapvgl.git
git@gitee.com:guyangyang/vue-mapvgl.git
guyangyang
vue-mapvgl
vue-mapvgl
dev

搜索帮助

14c37bed 8189591 565d56ea 8189591