Leaflet带你玩转GIS数据展示

Leaflet带你玩转GIS数据展示

引用

CSDN

等

10

来源

1.

https://blog.csdn.net/zjjsd195/article/details/123753255

2.

https://blog.csdn.net/pyluyuan/article/details/136788025

3.

https://wenku.csdn.net/column/6agn5tduhc

4.

https://leafletjs.cn/examples.html

5.

https://juejin.cn/post/7254029763265232957

6.

https://leafletjs.cn/2013/06/28/leaflet-plugin-authoring-guide.html

7.

https://www.cnblogs.com/csincs/p/17534259.html

8.

https://leafletjs.cn/examples/quick-start/

9.

https://leafletjs.cn/2022/09/21/leaflet-1.9.0.html

10.

https://developer.aliyun.com/article/1001273

随着Web技术的发展，地理信息系统（GIS）已经成为现代应用开发的重要组成部分。Leaflet作为一款轻量级、易用的地图库，凭借其丰富的功能和插件生态系统，成为了开发者们的首选工具。本文将通过详细教程，帮助你快速掌握Leaflet的基础用法，开启地图开发之旅。

Leaflet是一个开源的JavaScript地图库，具有以下显著特点：

1. 轻量级：仅42KB的体积，加载速度快
2. 移动端友好：在手机和平板上也能流畅运行
3. 功能丰富：支持标记、折线、弹出窗口等常用功能
4. 插件丰富：拥有数十个高质量插件，可扩展性强
5. 文档完善：提供详细的官方文档和教程

1. 引入Leaflet库

你可以通过CDN或npm来引入Leaflet。

CDN方式：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>

npm方式：

npm install leaflet@1.9.3

在项目中引入：

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

2. 创建地图容器

在HTML中添加一个div元素作为地图容器：

<div id="map" style="height: 500px; width: 100%"></div>

注意：必须设置容器的高度，否则地图无法显示。

1. 初始化地图

使用L.map()方法初始化地图：

var map = L.map('map').setView([39.9042, 116.4074], 10);

这里设置地图中心点为北京的经纬度，并设置初始缩放级别为10。

2. 添加地图瓦片服务

使用L.tileLayer()方法添加地图瓦片服务：

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

这将添加OpenStreetMap的地图瓦片服务。

1. 添加标记

使用L.marker()方法添加标记：

var marker = L.marker([39.9042, 116.4074]).addTo(map);
marker.bindPopup("<b>你好，北京！</b>").openPopup();

2. 添加圆

使用L.circle()方法添加圆：

var circle = L.circle([39.9042, 116.4074], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 5000 // 半径单位是米
}).addTo(map);

3. 添加多边形

使用L.polygon()方法添加多边形：

var polygon = L.polygon([
    [39.9042, 116.4074],
    [39.9042, 116.4174],
    [39.9142, 116.4074]
]).addTo(map);

4. 处理地图事件

监听地图点击事件：

map.on('click', function(e) {
    alert("你点击了地图坐标：" + e.latlng);
});

1. 使用GeoJSON数据

GeoJSON是一种用于编码各种地理数据结构的格式。Leaflet支持直接添加GeoJSON数据：

var geojsonFeature = {
    "type": "Feature",
    "properties": {
        "name": "北京"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [116.4074, 39.9042]
    }
};

L.geoJSON(geojsonFeature).addTo(map);

2. 管理图层组

使用L.layerGroup()管理多个图层：

var layerGroup = L.layerGroup([marker, circle, polygon]).addTo(map);

3. 自定义图标

可以自定义标记的图标：

var customIcon = L.icon({
    iconUrl: 'my-icon.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
});

L.marker([39.9042, 116.4074], {icon: customIcon}).addTo(map);

通过以上教程，你已经掌握了Leaflet的基本用法，包括环境搭建、核心功能和一些进阶技巧。Leaflet的强大之处在于其丰富的插件生态系统，你可以根据项目需求选择合适的插件来扩展功能。

想要深入了解Leaflet的更多功能？不妨访问Leaflet官方文档，那里有详尽的API文档和更多实用教程等待你去探索。

现在，就动手创建你自己的交互式地图吧！