Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12 日至 13 日。

nuxt-maplibre
nuxt-maplibre

Maplibre 与 Nuxt 集成

nuxt-maplibre

Nuxt Maplibre

npm versionnpm downloadsLicenseNuxt

一个用于使用 MapLibre 的 Nuxt 模块。它是使用 vue-maplibre-gl 创建的,后者是 MapLibre 的 Vue 3 包装器,它将原始 MapLibre API 作为 Vue 组件公开。

这个模块实际上只是为了让它在 Nuxt 中工作而无需任何配置。

特性

  • ⚡  无需配置
  • 🦺  TypeScript 支持
  • 🚠  自动导入

快速设置

npx nuxi@latest module add nuxt-maplibre

就是这样!您现在可以在您的 Nuxt 应用中使用 MapLibre ✨

用法

有关可用组件的完整列表,请查看 vue-maplibre-gl 文档

基础

<template>
  <MglMap
    :map-style="style"
    :center="center"
    :zoom="zoom"
  >
    <MglNavigationControl />
  </MglMap>
</template>

<script setup>
const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
const center = [-1.559482, 47.21322];
const zoom = 8;
</script>

开发

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release