0
0

【GIS】Leaflet：Web地图快速上手

Leaflet 是一个轻量级的开源 JavaScript 库，专为构建交互式地图而设计。它功能丰富，支持常见的地图操作，如缩放、平移、标记和多种地图图层。通过灵活的插件系统，Leaflet 也能实现高级功能。本文旨在指导你如何从基础开始，逐步构建复杂的Web地图应用。

环境搭建

Leaflet非常容易上手。你只需要一个基本的HTML文件，就能在网页中显示地图。

首先，创建一个基础的

index.html

文件，并在文件中加载Leaflet的CSS和JavaScript文件。我们可以通过CDN直接引用这些资源：

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Leaflet 示例</title><linkrel="stylesheet"href="https://unpkg.com/leaflet/dist/leaflet.css"/><style>#map{height: 1000px;}/* 设置地图高度 */</style></head><body><divid="map"></div><!-- 地图容器 --><scriptsrc="https://unpkg.com/leaflet/dist/leaflet.js"></script><script>// 初始化地图，设置中心和缩放级别var map =L.map('map').setView([39.90,116.40],10);// 创建高德地图图层L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',{
            subdomains:['1','2','3','4'],// 子域名
            minZoom:1,// 最小缩放
            maxZoom:19,// 最大缩放
            attribution:'高德地图'// 版权信息}).addTo(map);// 添加图层到地图</script></body></html>
  • **L.map('map')**：创建一个Leaflet地图对象，并将地图加载到页面中id为map的div元素内。
  • **L.tileLayer()**：添加一个瓦片图层，瓦片地图是分块加载的图像，可以像拼图一样显示大面积区域。我们使用OpenStreetMap的公共瓦片服务。
  • 缩放级别：Leaflet的缩放级别从0到最大（取决于地图数据）。0是世界级别，较大的数字表示更详细的视图。

在Leaflet中，几何图形是指地图上绘制的基本图形，如点、线、面、圆等。这些图形广泛应用于表示各种地理信息。下面我们详细讲述如何使用Leaflet绘制点、线、面、圆等几何图形，并逐步解释每一个图形的实现方式和相关代码。

标识操作

移除版权标识

要移除地图右下角的默认版权标识，只需在初始化地图时将 

attributionControl

设置为 

false

：

