Nuxt Leaflet
一个用于使用 Leaflet 的 Nuxt 模块。它是使用 Vue Leaflet 构建的,Vue Leaflet 是 Leaflet 的 Vue 3 封装,它将原始 Leaflet API 作为 Vue 组件公开。
这个模块的真正目的就是让它在 Nuxt 中无需任何配置即可工作。
功能
- ⚡ 无需配置
- 🦺 TypeScript 支持
- 🚠 自动导入
快速设置
npx nuxi@latest module add @nuxtjs/leaflet
就是这样!您现在可以在 Nuxt 应用中使用 Leaflet 了 ✨
使用
有关可用组件的完整列表,请查看官方文档库。
基本
<template>
<div style="height:100vh; width:100vw">
<LMap
ref="map"
:zoom="zoom"
:center="[47.21322, -1.559482]"
:use-global-leaflet="false"
>
<LTileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution="&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors"
layer-type="base"
name="OpenStreetMap"
/>
</LMap>
</div>
</template>
<script setup>
import { ref } from 'vue'
const zoom = ref(6)
</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 Vitest
npm run test
npm run test:watch
# Release new version
npm run release