vuleaflet

简介：

vue3 版本的 leaflet 组件, leaflet 版本基于 @1.9.3

安装

npm i vuleaflet -S

使用

在main.js中引入并全局注册

import Vuleaflet from 'vuleaflet';
import 'vuleaflet/lib/style.css';

app.use(Vuleaflet);

在需要使用的组件中使用

<script setup>
const onReady = (mapInstance) => {
	console.log(mapInstance);
	console.log('L', L);
};
</script>

<template>
	<div class="wrapper">
		<VuLeaflet @onReady="onReady" />
	</div>
</template>

<style scoped>
.wrapper {
	width: 1200px;
	height: 400px;
	margin: 100px auto;
}
</style>

属性

属性名	类型	默认值	说明
zoom	Number	5	地图缩放级别
center	Array | Object	{ lat: 36.58, lng: 98.97 }	地图中心点
showBaseLayer	Boolean	true	是否加载地图，默认使用天地图影像
config	Object	{}	其他额外参数，透传 leaflet 初始化参数的 Options 选项

方法

方法名称	说明	回调参数
onReady	底图初始化完成后的回调，第一个参数为地图实例	Function(mapInstance)