var map =L.map('map',{
    attributionControl:false// 关闭版权控制}).setView([39.90,116.40],7);// 设置初始视图中心和缩放级别

自定义 Logo 和版权信息

要对 Logo 和版权信息进行自定义，可以在创建地图对象时配置 

attributionControl

。以下是示例代码：

var map =L.map('map',{
    attributionControl:true,// 启用版权控制}).setView([39.90,116.40],7);// 设置初始视图中心和缩放级别// 获取版权控制对象var attribution = map.attributionControl;// 自定义版权前缀，包含 Logo 和链接
attribution.setPrefix('<img src="logo.png" alt="Logo">');// 添加其他版权信息
attribution.addAttribution('地图数据 &copy; <a href="https://www.amap.com/">高德地图</a>');

交互控制

固定缩放比例

你可以通过在地图初始化时设置 

minZoom

和 

maxZoom

来限制地图的缩放范围。例如，如果你希望用户只能在层级 

5

到 

10

之间缩放地图，你可以这样设置：

// 初始化地图，并设置最小缩放级别为5，最大缩放级别为10var map =L.map('map',{
    minZoom:5,// 最小缩放级别
    maxZoom:10// 最大缩放级别}).setView([39.90,116.40],7);// 设置初始视图中心和缩放级别

固定视野范围

通过 

maxBounds

限制地图的拖动范围，使用户无法拖动地图超出设定的边界。

maxBounds

是由两个对角坐标点组成的矩形框，可以限制地图的可视区域。

例如，你想让地图视野只能在某个区域内移动：

// 设置地图的最大边界var bounds =[[38,116],[40,118]];// 初始化地图，并设置 maxBoundsvar map =L.map('map',{
    maxBounds: bounds,// 限制地图视野范围
    maxBoundsViscosity:1.0// 控制视图拖动时的粘性，1表示严格限制}).setView([39.90,116.40],7);
  • minZoom 和 **maxZoom**：这两个参数分别设置了地图的最小和最大缩放级别，防止用户缩小得太多或放大得太多。
  • **maxBounds**：限制用户拖动地图的边界范围，参数为一个二维数组，定义了地图的地理边界。
  • **maxBoundsViscosity**：这是一个取值范围为 0 到 1 的值，用于控制视图边界的粘性，0 表示没有限制，1 表示严格限制。

禁止缩放

要禁止地图的缩放，可以在初始化时设置 

scrollWheelZoom

和 

doubleClickZoom

选项为 

false

，并将 

zoomControl

设为 

false

，以禁用鼠标滚轮缩放、双击缩放和缩放控件。以下是示例代码：

// 初始化地图，禁止放缩var map =L.map('map',{
    zoomControl:false,// 禁止缩放控件
    scrollWheelZoom:false,// 禁止滚轮缩放
    doubleClickZoom:false// 禁止双击缩放}).setView([39.90,116.40],7);// 设置初始视图中心和缩放级别

在这段代码中，通过将 

scrollWheelZoom

和 

doubleClickZoom

设置为 

false

，以及禁用 

zoomControl

，实现了禁止地图缩放的功能。这样，用户将无法通过滚轮、双击或缩放控件来改变地图的缩放级别。

禁止移动

要禁止地图移动，可以在初始化时设置 

dragging

选项为 

false

。这样用户就无法通过拖动来移动地图。以下是示例代码：

// 初始化地图，禁止移动var map =L.map('map',{
    dragging:false,// 禁止拖动
    scrollWheelZoom:false// 禁止滚轮缩放}).setView([39.90,116.40],7);// 设置初始视图中心和缩放级别

在这段代码中，通过将 

dragging

设置为 

false

，用户无法拖动地图。此外，将 

scrollWheelZoom

设置为 

false

可以禁止使用滚轮进行缩放。这样，地图将保持静止。

几何图形

点（Marker）

点通常用于标记地图上的具体位置，在Leaflet中通过

L.marker()

函数来实现。你可以设置标记的经纬度坐标，并为标记添加弹出信息（如点击时显示的提示信息）。

// 创建一个标记，并设置其位置为北京附近 (40.0, 116.5)var marker =L.marker([40.0,116.5]).addTo(map);// 为标记添加弹出信息，当用户点击标记时会显示弹窗
marker.bindPopup("<b>你好，世界！</b><br>这是一个标记。").openPopup();
  • **L.marker([经度, 纬度])**：创建一个新的标记对象，传入的参数为点的地理坐标。
  • **addTo(map)**：将标记添加到指定的地图对象map中。
  • **bindPopup()**：绑定一个弹出信息，当用户点击该标记时，会显示相关信息。

线（Polyline）

线用于连接多个地理点，常见应用场景为路径、河流等。你可以通过

L.polyline()

绘制线段，并通过传入一组坐标点来定义线的形状。

// 创建一条线，连接三个坐标点var polyline =L.polyline([[40,116],[40.1,116],[40,117]],{
    color:'blue'// 设置线的颜色为蓝色}).addTo(map);// 为线段绑定弹出信息
polyline.bindPopup("这是一个线段。");
  • **L.polyline([点数组])**：创建一条线，传入一个包含多个坐标点的数组，每个点都是一对经纬度坐标。
  • **color**：指定线段的颜色。
  • **addTo(map)**：将线段添加到地图上。
  • **bindPopup()**：为线段绑定弹出信息。

面（Polygon）

面是由多个点组成的封闭图形，如区域、多边形等。在Leaflet中，使用

L.polygon()

来创建面。

// 创建一个多边形，传入三个或以上的坐标点var polygon =L.polygon([[40,116],[40.1,116],[40,117]],{
    color:'green',// 设置边框颜色为绿色
    fillColor:'#f03',// 填充颜色为红色
    fillOpacity:0.5// 设置填充透明度}).addTo(map);// 为多边形绑定弹出信息
polygon.bindPopup("这是一个多边形。");
  • **L.polygon([点数组])**：创建一个多边形，传入多个坐标点，最后的点会自动与第一个点相连形成闭合的图形。
  • **fillColor**：设置多边形内部的填充颜色。
  • **fillOpacity**：设置填充颜色的透明度，取值范围为0（完全透明）到1（完全不透明）。

圆（Circle）

圆在Leaflet中使用

L.circle()

来绘制。圆的中心位置由一个经纬度点决定，半径以米为单位。

// 创建一个圆，中心点为 [40, 116]，半径为500米var circle =L.circle([40,116],{
    color:'red',// 圆的边框颜色
    fillColor:'#f03',// 填充颜色
    fillOpacity:0.5,// 填充透明度
    radius:500// 圆的半径（米）}).addTo(map);// 为圆形绑定弹出信息
circle.bindPopup("这是一个圆形。");
  • **L.circle([经度, 纬度], {属性})**：创建一个圆，传入圆心坐标和配置参数，如边框颜色、填充颜色、透明度及半径。
  • **radius**：圆的半径，单位是米。
  • **color**：设置圆的边框颜色。
  • **bindPopup()**：为圆形绑定弹出信息。

自定义样式

Leaflet允许你对这些几何图形进行自定义样式配置和交互事件。每个几何图形可以通过传递额外的样式属性来自定义外观。

// 自定义线的样式var customLine =L.polyline([[40,116],[40.1,116],[40,117]],{
    color:'purple',// 设置线的颜色为紫色
    weight:5,// 设置线的宽度
    opacity:0.7,// 设置线的透明度
    dashArray:'5, 10'// 设置虚线样式，表示5像素实线和10像素空白间隔}).addTo(map);// 自定义圆形样式var customCircle =L.circle([51.508,-0.11],{
    color:'yellow',
    fillColor:'#ff0',
    fillOpacity:0.3,
    radius:300}).addTo(map);

交互事件

你可以为图形绑定事件，例如当鼠标悬停、点击时触发动作。

// 监听多边形的点击事件
polygon.on('click',function(e){alert("你点击了多边形！");});// 当鼠标悬停在圆形上时，改变圆的颜色
circle.on('mouseover',function(){
    circle.setStyle({
        fillColor:'blue'// 鼠标悬停时，改变填充颜色为蓝色});});
  • **dashArray**：用于线条的虚线设置，参数为实线与空白的长度（单位为像素）。
  • **weight**：设置线条的宽度。
  • **on('事件类型', 回调函数)**：绑定一个事件监听器。例如，click事件会在用户点击该图形时触发

图层加载

Leaflet 支持加载多种图层，如瓦片地图、WMS图层（Web Map Service）和GeoJSON数据。

加载自定义瓦片图层

如果你有自己的瓦片服务器，可以加载自定义瓦片图层：

// 使用自定义瓦片服务器加载地图瓦片L.tileLayer('https://{s}.yourtileserver.com/{z}/{x}/{y}.png',{
    maxZoom:18// 设置最大缩放级别}).addTo(map);

加载WMS图层

WMS（Web Map Service）是地理信息系统中常见的标准地图服务协议。Leaflet可以通过WMS加载远程地图图层：

// 使用WMS加载地图图层L.tileLayer.wms('https://ahocevar.com/geoserver/wms',{
    layers:'topp:states',// 指定要加载的图层
    format:'image/png',// 返回图片格式
    transparent:true,// 是否透明显示
    attribution:'WMS 示例'// 添加版权信息}).addTo(map);

加载GeoJSON数据

GeoJSON是一种用于表示地理空间数据的标准格式，Leaflet 支持直接加载并显示GeoJSON数据。

// 定义一个简单的GeoJSON对象var geojsonFeature ={"type":"Feature","properties":{"name":"地点名称","amenity":"地点类型","popupContent":"这里是弹窗信息。"},"geometry":{"type":"Point","coordinates":[-0.09,51.5]// 经纬度}};// 将GeoJSON数据添加到地图L.geoJSON(geojsonFeature).addTo(map);

如果你有外部的GeoJSON文件，你也可以通过AJAX请求加载数据并显示：

// 使用fetch加载GeoJSON数据并显示fetch('your-geojson-file.json').then(response=> response.json()).then(data=>L.geoJSON(data).addTo(map));// 将加载的数据添加到地图

图层控制

地图初始化

首先，我们需要初始化一个 Leaflet 地图，设置其中心点和缩放级别。

// 创建地图实例，设置中心点和缩放级别var map =L.map('map').setView([39.90,116.40],13);// 设置北京为中心点

创建图层

接下来，我们可以创建高德地图的基础图层。高德地图有多种样式可供选择，这里提供两个示例：

// 创建高德普通地图图层var normalLayer =L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',{
    subdomains:['1','2','3','4'],
    minZoom:1,
    maxZoom:19});

// 创建高德卫星地图图层var satelliteLayer =L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',{
    subdomains:['1','2','3','4'],
    minZoom:1,
    maxZoom:19});

创建叠加图层

我们还可以添加一些叠加图层，比如标记。以下示例创建两个标记：

// 创建标记var marker1 =L.marker([39.91,116.40]).bindPopup("天安门");var marker2 =L.marker([31.98,120.91]).bindPopup("另一个位置");// 创建叠加图层对象var overlayMaps ={"南京": marker1,"另一个位置": marker2
};

添加图层控制

使用 

L.control.layers

创建图层控制，并将基础图层和叠加图层添加到地图中：

// 创建基础图层对象var baseMaps ={"高德普通地图": normalLayer,"高德卫星地图": satelliteLayer
};// 添加图层控制到地图L.control.layers(baseMaps, overlayMaps).addTo(map);

