GIS入门，Leaflet介绍，Leaflet可以做什么，网页中如何使用Leaflet地图，vue中如何使用Leaflet地图

Vue+LeafLet教程推荐：《Vue+Leaflet入门》

Leaflet介绍

Leaflet是一个开源的JavaScript库，用于创建交互式的地图和地图应用。Leaflet框架具有轻量级、灵活性强、易于使用和扩展等特点，支持各种地图服务商（如OpenStreetMap、Google Maps、Bing等）和自定义地图图层。

Leaflet可以用来做什么

Leaflet可以实现在地图上添加标记、绘制线条、多边形和圆形、显示弹出框等常用地图交互功能，并提供了丰富的插件和API，使得用户可以根据自己的需求自定义地图的样式和交互行为。
Leaflet提供了一组灵活而强大的API，可以帮助开发人员在网页或移动应用中实现各种地图功能，包括：

显示地图、标记点、多边形等各种地理数据
支持各种地图图层，如Google地图、OpenStreetMap、Bing Map等
支持各种交互行为，如缩放、拖曳、旋转、标记点的点击等
提供各种工具，如搜索、路径规划、地理编码等
支持各种扩展功能，如3D地图、室内地图等

总的来说，通过Leaflet可以轻松快捷地创建一个功能完善的地图应用。

html网页如何使用Leaflet

要在 HTML 中使用 Leaflet，你需要在 HTML 文件中链接 Leaflet 库和相关 CSS 文件。

以下是一个基本的 HTML 页面，其中包括 Leaflet 库和样式表，以及一个用于显示地图的 div 元素。

<!DOCTYPE html>
<html><head><title>Leaflet Map Example</title><meta charset="utf-8" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.5.1/leaflet.css" /><script src="https://cdn.jsdelivr.net/leaflet/1.5.1/leaflet.js"></script><style>#map {height: 500px;width: 100%;}</style></head><body><div id="map"></div><script>// Create map instance and set its center and zoom levelvar mymap = L.map('map').setView([51.505, -0.09], 13);// Add tile layer to mapL.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',maxZoom: 18,}).addTo(mymap);// Add marker to mapL.marker([51.5, -0.09]).addTo(mymap);</script></body>
</html>

在这个例子中，我们首先链接了 Leaflet 库和样式表，并在 head 部分定义了一个 CSS 样式，用于设置地图容器的宽度和高度。

在 body 中，我们创建了一个 div 元素，用作地图容器，并通过 JavaScript 创建了一个 Leaflet 地图实例，并将其添加到该 div 元素中。

然后，我们添加了一个 OpenStreetMap 的图层，并将其添加到地图实例中。最后，我们在地图上添加了一个标记，以在地图上显示一个点。

这只是一个简单的例子，你可以根据需要使用 Leaflet 的许多其他功能来自定义地图。

vue中使用Leaflet

如果你想在 Leaflet 中使用 Vue，你需要使用 Leaflet-Vue 库。这个库为 Leaflet 提供了一个 Vue 组件钩子，使得你可以轻松地将 Vue 组件注入到 Leaflet 中。

以下是如何在 Vue 中使用 Leaflet-Vue 库的步骤：

安装 Leaflet-Vue 库

你可以使用 npm 或者 yarn 安装 Leaflet-Vue 库

npm:

npm install leaflet-vue --save

yarn:

yarn add leaflet-vue

引入 Leaflet 和 Leaflet-Vue 库

在你的 Vue 组件中，你需要引入 Leaflet 和 Leaflet-Vue 库。

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer } from 'leaflet-vue'

在你的 Vue 组件中，你需要注册 Leaflet-Vue 组件。

export default {components: {LMap,LTileLayer},// your component code...
}

在 Vue 模板中使用 Leaflet-Vue 组件

你可以在你的 Vue 模板中使用 Leaflet-Vue 组件。例如，你可以使用 LMap 组件来创建一个 Leaflet 地图，使用 LTileLayer 组件来加载图层，如下所示：

<template><LMap :zoom="zoom" :center="center"><LTileLayer :url="url"></LTileLayer></LMap>
</template><script>
export default {data() {return {zoom: 13,center: [51.505, -0.09],url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'};}
};
</script>