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 Exampletitle>
<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 level
var mymap = L.map('map').setView([51.505, -0.09], 13);
// Add tile layer to map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
maxZoom: 18,
}).addTo(mymap);
// Add marker to map
L.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'
- 注册 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>
在上例中，我们创建了一个 Leaflet 地图并使用 openstreetmap.org 的图层进行渲染。
以上就是在 Vue 中使用 Leaflet-Vue 库的基本步骤，如果想要看详细的教程，可以参考博主的Vue+LeafLet教程：《Vue+Leaflet入门》