关于开发的传单介绍教程

传单简介

leaf是一个现代的开源JavaScript库，它是为构建适合移动设备的交互式地图而开发的。代码只有33 KB，却有开发在线地图的大部分功能。传单设计坚持简单、高性能和良好可用性的理念，可以在所有主要的台式机和移动平台上高效运行。它将利用现代浏览器中的HTML5和CSS3，也支持旧浏览器访问。支持插件扩展，具有友好易用的API文档和简单易读的源代码。leaf强大的开源库插件涉及地图应用的各个方面，包括地图服务、数据提供、数据格式、地理编码、路线和路线搜索、地图控制和交互。

2016年9月27日-—最快、最稳定、最严谨的1.0leaflet传单终于出来了！

传单是由领先的开源JavaScript库为移动设备设计的交互式地图。重量为33 KB的JS，这是大多数开发人员需要的所有映射功能。

传单具有简单的设计、性能和可用性。它在所有主要的桌面和移动平台上都是有效的，可扩展的插件，一个漂亮的，易于使用和良好记录的API和一个简单的，易于阅读的源代码，这是一个令人高兴的贡献。

让我们开始一个小例子：准备一个空白页

这里我们在map div中创建一个地图，添加切片选择，然后添加一个标签，并弹出一些文本：

Map在编写任何代码之前，您需要做下一页的准备步骤：

包含传单CSS文件标题部分的文档：

Linkrel='样式表' href=' https://unpkg.com/[email protected]/dist/leave t . CSS '/(这个文件可以不用下载，也可以自己导入，这里就不重复了)，点击下载(稳定版)。

包括传单JavaScript文件：

script src=' http :https://unpkg.com/[email protected]/dist/leave . js '/script放一个div元素和一个特定的id，你想要你的地图：

div id=' mapid '/div(id名称可以随意设置，但必须与以下js代码中定义的相同。确保定义的映射容器具有高度，例如，通过设置CSS(必须定义高度，因为无法获得指定的id名称，所以此库没有高处理设置，它必须设置自己的高度，就像默认情况下div没有高度一样):

# mapid { height: 180px}现在您已经准备好初始化地图并对其进行操作。

设置地图

让我们在北京某个地方的地图中心创建一个漂亮的Mapbox街道瓷砖。首先，我们将初始化并设置的视图映射到我们选择的地理坐标和缩放级别(内部的mapid必须与设置id一致):

var mymap=L.map('mapid ')。setView([39.9788，116.30226]，14)；默认情况下(我们没有创建带有任何选项的地图实例)，所有鼠标和触摸交互都在地图上启用，地图具有放大和属性控制。(这些可以通过js控制。目前只是一个介绍。如果你有深入的了解，可以自己去探索。)

请注意，setView调用返回了map对象——的行为。大多数散页方法不返回显式值，这允许方便类jQuery方法进行控制。

接下来，我们将添加一个砖块层来增加我们的地图，在这种情况下，它是一个Mapbox街道砖块层。创建切片图层通常涉及切片图像的模板设置URL(在Mapbox中获取)、属性化文本和最大缩放级别图层：

l . tilelayer(' https://API . tiles . mapbox.com/v4/{ id }/{ z }/{ x }/{ y })。巴布亚新几内亚？access_token={accessToken} '，{ attribute : ' Map data a href=' http://openstreetmap . org ' openstreetmap/a投稿人，a href=' http://creative commons . org/licenses/BY-SA/2.0/' CC-BY-SA/a，images a href=' http://mapbox.com ' mapbox/a '，maxZoom: 18，id: 'your.mapbox.project.id '，accessToken添加到(我的地图)；确保所有代码都被称为div和flyer。Js包含。就这样！现在你有工作了，传单地图。

标记、圆和多边形

除了砖块图层，您还可以轻松地向地图添加其他内容，包括徽标、折线、多边形、圆形和弹出窗口。让我们添加一个标签:

长度标记([39.9788，116.30226])。添加到(我的地图)。bindpopup('北京大厦br ')。openPopup()；添加圆是相同的(除了半径计被指定为第二个参数)，但是它允许您在创建对象时通过选择：作为最后一个参数来控制它的外观。

长度圆圈([39.9908，116.26625]，500，{颜色： '红色'，填充颜色3360' # f03 '，填充不透明度3360 0.5})。添加到(我的地图)。绑定弹出窗口(“欢迎来到颐和园”)添加多边形很简单：

长度多边形([[39.92096，116.38591]，[39.91079，116.38676]，[39.91118，116.3962]，[39.92014，116.39482]])。添加到(。弹出窗口通常使用特定的对象，您希望将某些信息附加到地图上。传单有非常方便的快捷方式(和上面一样，直接添加或者单独添加，其实是一样的。openPopup的意思是默认情况下是否打开):

Marker.bindPopup('北京铁塔')。openPopup()；Circle.bindPopup('颐和园')；多边形.绑定弹出窗口(紫禁城')；试着点击我们的对象。bindPopup方法是带有指定的HTML内容的高度弹出的，当您单击对象时，您的标记会弹出，openPopup方法(标记)会立即打开弹出窗口。

你也可以使用弹出窗口层(当你需要比附加一个弹出对象更多的东西时)

var popup=L.popup()。setlating([51.5，-0.09])。设置内容(“我是一个独立的弹出窗口。”) .openOn(my map)；这里我们用openOn代替了苦难，因为它在打开一个新的具有良好可用性的弹出窗口时，在打开弹出窗口之前处理自动关闭。

处理事件

每次都发生在传单上，比如用户点击地图上的标记或者改变比例尺，对应的对象就会发送一个事件，你就可以订阅该功能。它允许你与用户互动(这里是你每次点击的经纬度):

函数onMapClick(e) { alert('您在' e.latlng '单击了地图)；} mymap.on('click '，OnMapClick)；每个对象都有自己的一组事件，详情请参考文档。侦听器函数的第一个参数是一个事件对象，它包含关于事件发生的有用信息。例如，地图点击事件对象(上例中的e)点击属性点击位置。

让我们通过使用弹出警告：来改进我们的示例

var popup=l . popup()；函数onMapClick(e) { popup。setLatLng(即e.latlng)。设置内容('您在' e . lating . ToString()'上单击了地图)。openOn(my map)；}mymap.on('click '，OnMapClick)；以上是边肖介绍的传单的发展介绍教程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！