Leaflet官方教程(一)——Leaflet Quick Start Guide

2024-06-08 04:48

本文主要是介绍Leaflet官方教程(一)——Leaflet Quick Start Guide,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近开始翻译的东西有点多啊,但是越看官方文档越是兴奋,觉得很有意思,白天工作忙,没时间翻译,有时候会看看实践实践,晚上加班翻译一下!老规矩,择要翻译!

Leaflet Quick Start Guide


一步一步开始使用leaflet基础,包括设置leaflet地图、添加markers、polylines和popups、处理事件。

Preparing your page

在开始写地图代码之前,你需要做一些准备工作:

*将leaflet CSS文件include到head中

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"

    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="

crossorigin=""/>

*在CSS后之后将leaflet JavaScript文件include到head中

<!-- Make sure you put this AFTER Leaflet's CSS -->

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"

integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="

crossorigin=""></script>

*将一个带有你希望图名元素的div放在body中

<div id="mapid"></div>

*确保地图容器已经定义了高度,譬如如下设置

#mapid { height: 180px; }

现在你已经初始化了地图,可以开始下一步了

Setting up the map

我们可以创建一个以伦敦为中心的Mapbox街道瓦片地图。首先,我们初始化地图并且为其设置坐标和缩放等级。

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

默认情况下,所有地图上的鼠标和触摸交互都默认开启,并且可以控制缩放等级。

注意:setView也可以返回地图对象,大多数leaflet方法不是返回明确的值,因此可以方便的实现类似jquery的方法链。

下一步,添加瓦片到地图中,这一步我们使用mapbox streets tile图层。创建一个瓦片图层通常包括设置瓦片地图的URL、

属性和最大缩放等级。在这个例子中,我们使用的是mapbox streets瓦片,需要从mapbox获取access token。

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {

attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,

                 <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©

                <a href="https://www.mapbox.com/">Mapbox</a>',

maxZoom: 18,

id: 'mapbox.streets',

accessToken: 'your.mapbox.access.token'

}).addTo(mymap);

注意所有代码要放在div和leaflet.js的后面。

leaflet是不定义provider的格式的,这意味着不需要为瓦片图层选择特别的provider,你可以用mapbox.satellite代替streets,

你将看到底图变为卫星图。另外,leaflet甚至不需要包含特定的provider代码,你可以用其他的providers,只是mapbox很不错。

Markers, circles and polygons

除了瓦片图层,你可以很容易的添加其他要素到地图,包括markers、ploylines、ploygons、circles和popups。

我们先增加一个marker:

var marker = L.marker([51.5, -0.09]).addTo(mymap);

增加一个圆也是同样的原理,我们可以通过选项来控制样式:

var circle = L.circle([51.508, -0.11], {

color: 'red',

fillColor: '#f03',

fillOpacity: 0.5,

radius: 500

}).addTo(mymap);

增加多边形很容易:

var polygon = L.polygon([

[51.509, -0.08],

[51.503, -0.06],

[51.51, -0.047]

]).addTo(mymap);

Working with popups

弹出提示通常被我们用来给一些特殊事件添加说明,leaflet大大简化了弹出提示的使用:

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

circle.bindPopup("I am a circle.");

polygon.bindPopup("I am a polygon.");

试着点击要素,绑定提示方法将提示绑定到要素上,所以在点击要素时,openPopup方法就

立刻弹出了提示。

你也可以将popups用作图层,即用作单独的图层,不绑定在任何要素上:

var popup = L.popup()

.setLatLng([51.5, -0.09])

.setContent("I am a standalone popup.")

.openOn(mymap);

这里我们使用openOn而不是使用addTo是因为当新的popup打开时,之前的popup就会自动关闭。

Dealing with events

每当一些事件在leaflet中被触发,如点击marker、地图缩放等,通信机制会发送事件,你可以用

函数监听事件来实现交互。

function onMapClick(e) {

alert("You clicked the map at " + e.latlng);}

mymap.on('click', onMapClick);

每个对象都有自己的一系列事件,监听函数的第一个参数是一个事件对象,它包含了被触发事件的

有用信息。举个例子,点击地图事件有可以显示当前点击位置经纬度的latlng事件。

下面我们用一个popup代替alert:

var popup = L.popup();

function onMapClick(e) {

popup

        .setLatLng(e.latlng)

.setContent("You clicked the map at " + e.latlng.toString())

.openOn(mymap);}

mymap.on('click', onMapClick);

这篇关于Leaflet官方教程(一)——Leaflet Quick Start Guide的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1041240

相关文章

Linux搭建Mysql主从同步的教程

《Linux搭建Mysql主从同步的教程》:本文主要介绍Linux搭建Mysql主从同步的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux搭建mysql主从同步1.启动mysql服务2.修改Mysql主库配置文件/etc/my.cnf3.重启主库my

SpringBoot操作MaxComputer方式(保姆级教程)

《SpringBoot操作MaxComputer方式(保姆级教程)》:本文主要介绍SpringBoot操作MaxComputer方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录引言uqNqjoe一、引入依赖二、配置文件 application.properties(信息用自己

Tomcat的下载安装与使用教程

《Tomcat的下载安装与使用教程》本文介绍了Tomcat的下载、安装和使用方法,包括在本机和云服务器上部署Tomcat的过程,以及解决启动失败问题的方法... 目录Tomcat的下载安装与使用Tomcat的下载与安装Tomcat在本机运行使用Tomcat在php云服务器上的使用总结Tomcat的下载安装与

SpringBoot基于沙箱环境实现支付宝支付教程

《SpringBoot基于沙箱环境实现支付宝支付教程》本文介绍了如何使用支付宝沙箱环境进行开发测试,包括沙箱环境的介绍、准备步骤、在SpringBoot项目中结合支付宝沙箱进行支付接口的实现与测试... 目录一、支付宝沙箱环境介绍二、沙箱环境准备2.1 注册入驻支付宝开放平台2.2 配置沙箱环境2.3 沙箱

IDEA接入Deepseek的图文教程

《IDEA接入Deepseek的图文教程》在本篇文章中,我们将详细介绍如何在JetBrainsIDEA中使用Continue插件接入DeepSeek,让你的AI编程助手更智能,提高开发效率,感兴趣的小... 目录一、前置准备二、安装 Continue 插件三、配置 Continue 连接 DeepSeek四

jdk21下载、安装详细教程(Windows、Linux、macOS)

《jdk21下载、安装详细教程(Windows、Linux、macOS)》本文介绍了OpenJDK21的下载地址和安装步骤,包括Windows、Linux和macOS平台,下载后解压并设置环境变量,最... 目录1、官网2、下载openjdk3、安装4、验证1、官网官网地址:OpenJDK下载地址:Ar

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo

JAVA集成本地部署的DeepSeek的图文教程

《JAVA集成本地部署的DeepSeek的图文教程》本文主要介绍了JAVA集成本地部署的DeepSeek的图文教程,包含配置环境变量及下载DeepSeek-R1模型并启动,具有一定的参考价值,感兴趣的... 目录一、下载部署DeepSeek1.下载ollama2.下载DeepSeek-R1模型并启动 二、J

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx