开发手册 欢迎您！
软件开发者资料库

LeafletJS - 入门

LeafletJS入门 - 从简单和简单的步骤学习LeafletJS，从基本到高级概念，包括入门，标记，矢量图层，多折线和多边形，图层组，事件处理，叠加，控件。

什么是Leaflet.js

Leaflet.js是一个开源库，使用它我们可以部署简单，交互式，轻量级的Web地图.

  • Leaflet JavaScript库允许您使用诸如平铺图层，WMS，标记，弹出窗口，矢量图层(折线，多边形，圆形等)等图层.叠加和GeoJSON.

  • 您可以通过拖动地图，缩放(通过双击或滚轮滚动)，使用键盘，使用事件与Leaflet地图进行交互处理，并拖动标记.

  • Leaflet支持桌面上的浏览器，如Chrome，Firefox，Safari 5 +，Opera 12 +，IE 7-11和，Safari，Android，Chrome，Firefox等手机浏览器.

在网页上加载地图的步骤

按照以下步骤在您的网页上加载地图 :

步骤1:创建HTML页面

创建一个带有 head 和 body 标签的基本HTML页面如图所示低和低;

                  ...........   

步骤2:加载Leaflet CSS脚本

在示例中包含Leaflet CSS脚本 :

   

步骤3:加载传单脚本

使用脚本标记加载或包含Leaflet API :

   

步骤4:创建容器

要保存地图，我们必须创建一个容器元素.通常，< div> tag(通用容器)用于此目的.

创建容器元素并定义其尺寸和减号;

步骤5:地图选项

Leaflet提供多种选项，例如类型控制选项，交互选项，地图状态选项，动画选项等.通过设置这些值，我们可以根据需要自定义地图.

创建 mapOptions 对象(它就像文字一样创建并设置选项中心和缩放的值，其中

  • center : 作为此选项的值，您需要传递 LatLng 对象，指定我们要将地图居中的位置. (只需在 [] 大括号内指定纬度和经度值)

  • 缩放 : 作为此选项的值，您需要传递一个表示地图缩放级别的整数，如下所示.

var mapOptions = {   center: [17.385044, 78.486671],   zoom: 10}

步骤6:创建地图对象

使用 Map 类的传单API，您可以在页面上创建地图.您可以通过实例化Leaflet API的调用 Map 来创建地图对象.在实例化此类时，您需要传递两个参数 :

  • 作为此选项的参数，您需要传递表示DOM id的String变量或< div>的实例元件.这里，< div>元素是一个用于存放地图的HTML容器.

  • 带有地图选项的可选对象文字.

通过传递< div>的id来创建Map对象在上一步中创建的element和mapOptions对象.

var map = new L.map('map', mapOptions);

步骤7:创建图层对象

您可以加载和显示各种类型的地图(图块层)实例化 TileLayer 类.在实例化它时，您需要以字符串变量的形式从服务提供者传递请求所需切片图层(贴图)的URL模板.

创建切片图层对象，如下所示.

var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

这里我们使用了 openstreetmap .

步骤8:添加图层到地图

最后使用 addlayer()方法将上一步创建的图层添加到地图对象中.

map.addLayer(layer);

示例

以下示例显示如何加载海德拉巴的打开街道地图缩放值为10的城市.

         Leaflet sample                        
            

它生成以下输出 :

Open Street Map

宣传单地图提供商

就像打开街道地图一样，您可以加载各种图层服务提供商，如Open Topo，Thunder forest，Hydda，ESRI，Open weather，NASA GIBS等.为此，您需要在创建 TileLayer 对象时传递各自的URL

var layer = new L.TileLayer('URL of the required map');

下表列出了Openstreetmap提供的图层的URL及其各自的示例地图.

地图类型URL和输出
Mapnik

http://{s} .tile.openstreetmap.org/{z}/{x}/{y} .png

地图提供者

黑白

http://{s} .tiles .wmflabs.org/bw-mapnik/{z}/{x}/{y} .png

黑白地图

DE

http://{s} .tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y } .png

DE

法国

http://{s} .tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png

France

Hot

http://{s} .tile.openstreetmap.fr/hot/{z}/{x}/{y} .png

Hot

BZH

http://tile.openstreetmap.bzh/br/{z}/{x}/{ y} .png

BZH