vuemap/vue-amap 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
vuemap/vue-amap 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
vuemap/vue-amap 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 程序开发地图相关
开源组织
地区 国产
投 递 者 vuemap
适用人群 未知
收录时间 2021-10-15

软件简介

vuemap/vue-amap 是一套基于 Vue和高德地图的地图组件,当前支持vue2和vue3。
该版本对原 vue-amap 组件进行升级,主要适配 amap2.0 相关的接口,同时调整事件绑定形式,调整为使用 v-on 进行事件绑定。
组件中对高德可视化组件 loca 进行封装,同时提供基础的 ThreeJS 能力,可以正常加载 GLTF 模型,获取模型对象进行细节控制。
该项目基于 https://github.com/ElemeFE/vue-amap/ 进行二次开发

快速上手

// 引入vue-amap
import VueAMap from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';

Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'YOUR_KEY',
});

//如果需要使用自定义的threeJS相关的组件,需要格外引入库中的three。该包只提供常用的模型加载,灯光,HDR等相关能力,更细致的控制需要在模型初始化后获取对象进行操作
import VueAmapThree from '@vuemap/vue-amap/dist/three'
Vue.use(VueAmapThree);

 

示例

<template>
    <div class="amap-page-container">
      <el-amap ref="map" map-style="amap://styles/62009be025f187dd3eafe327d2e55b8e" :center="center" :zoom="zoom" view-mode="3D" @init="initMap" @click="clickMap" class="amap-demo">
      </el-amap>

      <div class="toolbar">
        <button @click="getMap()">获取map实例</button>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        return {
          zoom: 12,
          center: [121.59996, 31.197646],
        };
      },

      methods: {
        getMap() {
          console.log(this.$refs.map.$$getInstance());
        },
        clickMap(e){
          console.log('click map :', e );
        },
        initMap(e){
          console.log('init map: ', e);
        }
      }
    };
  </script>

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣 发布并加入讨论🔥
发表了资讯
02/18 09:32

@vuemap/vue-amap-loca 2.1.1 版本重大更新

🎉@vuemap/vue-amap-loca 迎来小版本更新,本次更新主要增加loca的types,方便后续自定义开发使用。具体更新如下: 销毁loca时增加关闭动画操作 增加loca的types文件 loca的types文件地址:@vuemap/amap-loca-types

0
0
发表了资讯
02/04 09:59

@vuemap/vue-amap 2.1.0 版本重大更新

🎉@vuemap/vue-amap迎来重要更新,本次更新以下几个功能: 所有组件使用组合式API重写 增加@vuemap/amap-jsapi-types,从官方仓库fork出来,完善AMap命名空间下的所有对象 所有@vuemap/vue-amap下的组件的$$getInstance方法返回的对象全部返回正确的TS类型 所有组件增加对应的Instance类型,用于ref使用,比如 const mapRef = ref<ElAmapInstance>() 开放坐标系转化工具类,提供常用的bd09 gcj02 wgs84 之间的转化...

1
2
发表了资讯
2023/09/16 21:56

@vuemap/vue-amap-extra 2.0.11 版本发布

@vuemap/vue-amap配套的threeJS扩展库更新了,这次更新主要提高threejs与高德JSAPI2.0结合的性能,同时优化了gltf模型加载,通过clone方式共用材质降低内存使用。基础的three-layer图层扩展了事件系统,现在自定义添加到场景中的模型也可以触发事件了。 优化three-layer图层渲染机制 three-layer图层添加click mouseover mouseout事件,优化three事件系统,支持自定义物体也能触发事件 three-layer添加webGLRendererParameters...

1
1
发表了资讯
2023/08/10 09:58

@vuemap/vue-amap 2.0.18 版本更新

简介 @vuemap/vue-amap是一套基于Vue3 和高德地图2.0的地图组件。组件提供了对高德JSAPI、loca常用插件的封装,并额外扩展了很多自定义图层能力,如:自定义纠偏瓦片图层、区划聚合图层、视频图层、gltf加载、3dtiles加载等。 支持全量导入、按需导入和自动导入。 本次更新 @vuemap/vue-amap迎来新的更新,本次更新主要解决一个历史遗留BUG,增加一个新的自定义图层。 1、解决部分开发环境加载组件后提示POLYGON_CLIPPING_MAX_...

0
1
发表了资讯
2023/02/13 10:31

@vuemap/vue-amap 2.0.0 版本重大更新

