vueuse-bmap-vgl

vueuse-bmap-vgl

Vue 3 组合式 API (Composition API) 封装的百度地图 MapVGL 可视化库。

特性

• 🚀 高性能渲染：针对海量点/线/面要素进行浅层响应式优化，避免递归代理带来的主线程卡顿。
• 👁 智能 View 调度：提供统一的 View 实例检索体系（显式传入 -> 祖先注入 -> 默认单例创建），完美保障各图层间的 renderOrder 层级顺序。
• 🎯 开箱即用鼠标拾取：内置 usePick / 各图层方法，支持便捷获取鼠标悬停或点击命中的地理要素数据。
• 💎 全量类型支持：内置完整的 TypeScript 类型声明与 JSDoc 注释。

安装

# npm
npm install vueuse-bmap-vgl vueuse-bmap-jsapi mapvgl vue

# pnpm
pnpm add vueuse-bmap-vgl vueuse-bmap-jsapi mapvgl vue

快速上手

<template>
  <div ref="container" style="width: 100%; height: 600px;" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useBmap } from 'vueuse-bmap-jsapi'
import { useView, useIconLayer, useLineLayer, usePolygonLayer } from 'vueuse-bmap-vgl'

const { container } = useBmap()

// 1. 创建共享的 MapVGL View
const { view } = useView()

// 2. 挂载点标注图层
const { data: iconData, pick: pickIcon } = useIconLayer({
  view,
  renderOrder: 3,
  options: {
    width: 32,
    height: 32,
    offset: [0, -16],
  },
  data: [
    {
      geometry: { type: 'Point', coordinates: [116.404, 39.915] },
      properties: { icon: '/marker.png', title: '示例点位' },
    },
  ],
})
</script>

支持的图层 Hooks

• useView: 创建或绑定 MapVGL 视图上下文
• useIconLayer: 图标点图层
• useLineLayer: 折线/飞线图层
• usePolygonLayer: 多边形面图层
• usePick: 全局地图要素鼠标拾取

License

MIT