添加标记到地图

最后，确保将标记添加到地图，以便它们可以显示：

// 添加标记到地图
marker1.addTo(map);
marker2.addTo(map);

完整示例代码

以下是完整的 HTML 示例，展示如何实现高德地图的图层控制功能：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Leaflet 高德地图图层控制示例</title><linkrel="stylesheet"href="https://unpkg.com/leaflet/dist/leaflet.css"/><style>#map{height: 1000px;}</style></head><body><divid="map"></div><scriptsrc="https://unpkg.com/leaflet/dist/leaflet.js"></script><script>// 创建地图实例var map =L.map('map').setView([39.90,116.40],10);// 设置北京为中心点// 创建高德普通地图图层var normalLayer =L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',{
            subdomains:['1','2','3','4'],
            minZoom:1,
            maxZoom:19}).addTo(map);// 创建高德卫星地图图层var satelliteLayer =L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',{
            subdomains:['1','2','3','4'],
            minZoom:1,
            maxZoom:19});// 创建标记var marker1 =L.marker([39.91,116.40]).bindPopup("天安门");var marker2 =L.marker([31.98,120.91]).bindPopup("另一个位置");// 创建叠加图层对象var overlayMaps ={"天安门": marker1,"另一个位置": marker2
        };// 创建基础图层对象var baseMaps ={"高德普通地图": normalLayer,"高德卫星地图": satelliteLayer
        };// 添加图层控制到地图L.control.layers(baseMaps, overlayMaps).addTo(map);// 添加标记到地图
        marker1.addTo(map);
        marker2.addTo(map);</script></body></html>
标签： 前端 js leaflet
本文转载自: https://blog.csdn.net/2303_80346267/article/details/142555140
版权归原作者 T0uken 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【GIS】Leaflet：Web地图快速上手”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航