vue-mapvgl 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
vue-mapvgl 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
vue-mapvgl 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
vue-mapvgl 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
vue-mapvgl 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 编程语言
开源组织
地区 不详
投 递 者 vue-mapvgl
适用人群 未知
收录时间 2021-01-15

软件简介

vue-mapvgl 是一套基于 Vue 2.0 和百度地图 mapvgl 的地图组件,在百度 mapvgl 基础上增加 GltfThreeLayer 图层。

该组件依赖于 vue-bmap-gl,使用方式请查看文档: https://guyangyang.gitee.io/vue-mapvgl/ 

该项目基于 https://github.com/ElemeFE/vue-amap/ 修改开发。

组件

目前完成组件:

  • 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进行扩展实现的模型加载图层)

mapvgl 自带后处理器效果

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

mapvgl 自带工具

  • 颜色值域生成器 Intensity
  • 3D 曲线生成器 BezierCurve
  • 大地线生成器 GeodesicCurve(zh-cn/util/GeodesicCurve.md)
  • Od 曲线生成器 OdCurve
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (1)

加载中
打分: 力荐
不错
01/19 15:18
回复
举报
更多评论
发表了资讯
03/31 18:10

vue-mapvgl v0.0.25 版本发布,基于 mapvgl 的地图组件

vue-mapvgl v0.0.25 已经发布,这是一个基于 mapvgl 的地图组件。 此版本更新内容包括: 升级mapvgl至1.0.0-beta.119 为所有图层增加zoomThreshold,用来指定图层执行渲染的地图层级。GltfThreeLayer图层由于特殊性,将zoomThreshold属性添加到ThreeView组件中 增加QQ群,可以交流问题,群号见readme 详情查看:https://gitee.com/guyangyang/vue-mapvgl/releases/v0.0.25...

0
9
发表了资讯
03/16 16:37

vue-mapvgl v0.0.23 已经发布,基于 mapvgl 的地图组件

vue-mapvgl v0.0.23 已经发布,这是一个基于 mapvgl 的地图组件。 此版本更新内容包括: 升级threejs至0.126.1 升级mapvgl至1.0.0-beta.112 GltfThreeLayer图层销毁时增加销毁所有对象和事件能力,释放内存 解决GltfThreeLayer图层的infoWindow内容不支持点击问题 详情查看:https://gitee.com/guyangyang/vue-mapvgl/releases/v0.0.23...

0
3
发表了资讯
03/03 15:25

vue-mapvgl v0.0.22 已经发布,基于 mapvgl 的地图组件

vue-mapvgl v0.0.22 已经发布,这是一个基于 mapvgl 的地图组件。 此版本更新内容包括: 解决GltfThreeLayer 模型还未加载完成时更新数据导致抛异常 解决GltfThreeLayer 模型移动时infoWindow没有进行跟随问题 解决GltfThreeLayer 模型隐藏后还会继续触发事件问题 解决GltfThreeLayer 加载模型后模型没有显示问题 解决GltfThreeLayer 不添加events属性时无法正常触发tooltip功能 由于21版本之前错误发布,所以新的跳过21,直接2...

0
5
发表了资讯
02/24 17:29

vue-mapvgl v0.0.20 已经发布,基于 mapvgl 的地图组件

vue-mapvgl v0.0.20 已经发布,这是一个基于 mapvgl 的地图组件。 此版本更新内容包括: 解决GltfThreeLayer图层的infoWindow与tooltip不停刷新问题 解决触发GltfThreeLayer点击事件后还会继续触发地图click事件问题 CircleLayer增加unit参数 FanLayer增加unit参数 详情查看:https://gitee.com/guyangyang/vue-mapvgl/releases/v0.0.20...

0
6
发表于开发技能专区
02/09 16:01

vue-mapvgl v0.0.19 已经发布,基于 mapvgl 的地图组件

* 升级mapvgl 1.0.0-beta.105版本 * 增加MarkerListLayer图层 * 更新所有图层API,更新文档,适配1.0.0-beta.105版本API

0
3
发表于大前端专区
02/01 20:02

vue-mapvgl v0.0.18 已经发布,基于 mapvgl 的地图组件

vue-mapvgl v0.0.18 已经发布。vue-mapvgl 是一套基于 Vue 2.0 和百度地图 mapvgl 的地图组件。 此版本更新内容包括: GltfThreeLayer增加track参数,用于进行车辆跟踪 GltfThreeLayer增加tooltip功能,支持自定义内容 GltfThreeLayer增加infoWindow功能

0
1
发表了资讯
02/01 19:58

vue-mapvgl v0.0.18 发布,基于 mapvgl 的地图组件

vue-mapvgl v0.0.18 已经发布,此版本更新内容包括: GltfThreeLayer增加track参数,用于进行车辆跟踪 GltfThreeLayer增加tooltip功能,支持自定义内容 GltfThreeLayer增加infoWindow功能 vue-mapvgl是一套基于Vue 2.0和百度地图mapvgl的地图组件。 该组件依赖于vue-bmap-gl,使用方式请查看教程。 该项目基于 https://github.com/ElemeFE/vue-amap/ 修改开发 详情查看:https://gitee.com/guyangyang/vue-mapvgl/releases/v0.0...

