Vue Components for Baidu MapVGL (Vue 2)

0.0.34 verified Sat Apr 25 auth: no javascript abandoned

vue-mapvgl is a Vue 2 component library designed to integrate Baidu's MapVGL 3D geographic information visualization library with Vue applications via vue-bmap-gl. It provides a set of pre-built components (e.g., `el-bmapv-point-layer`, `el-bmapv-heat-map-layer`) that simplify the process of adding advanced 3D data visualizations like heatmaps, flow lines, and complex geometric layers onto Baidu Maps GL instances. The package is currently at version 0.0.34, which is specific to Vue 2 environments. The project's 0.x line has been officially announced as unmaintained due to Baidu's documentation certification requirements, making it an abandoned package for Vue 2 development. A separate `@next` version exists for Vue 3, but this registry entry pertains to the 0.x series. It relies heavily on `vue-bmap-gl` for the underlying Baidu Maps GL instance.

Common errors

error [Vue warn]: Unknown custom element: <el-bmap> ↓

cause `vue-bmap-gl` (or `vue-mapvgl`) plugins were not registered correctly with Vue.

fix

Ensure Vue.use(VueBMap); and Vue.use(VueMapvgl); are called before creating the Vue instance, typically in main.js.

error Baidu Map API is not loaded or ak is invalid. ↓

cause The Baidu Maps JavaScript API loader failed, most likely due to a missing or incorrect API Key (AK), or a network issue preventing the script from loading.

fix

Check your network connection. Ensure VueBMap.initBMapApiLoader({ ak: 'YOUR_KEY' }) is called with a valid, active Baidu Maps API Key and that the key has appropriate permissions.

error TypeError: Cannot read properties of undefined (reading 'View') ↓

cause The underlying `mapvgl` library or its components are not correctly initialized or accessible within the `vue-mapvgl` wrapper, possibly due to incorrect dependency setup or API loading issues.

fix

Verify that vue-bmap-gl and vue-mapvgl are installed and registered correctly. Ensure the Baidu Maps API (including WebGL version) is loaded and the mapvgl script is accessible.

Warnings

breaking The `vue-mapvgl` project for Vue 2 (0.x versions) has been officially declared as unmaintained due to Baidu's requirements for open-source documentation certification. This means there will be no further updates, bug fixes, or security patches for this version. ↓

fix For new projects, consider `vue-mapvgl@next` (if actively maintained) or alternative mapping libraries. For existing projects, be aware of the lack of support and potential vulnerabilities.

gotcha A Baidu Maps API Key (AK) is strictly required for `vue-bmap-gl` (and thus `vue-mapvgl`) to function. Without a valid AK, the map will not load or function correctly, often leading to blank maps or errors in the console. ↓

fix Obtain an application key from the Baidu Maps LBS Cloud platform (lbsyun.baidu.com) and provide it during the `initBMapApiLoader` call.

gotcha Coordinate order in `mapvgl` layers is typically `[longitude, latitude]` (`[lng, lat]`). However, some Baidu Map API methods or external data sources might provide coordinates in `[latitude, longitude]` (`[lat, lng]`) order, leading to incorrect rendering. ↓

fix Always verify the coordinate order of your data. If necessary, swap coordinates to `[longitude, latitude]` before passing them to `vue-mapvgl` layer components.

Install

npm install vue-mapvgl

yarn add vue-mapvgl

pnpm add vue-mapvgl

Imports

VueMapvgl
wrong
```
const VueMapvgl = require('vue-mapvgl')
```
correct
```
import VueMapvgl from 'vue-mapvgl'
```
CommonJS require() is not the idiomatic way for Vue plugins in modern setups; use ES Module imports. For Vue 2, VueMapvgl is usually globally registered with `Vue.use()`.
VueBMap
wrong
```
import { VueBMap } from 'vue-bmap-gl'
```
correct
```
import VueBMap from 'vue-bmap-gl'
```
While not part of `vue-mapvgl` directly, `VueBMap` from the peer dependency `vue-bmap-gl` is essential for setup and typically imported as a default export for `Vue.use()`.
el-bmapv-point-layer
```
<el-bmapv-point-layer :data="pointData"></el-bmapv-point-layer>
```
Components are globally registered via `Vue.use(VueMapvgl)` and used directly in templates. No direct import of individual components is typically required or supported.

Quickstart

Demonstrates the basic setup of `vue-mapvgl` with `vue-bmap-gl` in a Vue 2 application, including global plugin registration and rendering a simple point layer on a Baidu Map GL instance.

import Vue from 'vue';
import App from './App.vue';
import VueBMap from 'vue-bmap-gl';
import VueMapvgl from 'vue-mapvgl';
import 'vue-bmap-gl/dist/style.css';

Vue.use(VueBMap);
Vue.use(VueMapvgl);

VueBMap.initBMapApiLoader({
  // Replace 'YOUR_BAIDU_MAP_AK' with your actual Baidu Maps API Key
  // Get a key from: http://lbsyun.baidu.com/apiconsole/key#/home
  ak: process.env.VUE_APP_BAIDU_MAP_AK ?? 'YOUR_BAIDU_MAP_AK_MISSING',
  v: '1.0' // Baidu SDK version, default is 1.0
});

new Vue({
  render: h => h(App),
}).$mount('#app');

// In App.vue
<template>
  <div id="app">
    <el-bmap vid="bmap-demo" :zoom="13" :center="center" class="map-container">
      <el-bmapv-view>
        <el-bmapv-point-layer :data="points" :options="layerOptions"></el-bmapv-point-layer>
      </el-bmapv-view>
    </el-bmap>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      center: [116.404, 39.915], // Beijing coordinates
      points: [
        { geometry: { type: 'Point', coordinates: [116.404, 39.915] } },
        { geometry: { type: 'Point', coordinates: [116.45, 39.92] } },
        { geometry: { type: 'Point', coordinates: [116.38, 39.90] } }
      ],
      layerOptions: {
        size: 20,
        color: 'rgba(50, 50, 255, 0.8)',
        shape: 'circle'
      }
    };
  },
  mounted() {
    console.log('Map initialized with vue-mapvgl layers.');
  }
};
</script>

<style>
.map-container {
  width: 100vw;
  height: 100vh;
}
</style>