Leaflet地图

已于 2024-05-26 19:32:48 修改
阅读量1k 收藏 23
点赞数 39
文章标签： html5 java echarts 前端
于 2024-05-22 21:23:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Block_yang/article/details/139127217
版权

Leaflet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的 JavaScript 库。
Leaflet 设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。

1、安装配置

在这里插入图片描述
在官网中下载上方的文件后，主要使用到的是以下两个文件：
在这里插入图片描述
leaflet.js：这是缩小的Leaflet JavaScript代码。
leaflet-src.js：这是可读的，最小的Leaflet JavaScript，有时对调试很有帮助。
leaflet.css：这是Leaflet的样式表。
images：这是一个包含由引用的图像的文件夹leaflet.css。
使用的时候在页面中引入两个文件：

<link href="leaflet/leaflet.css" rel="stylesheet" />
<script src="leaflet/leaflet.js"></script>

2、Leaflet 地图加载

<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 引入样式和脚本 -->
        <link href="leaflet/leaflet.css" rel="stylesheet" />
        <script src="leaflet/leaflet.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            /* 这里定义div 容器铺满整个屏幕 */
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
   <body>
     <!-- 定义容器，存放地图 -->
     <div id="map"></div>
   </body>
</html>

编写脚本配置地图

瓦片的数据地址可以是公网提供的，也可以内网私服。
Leaflet 官网地址：https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
高德地址：http://webrd0{s}.is.autonavi.com/appmaptile? lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式和脚本 -->
    <link href="../css/leaflet.css" rel="stylesheet"/>
    <script src="../js/leaflet.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #myMap{
            position:absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <title>Document</title>
</head>
<body>
 <!-- 定义容器，存放地图 -->
    <div id="myMap"></div>
<script>
  /* 
                L为 Leaflset 对象，创建 Map 对象，配置初始化视图信息；
                参数一：经纬度，[维度，经度]
                参数二：zoom等级，可以简单理解为缩放比例
  */
    var map = L.map('myMap').setView([22.69542, 109.2749], 7);
/*
                配置布局；
                参数一：瓦片数据地址
                参数二：地图参数
                    attribution: 版权信息
*/
    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:"1234",
                    maxZoom: 18,
                },
            ).addTo(map);
    var markerIocn = L.icon({
        iconUrl: '../images/marker-icon-2x.png',
        // 标记图片大小
        iconSize: [30, 50]
    });
    // 添加标记（marker）
    L.marker([22.69542, 109.2749], {icon:markerIocn}).addTo(map);
</script>
</body>
</html>

展示结果如下：
在这里插入图片描述

3、Leaflet 点击事件

	<script>
       /*
            地图点击事件。使用上文定义的 map 引用，给地图绑定单击事件。
            匿名函数中 e 是事件对象，通过 e.latlng 可以获取鼠标点击点的经纬度坐标。
        */
        map.on('click', function(e) {
            // map 设置视图，传递经纬度坐标， zoom 等级。
            map.setView(e.latlng, 10);
        });
    </script>

4、Leaflet 绘制图形

地图标记 Marker

		<script>
           // 添加标记（marker）
            L.marker([34.819093, 113.561224], {icon:markerIocn}).addTo(map);
        </script>

线段、多边形、矩形

<!DOCTYPE html>
 <html>
    <head>
        <meta charset=utf-8 />
        <title>Leaflet with mapbox</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user