0
1
发表于大前端专区
01/29 14:56

vue-mapvgl v0.0.17 版本发布,增加模型事件

vue-mapvgl v0.0.17 已经发布。vue-mapvgl 是一套基于 Vue 2.0 和百度地图 mapvgl 的地图组件。 此版本更新内容包括: * 解决GltfThreeLayer图层点击事件触发不稳定问题(该BUG是由于百度的threeLayer图层中修改了camera的projectionMatrix 值,但未对应的修改projectionMatrixInverse 导致的) * GltfThree模型增加mouseover和mouseout事件 本次为重要更新,建议更新。...

0
1
发表于大前端专区
01/29 14:52

vue-mapvgl v0.0.17 已经发布,基于 mapvgl 的地图组件

vue-mapvgl v0.0.17 已经发布,这是一个基于 mapvgl 的地图组件。 此版本更新内容包括: 解决GltfThreeLayer图层点击事件触发不稳定问题(该BUG是由于百度的threeLayer图层中修改了camera的projectionMatrix 值,但未对应的修改projectionMatrixInverse 导致的) GltfThree模型增加mouseover和mouseout事件 详情查看:https://gitee.com/guyangyang/vue-mapvgl/releases/v0.0.17...

0
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
01/21 14:05

Vue加载百度地图GL版本和mapvgl

1、安装依赖组件 npm install vue-bmap-gl --save npm install vue-mapvgl --save 2、在main.js中加载组件 import VueBMap from 'vue-bmap-gl'; import 'vue-bmap-gl/dist/style.css' import VueMapvgl from 'vue-mapvgl'; Vue.use(VueBMap); Vue.use(VueMapvgl); VueBMap.initBMapApiLoader({ ak: 'YOUR_KEY', v: '1.0' }); 该处的ak对应的值需要在百度的控制台中申请: http://lbsyun.baidu.com/apiconsole/k...

0
1
发表了博客
2020/04/14 13:50

Vue - Vue-CLI2 和 Vue-CLI3、Vue-CLI4的区别

周末在家新建了一个 Vue 测试项目,但不管怎么建,总会提示一些 有的没的,杂七杂八的信息,如:找不到 funding、存在多少漏洞(vulnerabilities) 什么的。如下所示: 寻思着,出现这些问题的原因,应该是一些 不太重要的依赖包 更新了版本 或 迁移了地址,导致之前的 Vue-CLI 找不到 对应的版本 或 依赖包地址了。 虽然暂时没发现这些错误对项目的运行和打包有啥影响,但是一句话,看着不爽。既然看着不爽,就想收拾它,怎么收拾...

0
3
2020/11/19 00:00

VUE|Vue实例

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! 1.创建一个Vue实例 之前初步学习了Vue的安装和一些简单介绍,这次就主要学习Vue实例。 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。 var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在...

0
0
发表了博客
2018/04/27 14:00

Vue--vue-Router

一.vue路由的基本使用 为什么需要路由? 因为我们通过component切换组件无法给组件传递参数 component切换组件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../vue2.4.4.js"></script> 9 </head...

0
1
发表了博客
2020/08/22 00:00

VUE|Vue实例

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! 1.创建一个Vue实例 之前初步学习了Vue的安装和一些简单介绍,这次就主要学习Vue实例。 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。 var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在...

0
0
发表于数据库专区
2020/01/02 10:21

VUE-认识Vue

1.认识Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以其轻量易用著称,vue.js和React.js发展速度...

0
1
发表于数据库专区
2020/01/02 10:45

VUE-Vue实例

4.Vue实例 4.1.创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括: el data methods 等等 接下来我们一 一介绍。 4.2.模板或元素 每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。 我们可以通过el属性来指定。 例如一段html模板: <div id="app"> </div> 然后创...

0
0
发表了博客
2019/06/23 21:29

[Vue] : Vue概述

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架。 Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。 Vue 核心的概念,就是让用户不再操作DOM元素,提高渲染效率,前端程序员只需要关心数据的业务逻辑,不再关系 DOM 是如何渲染的。 MVC 与 前端中的 MVVM...

0
1
发表于数据库专区
2020/01/02 11:53

VUE-vue-cli

9.vue-cli 9.1.介绍和安装 在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。 幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli 使用它能快速的构建一个web工程模板。 官网:https://github.com/vuejs/vue-cli 安装命令:npm install -g vue-cli 9.2.快速上手 我们新建一个module: 切换到该目录: 用vue-cli命令,快速搭建一个webpack的项目:v...

0
0
发表了博客
2019/04/04 11:41

vue -- vue实例

一、vue实例 let app = new Vue({ // 对象属性 ]) 二、对象属性 1、el 就是父DOM 2、data 所有vue上面操作的数据都会被写在这里 3、methods 所有的函数方法都写在这里 methods: { getFun () { console.log(123) } } 4、components 用来注册子组件用 5、props 这个是子元素用来接收父元素传递数据的属性 二、生命周期钩子函数 生命周期钩子函数 作用范围 beforeCreate el,data都为undefined,还没有初始化...

0
2
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
1 评论
25 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部