Leaflet快速开始教程

gecko23 发布于2019-08-23 15:39 / 2678人阅读

摘要：提示在官方教程的基础上，增加了一些注释以及链接，可帮助读者更好的学习有不正确或有待改进的地方，欢迎批评指出。明确容器的高度。首先我们将初始化地图，通过选定的地理坐标设置地图视角以及缩放级别。

提示：在Leaflet官方教程的基础上，增加了一些注释以及链接，可帮助读者更好的学习Leaflet,有不正确或有待改进的地方，欢迎批评指出。

Leaflet

an open-source JavaScript library for mobile-friendly interactive maps

Leaflet Quick Start Guide

本教程将快速介绍有关于Leaflet的基础知识，包括设置Leaflet地图、创建(线、标记、提示框)以及处理一些事件，让你对‘叶子’有个基本的了解。

准备

引入leaflet.js、leaflet.css文件。

leaflet.js、leaflet.css

创建一个拥有具体id的div容器。

明确容器的高度。

#mapid { height: 180px; }

设置地图

用Mapbox Streets的瓦片数据来创建一个以武汉为中心的地图。首先我们将初始化地图，通过选定的地理坐标设置地图视角以及缩放级别。

//在leaflet中的经纬度坐标与实际坐标位置是相反的，即真实的地理经纬度坐标为[114.398902, 30.518762]
var mymap = L.map("mapid").setView([30.518762, 114.398902], 13);

默认情况下（在我们创建地图实例的时候没有传入任何的选项配置），所有的鼠标和触控交互都是无效的，界面上会有缩放(左上角)和来源(右下角)控件。

添加瓦片图层到地图上。创建一个瓦片图层通常需要为瓦片影像设置URL template、数据来源、最大缩放级别。

L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
    attribution: "Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox",
    maxZoom: 18,
    id: "mapbox.streets",
    accessToken: "your.mapbox.access.token"
}).addTo(mymap);

值得注意的是，Leaflet不会强制用户使用特定提供商的瓦片地图。当然，使用不同提供商的瓦片地图时，在使用语法上会有些许不同(详情请参考:Leaflet-providers)，就比如Mapbox，你必须在Mapbox官网注册，获得ID以及ACCESS_TOKEN才可以使用。密钥获取地址：mapbox密钥。

Markers，circles，polygons

除了瓦片图层，还可以很方便地在地图上添加其他一些东西，包括marker、polylines、polygons、circles和popups。

添加marker

var marker = L.marker([51.5, -0.09]).addTo(mymap); //可以添加相应的options

添加circle

//通过传入相应options控制circle样式
var circle = L.circle([51.508, -0.11], {
    color: "red",         //圈轨迹颜色，即外边框的颜色
    fillColor: "#f03",    //填充色，默认值与color值一致
    fillOpacity: 0.5,     //填充透明度
    radius: 500           //circle半径，单位为米
}).addTo(mymap);

添加polygon

//面是一个二维坐标数组
var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

使用弹出窗口

当您想要将某些信息附加到地图上的特定对象时，通常需要使用弹出窗口，Leaflet有非常方便快捷的方法：

marker.bindPopup("Hello world!
I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

bindPopup方法将带有指定HTML内容的弹出窗口附加到您的标记上,以便在您单击该对象时出现弹出窗口。同时openPopup方法仅仅只适用于marker。
当你需要的东西不仅仅是附加一个弹出对象时，可以将popups作为图层来使用：

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap); //使用openOn而不是addTo,此方法在打开一个新的弹出窗口时，会自动关闭之前打开的弹出窗口

处理事件

在Leaflet上发生的一些事件，比如用户点击标记或改变地图缩放大小，相应的对象会发送一个可以用函数描述的事件。它可以对用户交互作出反应：

//点击地图任意位置，会弹出当前位置的坐标信息
function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}
mymap.on("click", onMapClick);

每个对象都有自己的一组事件，监听函数on()的第一个参数是一个事件对象，它包含有发生的事件的有用信息。例如，地图点击事件对象（上例中的e）具有latlng属性，该属性是点击发生时的位置。
让我们通过使用弹出窗口而不是消息对话框来改进我们的示例：

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);

云服务器 GPU云服务器服务端快速开始 leaflet leaflet 国内cdn python快速教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102375.html

HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

MudOnTire 2019-08-21 18:25 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

terasum 2019-08-02 11:51 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

dreambei 2019-08-29 17:08 评论0 收藏0