scalable=no' />
        <link href="leaflet/leaflet.css" rel="stylesheet" />
        <script src="leaflet/leaflet.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script>
            /* 
                L为 Leaflset 对象，创建 Map 对象，配置初始化视图信息；
                参数一：经纬度，[维度，精度]
                参数二：zoom等级，可以简单理解为缩放比例
            */
            var map = L.map('map').setView([34.819093, 113.561224], 7);
            
            /*
               为地图容器添加底图。
                参数一：瓦片数据地址
                参数二：地图参数
                    attribution: 版权信息
            */
            L.tileLayer(
                'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
                {
                    attribution: '&copy; <a href="https://863rc.com">中原英才
</a>',
                    maxZoom: 18,
                },
            ).addTo(map);
            /* 线段 */
            var arrow1 = L.polyline([[34.819093, 113.561224], [34.819093, 
118.561224]], {opacity: 1,color: 'firebrick'}).bindPopup('I am 
red:').addTo(map);
            var arrow2 = L.polyline([[34.819093, 113.561224], [30.819093, 
114.561224]], {opacity: 1,color: 'lightgreen'}).bindPopup('I am 
green:').addTo(map);
            var arrow3 = L.polyline([[30.819093, 114.561224], [34.819093, 
118.561224]], {opacity: 1,color: 'orange'}).bindPopup('I am 
orange:').addTo(map);
            
            /* 多边形 */
            // 多边形点位坐标
            var latlngs = [
                [38.584931, 106.055274],
                [39.945795, 116.294531],
                [31.093209, 121.348242],
                [30.56491, 104.077735],
            ];
            // 创建带颜色的多边形
            var polygon = L.polygon(latlngs, {color: 'green'}).addTo(map);
            // 地图缩放到多边形区域
            // map.fitBounds(polygon.getBounds());
            
            /* 矩形 */
            // 矩形点位坐标
            var bounds = [[38.584931, 106.055274], [31.093209, 121.348242]];
            // 创建带颜色的矩形
            L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
            // 地图缩放到多边形区域
            // map.fitBounds(bounds);
        </script>
    </body>
 </html>

展示为：
在这里插入图片描述

圆形

<!DOCTYPE html>
 <html>
    <head>
        <meta charset=utf-8 />
        <title>Leaflet with mapbox</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user
scalable=no' />
        <link href="leaflet/leaflet.css" rel="stylesheet" />
        <script src="leaflet/leaflet.js"></script>
        <script src="leaflet/leaflet.polylineDecorator.js"></script>
        <script src="leaflet/leaflet.ChineseTmsProviders.js"></script>
        <script src="echarts/echarts.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script>
             /* 
                L为 Leaflset 对象，创建 Map 对象，配置初始化视图信息；
                参数一：经纬度，[维度，精度]
                参数二：zoom等级，可以简单理解为缩放比例
            */
            var map = L.map('map').setView([34.819093, 113.561224], 7);
            
            /*
                为地图容器添加底图。
                参数一：瓦片数据地址
                参数二：地图参数
                    attribution: 版权信息
            */
            L.tileLayer(
                'http://10.87.221.254:8091/tiles/{z}/{x}/{y}.png', 
                {
                    attribution: '&copy; <a href="https://863rc.com">中原英才
</a>',
                    maxZoom: 18,
                },
            ).addTo(map);
            
            /* 
                圆圈
                通过传入相应options控制circle样式
            */
            var circle = L.circle([34.819093, 113.561224], {
                color: 'red',         // 圈轨迹颜色，即外边框的颜色
                fillColor: '#f03',    // 填充色，默认值与color值一致
                fillOpacity: 0.5,     // 填充透明度
                radius: 500 * 1000    // circle半径，单位为米
            }).addTo(map);
        </script>
    </body>
 </html>

展示为：
在这里插入图片描述

5、Leaflet 弹框 Popup

<!DOCTYPE html>
 <html>
    <head>
        <meta charset=utf-8 />
        <title>Leaflet with mapbox</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user
scalable=no' />
        <link href="leaflet/leaflet.css" rel="stylesheet" />
        <script src="leaflet/leaflet.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
            .pop-style .leaflet-popup-content-wrapper {
                background: #4ab4ff;
            }
            .pop-style .leaflet-popup-tip {
                border-top-color: #4ab4ff;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script>
            /* 
                L为 Leaflset 对象，创建 Map 对象，配置初始化视图信息；
                参数一：经纬度，[维度，精度]
                参数二：zoom等级，可以简单理解为缩放比例
            */
            var map = L.map('map').setView([34.819093, 113.561224], 7);
            
            /*
                为地图容器添加底图。
                参数一：瓦片数据地址
                参数二：地图参数
                    attribution: 版权信息
            */
            L.tileLayer(
                'http://10.87.221.254:8091/tiles/{z}/{x}/{y}.png', 
                {
                    attribution: '&copy; <a href="https://863rc.com">中原英才
</a>',
                   maxZoom: 18,
                },
            ).addTo(map);
            // 添加标记（marker）
            L.marker([34.819093, 113.561224]).addTo(map);
            
            // 静态 popup 弹框
            var popup = L.popup({
                    closeButton: false,
                    closeOnClick: false,
                    className: "pop-style"
                }).setLatLng([34.819093, 113.561224])
                .setContent('<p>Hello world!<br />This is a nice popup.
 </p>')
                .openOn(map);
            // marker-自定义图标-绑定 popup 开始
            var myIcon = L.icon({
                // 标记图片地址
                iconUrl: 'leaflet/images/111.png',
                // 标记图片大小
                iconSize: [30, 50]
            });
            // 添加标记（marker）
            L.marker([34.27083595165,108.92944335937501], {
                icon: myIcon // 引入图标
            }).addTo(map)
                .bindPopup('<p style="color:#db1b00;">标记绑定popup 弹框。
</p>') // 绑定 popup 弹框
                // .openPopup(); // 打开 popup 弹框
            // marker-自定义图标-绑定 popup 结束
        </script>
    </body>
 </html>

展示为：
在这里插入图片描述

6、Leaflet 集成 ECharts

<!DOCTYPE html>
 <html>
    <head>
        <meta charset=utf-8 />
        <title>Leaflet with mapbox</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user
scalable=no' />
        <link href="leaflet/leaflet.css" rel="stylesheet" />
        <script src="leaflet/leaflet.js"></script>
        <script src="leaflet/leaflet.polylineDecorator.js"></script>
        <script src="leaflet/leaflet.ChineseTmsProviders.js"></script>
        <script src="echarts/echarts.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
            #charts{
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script>
             /* 
                L为 Leaflset 对象，创建 Map 对象，配置初始化视图信息；
                参数一：经纬度，[维度，精度]
                参数二：zoom等级，可以简单理解为缩放比例
            */
            var map = L.map('map').setView([34.819093, 113.561224], 7);
            
            /*
                配置布局；
                参数一：瓦片数据地址
                参数二：地图参数
                    attribution: 版权信息
            */
            L.tileLayer(
                'http://10.87.221.254:8091/tiles/{z}/{x}/{y}.png', 
                {
                    attribution: '&copy; <a href="https://863rc.com">中原英才
</a>',
                    maxZoom: 18,
                                   },
            ).addTo(map);
            
            // 添加标记（marker）
            var marker = L.marker([34.819093, 113.561224]).addTo(map);
            // 标记绑定弹框
            marker.bindPopup('<div id="charts"></div>',{});
            // 标记绑定事件
            marker.on('popupopen', function(e){
                var myCharts = 
echarts.init(document.querySelector("#charts"));
                var option = {
                    title: {
                        text: 'ECharts'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                };
                myCharts.setOption(option);
            });
            
        </script>
    </body>
 </html>

展示为：
在这里插入图片描述

邮氧海猫
关注
  • 39
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
leaflet中文文档
11-23 402
https://leafletjs.cn/reference.html
推荐开源项目：Leaflet中文文档
最新发布
gitblog_00060的博客
05-13 581
推荐开源项目：Leaflet中文文档 项目地址:https://gitcode.com/NICEXAI/leaflet_zh 1、项目介绍 在数字地图的世界里，Leaflet是一个不可或缺的工具，尤其对于移动端应用开发者来说，它是一个轻量级且高度交互的JavaScript库。为了方便中国开发者更好地理解和使用这个强大的库，Leaflet中文文档项目应运而生。该项目旨在提供全面、准确并及时更新的中文...
leaflet地图框架中文参考文档1.8.0版本
08-09
leaflet地图框架中文参考文档在线地址:https://leafletjs.cn/index.html,压缩包是下载好的html静态页面，直接打开leafletjs.cn/leafletjs.cn/index.html，即可。
leaflet地图总结（不断更新）
summer_du的博客
03-04 1万+
一、创建leaflet地图 输入指令npm install leaflet 页面引入import L from "leaflet"; import "leaflet/dist/leaflet.css" 页面创建展示地图的div<div id="map-container" style="width: 100%;height: 100%;"></div> 初始化地图initMap: function() { //定义图层样式 var layer = L.tileLay
【Leaflet入门篇】 Leaflet快速入门
WhyLearnCode的博客
07-06 2194
【Leaflet入门篇】文章可以帮助大家能够更好的阅读教程文档“快速入门”主要讲Leaflet的引入和使用（添加简单的地图元素和点击事件），对应教程【[Leaflet快速入门指南](https://leafletjs.cn/examples/quick-start/)】
Leaflet.markercluster 中文文档 V1.5.4
热门推荐
SuiFengDieWu的博客
07-21 1万+
最近正好在用leaflet的这个插件 搜了一下，用的人不少，但是好像没人翻译过文档，就顺手处理下。 以下内容中，原文的Cluster本意为群、组，考虑其代码中的作用，为方便理解文档，以下统称聚合点。如有翻译错误，请在评论区指出，确认后我会及时修改。本文翻译时间为2022年7月21日，对应插件github版本为1.5.4。............
【Leaflet for R】
地理空间科学的博客
07-20 476
Leaflet是最受欢迎的交互式地图开源 JavaScript 库之一。从《纽约时报》和《华盛顿邮报》到GitHub 和Flickr，以及诸如OpenStreetMap、Mapbox和CartoDB等 GIS 专家都在使用它。 这个 R 包可以很容易地在 R 中集成和控制 Leaflet 地图。...
Leaflet地图API中文版.pdf
09-04
Leaflet地图API中文版 Leaflet地图API中文版是Leaflet地图API的中文翻译版本，提供了详细的API文档和翻译说明。该API文档提供了Leaflet地图的使用示例、类继承关系图、插件API、基本类型、Util常用方法类、DOM常用...
76.（leaflet篇）leaflet地图无级别缩放（移动端）.zip
03-09
在移动设备上，Leaflet地图的无级别缩放功能对于提供流畅的用户体验至关重要。本文将深入探讨Leaflet地图在移动端实现无级别缩放的技术细节及其优势。 首先，Leaflet地图的核心特性之一就是其优秀的性能和对各种...
leaflet地图调用
04-24
Leaflet地图调用是Web开发中的一个重要概念，主要用于在网页上展示交互式地图。Leaflet是一个轻量级的JavaScript库，专为移动设备优化，它提供了丰富的API和强大的功能，使得开发者可以轻松创建复杂的地图应用。这个...
leaflet地图框架常用的中文API.rar，
10-08
一款不错的开源地图框架， 最新LeafletAPI中文版 最新最全的Leaflet中文文档，附带和官网上一样的跳转链接，方便学习
leaflet 地图
03-27
Leaflet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的JavaScript 库。虽然它与上面的图形没有啥关系，但是它带了一个图字啊。与Google Map原生的API，或者OpenStreet相比，它最大的优点是对移动设备...
Leaflet从入门到放弃（一）——地图初始化
lgccc233的博客
04-10 2652
leaflet学习第一章，简单讲述了leaflet框架的概念及实现了地图初始化的功能。希望这对正在学习的你会有帮助。
【Leafletjs】4.L.Map 中文API
weixin_30340819的博客
02-25 1177
L.Map API各种类中的核心部分，用来在页面中创建地图并操纵地图. 使用 example // initialize the map on the "map" div with a given center and zoom var map = L.map('map', { center: [51.505, -0.09], zoom: 13 }); 构造器 构...
强大的地图库--Leaflet.js爬坑记录(1)
王亟亟的博客
12-01 8931
转载请注明出处：王亟亟的大牛之路初衷以及传送门： 因为要做一个防碰撞的警报/预警系统，所以带着小伙伴最近在整地图相关的技术，有一些特殊要求 不使用收费的地图源 非瓦片图加载性能在秒级 丰富的API 成熟的实际商业案例 综合上述需要和朋友的推荐，使用/学习了Leaflet.js。基于播撒欢笑播撒爱的初衷，把体验过程中遇到的一些情况和积累，分享给大家。不想看介绍，想直接看源码的可以进传送门运行的案例地
Leaflet学习之路四——地图事件
weixin_30892889的博客
05-10 802
leaflet的地图事件主要有以下几类： 1. 图层事件： baselayerchange，overlayadd，overlayremove，layeradd，layerremove 2.地图状态改变事件 load,upload,move,zoom,zoomed,moveed,resize等 3.弹出框事件 popupopen,popu...
Leaflet地图框架使用手册——L.TileLayer
black2Girl的博客
12-26 1万+
用来在地图上载入和显示切片图层，用ILayer接口实现。 Constructor（函数构造器） L.TileLayer()：通过给定URL模板和具有选项的对象来实例化一个切片图层。 URL template（URL模板） 见下面的例子 L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'}) ...
leaflet地图风场
09-05
leaflet地图风场是利用leaflet.js这个JavaScript库来展示风场数据的一种技术。风场数据包括风速和风向，通过可视化展示在地图上的方式，提供了直观且易于理解的风场信息。 leaflet.js是一个轻量级的地图库，可以实现在网页上展示交互式地图。它具有简洁的API接口和丰富的插件支持，非常适合用于构建交互式地图应用。通过leaflet地图风场技术，我们可以将风场数据与地图相结合，实现在地图上显示风速和风向的效果。 leaflet地图风场的实现过程一般包括以下几个步骤： 1. 数据准备：首先需要获取风场数据，通常是通过气象数据源获取到的。这些数据包括了风速和风向的信息。可以将这些数据转换成leaflet可识别的格式，如GeoJSON格式。 2. 创建地图：使用leaflet.js库创建一个地图容器，并设置初始的地图中心点、缩放级别等。 3. 添加风场图层：利用leaflet的图层功能，将风场数据添加到地图上。可以使用插件或自定义的方式来实现。 4. 风场可视化：对风场数据进行可视化处理，通常是将风速和风向信息转换成箭头、色阶等形式展示在地图上。可以利用leaflet的样式设置功能来实现。 5. 交互功能：为了增强用户体验，通常还可以添加一些交互功能，如鼠标悬停显示具体数值、点击风场图层显示风场数据的详细信息等。 通过leaflet地图风场技术，我们可以直观地了解不同地区的风场情况，对风能利用等方面提供支持。因其容易上手、功能丰富和灵活性强等特点，越来越多的人开始使用leaflet地图风场来展示和分析风场数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值