❌破坏性变更 2.0版本不再使用next标签,直接使用last标签,也就是说从2.0开始直接安装@vuemap/vue-amap时将会直接安装为Vue3版本 现有vue2版本将会标记为legacy,并只做BUG修复 initAMapApiLoader默认参数里不再加载loca,只加载JSAPI 整个组件库将进行拆包,拆分为@vuemap/vue-amap、@vuemap/vue-amap-loca、@vuemap/vue-amap-extra,主包只提供JSAPI相关的组件,loca组件移到loca库,extra提供threejs等相关扩展的组件...

0
2
发表了资讯
2022/08/19 11:10

@vuemap/vue-amap 1.1.11 版本发布

@vuemap/vue-amap 1.1.11 发布,本次更新主要增加组件库使用的便利性 新特性 增加鼠标操作工具组件,用于绘制点、线、面等等 增加点和矢量图形的位置和路径的v-model实现 BUG修复 解决组件名称冲突 优化threejs面图层材质逻辑,加快加载速度 文档地址:首页 | @vuemap/vue-amap (guyixi.cn)

0
2
发表了资讯
2022/08/16 16:29

@vuemap/vue-amap 1.1.10 版本发布

@vuemap/vue-amap迎来了1.1.10版本更新,本次更新涉及到多方面 新增功能: 地图的center、zoom、rotation、pitch支持v-model了,再也不用使用原生方法去修改地图参数 threejs部分增加video图层,可以将视频任意放置旋转到需要的位置 threejs部分增加环境光、平行光、半球光、点光源、聚光灯组件,可以任意添加灯光,修改灯光位置 threejs部分增加面图层,面图层顶部、侧面、地图支持单独配置,侧面支持颜色渐变、贴图,且所有面...

3
8
发表了资讯
2022/07/25 15:01

@vuemap/vue-amap 1.1.8 版本发布

增加视频图层 重构ThreeLayer图层 重构Gltf图层 Gltf图层增加移动动画和高度属性 增加Loca的激光图层Loca.LaserLayer

0
2
发表了资讯
2022/04/24 11:59

vuemap/vue-amap 1.1.2 版本发布

@vuemap/vue-amap的vue3版本迎来了重大更新,新版本版本号1.1.2,该版本有三大重要变化 1、地图组件现在支持包装使用了,可以将多个子组件按业务情况进行包装使用,比如叠加高精地图,可以将线和面封装到一个vue文件中,在多处使用 2、新特性,现在支持自定义自己的地图组件,提供了registerMixin 3、initAMapLoader增加securityJsCode和serviceHost,用于适应新版本的key 4、增加定位组件 el-amap-control-geolocation 下面是新...

0
2
发表了资讯
2022/04/18 11:13

vuemap/vue-amap 0.1.0 版本重大更新

@vuemap/vue-amap的vue2版本迎来了重大更新,新版本版本号0.1.0,该版本有三大重要变化 1、地图组件现在支持包装使用了,可以将多个子组件按业务情况进行包装使用,比如叠加高精地图,可以将线和面封装到一个vue文件中,在多处使用 2、新特性,现在支持自定义自己的地图组件,提供了registerMixin 3、initAMapLoader增加securityJsCode和serviceHost,用于适应新版本的key 下面是新版本的示例 1、地图组件包装 创建 CustomLoca...

0
1
发表了资讯
2021/12/30 14:47

@vuemap/vue-amap 1.0.2版本紧急发布

@vuemap/vue-amap是一个基于vue和高德地图2.0封装的vue地图组件库,对amapJS和loca做了常用封装。 vue3.0版本组件的参数和事件没有做任何调整,可以平滑的从vue2升级到vue3 本次更新 修复打包后地图无法加载问题 NPM安装 npm install @vuemap/vue-amap@next --save 引入组件 import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap'; import '@vuemap/vue-amap/dist/style.css' initAMapApiLoader({ key: 'Y...

0
6
发表了资讯
2021/12/28 09:17

@vuemap/vue-amap vue3 版本正式发布

@vuemap/vue-amap是一个基于vue和高德地图2.0封装的vue地图组件库,对amapJS和loca做了常用封装。 本次更新,组件的参数和事件没有做任何调整,可以平滑的从vue2升级到vue3 本次更新 组件全面升级支持vue3 代码使用typescript重写 增加IDE提示文件,快捷开发 文档全面更新,使用vuepress 2.0版本重新编写。文档地址 支持treeshake 破坏性变更 库加载方式调整,需使用vue3的方式进行注册库 infoWindow的visible属性不再支持.sy...

0
4
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
27 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部