Leaflet使用介绍

Leaflet

 

第一章          概述

Leaflet是一个为建设交互性好适用于移动设备地图的领先开源JavaScript库。代码大小仅仅33KB，它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的思想，能够在所有主流的桌面和移动平台高效的运作。支持插件扩展，拥有漂亮、易用的API文档和一个简单的、可读的源代码。

官方网址http://leafletjs.com/index.html，通过官方网址可以下载Leaflet。

 

第二章          Leaflet版本及文件

2.1    版本介绍

版本	描述
Leaflet 0.7.7	稳定运行版本，发布于2013年11月18日，最近更新时间2015年10月26日
Leaflet 1.0.0-rc1	作为1.0版本的候选，发布于2016年4月18日
Leaflet 1.0-dev	在主分支上的一个进行中的版本

2.2    文件介绍

在HTML代码页面中添加如下代码：

leaflet.js：是JavaScript代码的压缩文件

leaflet-src.js：是可读的、未压缩的JavaScript代码，有时可以帮助调试

leaflet.css：是Leaflet的层叠样式文件

images：包含leaflet.css引用的图片文件夹，必须与leaflet.css文件在同一个目录。

此外，如果你想下载完整的源代码，包括单元测试，可调试文件，生成脚本等等，你可以从GitHub库上下载。

2.3    生成Leaflet

Leaflet生成系统由Node.js平台提供技术支持。首先需要下载并安装Node，其次运行如下命令：

npm install –g jake

npm install

安装之后，运行包含在Leaflet目录中的jake。jake将合并且压缩Leaflet源文件，保存生成文件到目标文件夹。

 

第三章          Leaflet使用

3.1    快速入门

在HTML代码页面中添加如下代码：

在body中添加一个div，并未div设置id，例如id为“mapid”，并未div设置宽度、高度等属性。

保证在页面元素都完全加载之后，添加如下代码：

3.2    Layer

3.2.1 Tile Layer

可以选择你需要的瓦片提供商，但推荐使用Mapbox（看起来很漂亮）。

3.2.2 WMS Layer

3.2.3 TMS Layer

Leaflet并没有对于TMS服务的明确支持，但是瓦片组织结构与通用的L.TileLayer的组织模型一样，所以呈现TMS服务几乎就不那么繁琐了。

3.2.4 访问ArcGIS MapServer

Arcgis的MapServer的服务路径：

中文地图：

http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer

英文地图：

https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer

 

瓦片请求规则：/tile/{z}/{y}/{x}

具体的代码如下：

3.3    API文档

3.3.1 Dom Utility

3.3.1.1DomUtil

l  create(a,b,c?)

创建一个元素，设置该元素的类名，并且附加元素在末尾位置；

l   

 

第四章          FAQ

4.1    隐藏左下角Leaflet

在leaflet.js文件中，存在如下代码段：

L.Control.Attribution=L.Control.extend({

    options:{

       position:’bottomright’,

       prefix:’ <a href="http://leafletjs.com"title="A JS library for interactive maps">Leaflet</a>’

},

});

故此，在构造map控件时，设置options的属性attributionControl为false即可。

4.2    隐藏默认的缩放工具

在构造map控件时，设置options的属性zoomControl为false即可。

4.3    自定义缩放工具

已完成：

1.      自定义级别

2.      选择切换级别，更新缩放工具条级别显示状态

3.      单击更新缩放工具条级别显示状态

 

待完成：

1.      拖放级别，更新缩放工具条级别显示状态

4.4    引用Leaflet插件

 

第五章          拓展

5.1    常用坐标

地名	经纬坐标	备注
北京天安门	北纬39度54分27秒，东经116度23分17秒	北京标准中心坐标点
重庆	北纬29度34分，东经106度33分	重庆标准中心坐标点

 

5.2    OpenStreetMap

简称OSM，是一个网上地图协作计划，目标是创造一个内容自由且能让所有人编辑的世界地图。这个地图和百度百科，维基百科一样是全民地图。

成立于2004年7月，并于2006年4月设立OpenStreetMap基金会，鼓励自由地理数据的发展和输出。

5.3    Mapbox

是一个可以免费创建并定制个性化地图的网站。创立3年没要投资人一分钱，没有销售人员。使用教程参考http://blog.csdn.net/jwdstef/article/details/38760111。类似的网站还有ArcGISOnline，CartoDB，地图汇，Google Fusion Tables。

5.3.1 创建自己的地图

首先申请一个账号，创建完成后，可以看到Projects和Data两个选项。在Projects中可以看到自己的Projects列表。点击+Create project进入设计地图界面，可以看到Style、Data和Project三个主要的设计标签页，另外还有个人主页、搜索和Saved选项，下面主要介绍一下Style、Data和Project三个标签页。

Style	Color	通过调色板设置不同要素（街道、建筑、绿化区、水体、陆地）的颜色。也可以通过MapBox预先定义的配色方案来设置自己地图的配色
	Baselayer	设置地图类型，一共三种,普通电子地图、地形图、卫星影像
	Language	设置主机语言，四个可选项，本地化、英语、法语、西班牙语
Data	Browse	浏览地图以及要素和图层
	Marker	制作点状要素
	Line	制作线状要素
	Polygon	制作面状要素
	Menu	features和layers列表，管理要素和图层
Project	Info	获取要素的JSON和KML格式数据；MapID（需要配合Mapbox JavaScript API使用）；分享链接和嵌入网页的链接
	Settings	设置工程的名称和描述
	Advanced	功能包括：保存当前地图位置；开关工程的公共API

5.3.2 共享地图

l  Map ID：需要配合Mapbox developer tools使用。

l  Share：直接生成一个网页链接，通过链接直接访问制作的地图。

 

 

5.4    WMS

即Web Map Service，是一种通过专业GIS软件发布地图的流行方式，利用具有地理空间位置信息的数据制作地图，能够根据用户的请求返回相应的地图（包括PNG，GIF，JPEG等栅格形式或者SVG和WEB CGM等矢量形式）。有三个重要操作：GetCapabilities，GetMap，GetFeatureinfo。

GetCapabilities返回服务级元数据；GetMap返回一个地图影像；GetFeatureinfo返回显示在地图上的某些特殊要素的信息。

 

5.5    TMS

即Tile Map Service的缩写，是相对于地图切片的标准，《国家地理信息公共服务平台电子地图数据规范》（试行稿-20100730版）第6.4章节规定了地图瓦片数据的组织方式，即采用数据集、层、行目录结构描述，目录的组织逻辑如下：

 

地图切片标准包括TMS和WMTS，TMS和WMTS差异主要在于协议、瓦片组织方式。

 

TMS是纯RESTful的，而WMTS可以有KVP、SOAP、RESTful。