Leaflet疾速最先教程

2019年8月31日 220次阅读 来源: IceyCity

提醒：在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容器。

<div id="mapid"></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 &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    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。
《Leaflet疾速最先教程》

  • 增加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疾速最先教程》
  当您想要将某些信息附加到舆图上的特定对象时，一般须要运用弹出窗口，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.");

  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);
    原文作者：IceyCity
    原文地址: https://segmentfault.com/a/1190000018392424
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