vue-mapvgl vue3 版本正式发布

内容简介：vue-mapvgl 是一个基于vue和百度地图mapvgl封装的vue地图组件库，提供了常用组件封装，格外提供基础的模型加载和操作能力。 本次更新 组件全面升级支持vue3 代码使用typescript重写 增加IDE提示文件，快捷开发 文...

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。