请先关注 [低调大师] 公众号 优秀的自媒体个人博客,低调大师,许军

低调大师

您现在的位置是:首页>文章详情

文章详情

vue-mapvgl vue3 版本正式发布

2022-01-24 130热度

vue-mapvgl 是一个基于vue和百度地图mapvgl封装的vue地图组件库,提供了常用组件封装,格外提供基础的模型加载和操作能力。

本次更新

  • 组件全面升级支持vue3
  • 代码使用typescript重写
  • 增加IDE提示文件,快捷开发
  • 文档全面更新,使用vuepress 2.0版本重新编写。文档地址
  • 支持treeshake

破坏性变更

  • 库加载方式调整,需使用vue3的方式进行注册库
  • 移除bmapManager,获取地图实例的方式将只支持ref和绑定init事件
  • 移除所有组件events属性,事件绑定使用v-on形式
  • 所有图层增加init事件,用于获取图层实例对象

NPM安装

 npm install vue-bmap-gl@next --save npm install vue-mapvgl@next --save

引入组件

 import App from './App.vue' import VueBMap, {initBMapApiLoader} from 'vue-bmap-gl'; import 'vue-bmap-gl/dist/style.css' import VueMapvgl from 'vue-mapvgl' initBMapApiLoader({  ak: 'YOUR_KEY' })  createApp(App)  .use(VueBMap)  .use(VueMapvgl)  .mount('#app')

示例

 <template>  <div class="map-container">  <el-bmap  :center="center"  :zoom="zoom"  :tilt="75"  >  <el-bmapv-view>  <el-bmapv-bar-layer  :visible="visible"  type="light"  :data="data"  :edge-count="50"  :size="200"  @init="initLayer"  />  </el-bmapv-view>  </el-bmap>  </div>  <div class="control-container">  <button @click="switchVisible">  {{ visible ? '隐藏图层' : '显示图层' }} </button>  </div> </template>  <script lang="ts"> import {defineComponent} from "vue";  export default defineComponent({ name: "Map",  components: { },  data(){ return { zoom: 15,  center: [121.5273285, 31.21515044],  visible: true,  data: [{ geometry: { type: 'Point',  coordinates: [121.5273285, 31.21515044],  },  height: 100  },{ geometry: { type: 'Point',  coordinates: [121.5473285, 31.21515044],  },  height: 300  }] } },  methods: { switchVisible(){ this.visible = !this.visible;  },  initLayer(layer){ console.log('init: ', layer) } } }) </script>  
原文链接:https://www.oschina.net/news/179961/vue-mapvgl-vue3-released
收藏 (0)

相关文章

    文章评论

    共有0条评论来说两句吧...