vue-leaflet 画面

Vue-Leaflet 是一个 Vue.js 的 Leaflet 地图组件库，用于在 Vue.js 应用程序中显示交互式地图。它基于 Leaflet.js，提供了一些方便的组件和指令，帮助开发人员轻松地集成 Leaflet 地图到 Vue.js 项目中。

要在 Vue.js 应用程序中使用 Vue-Leaflet，首先需要安装它。可以通过 npm 或 yarn 来安装：

npm install vue2-leaflet leaflet

安装完成后，在 Vue 组件中引入所需的组件和指令，并在模板中使用它们来显示地图。

下面是一个简单的示例，展示如何使用 Vue-Leaflet 绘制一个地图：

<template>
  <l-map :zoom="zoom" :center="center">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker :lat-lng="markerLatLng"></l-marker>
  </l-map>
</template>

<script>
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker,
  },
  data() {
    return {
      zoom: 13,
      center: [51.505, -0.09],
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
      markerLatLng: [51.505, -0.09],
    };
  },
};
</script>

在上面的示例中，我们使用 `<l-map>` 组件来创建一个地图，并设置了初始的缩放级别和中心坐标。使用 `<l-tile-layer>` 组件加载地图瓦片图层，这里使用了 OpenStreetMap 的瓦片图层。

然后，使用 `<l-marker>` 组件添加一个标记点到地图上，设置了标记点的经纬度坐标。

以上就是使用 Vue-Leaflet 绘制地图的简单示例。你可以根据自己的需要，使用不同的组件和指令来创建更复杂的地图交互功能。