vue-mapvgl vNext Release: Vue 3 Support, TypeScript Rewrite, and New Features

Release Highlights

Component library fully upgraded to support Vue 3.

Codebase rewritten in TypeScript.

IDE hint files added for faster development.

Documentation completely refreshed using VuePress 2.0.

Tree‑shake support enabled.

Breaking Changes

Library loading method changed; must register with Vue 3 style.

Removed bmapManager; map instance can now only be obtained via ref or init event binding.

All component "events" props removed; use v‑on syntax for event binding.

All layers now emit an init event to obtain the layer instance.

NPM Installation

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

Import Components

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')

Example

<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>