vue-mapvgl

library0.0.34jsnpmunverified

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.

web-framework

npm install vue-mapvgl

package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-MAPVGL

vue-mapvgl

web-frameworkjavascriptv0.0.34

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueMapvgl

✓ import VueMapvgl from 'vue-mapvgl'

✗ const VueMapvgl = require('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

✓ import VueBMap from 'vue-bmap-gl'

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

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>

Debug

Known issues

breakingThe `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.

affects: >=0.0.1

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

affects: >=0.0.1

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

affects: >=0.0.1

Errors

Common errors & fixes

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

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

Baidu Map API is not loaded or ak is invalid.

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.

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

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.

Upgrade

Version history

0.0.34latest on npm

Audit

Dependencies

vue-bmap-glrequiredProvides the foundational Baidu Maps GL instance that vue-mapvgl components operate on.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-mapvgl ↗

homepagehttps://gitee.com/guyangyang/vue-mapvgl#readme ↗