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

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

第四章 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。

Leaflet使用介绍相关推荐

gis信息可视化之一Leaflet组件介绍
二维地理信息可视化是展示平面世界的基础,本文将将介绍开源界中的轻量级可视化基础框架Leaflet,介绍其主要功能以及如何使用,最后给出一个简单演示实例. 一.Leaflet是什么? Leaflet i ...
在Leaflet地图上集成Echarts
需求背景: 现在我要在地图上加上Echarts的散点图还有线集,看起来就很牛B的那种.上效果图: 需求分析: 我先看了看Echarts官网上有提供加载地图的例子,主要包括三种方式: 1.加载js格式的 ...
基于Leaflet的乡镇行政区划在WebGIS中的可视化工具实践
前言在构建WebGIS的应用系统中,通常会遇到以下的建设需求.功能点如下: 实现影像地图的展示,可以放大.缩小和浏览地图. 地图的拖拽范围需要控制在合理的经纬度范围内. 在影像地图侧边实现某乡镇级行 ...
geoserver的api接口_geoserver api
介绍了 Geoserver:2.1.3 Pyramid Plugin:2.7.4 FWTools:2.4.7 环境下的影像金字塔模型的发布过程. 使用Geoserver Pyramidal Plugi ...
未经投影的地理坐标系如何显示为平面地图
缘起使用Leaflet做点缓冲,也就是调用"L.circle()"绘制圆形,传入半径100米,绘制出来的圆却覆盖了全球,当时就猜想,应该是把半径按100度来绘制了,但看了Leaf ...
esri-leaflet入门教程（1）-leaflet介绍
esri-leaflet入门教程(1)-esri leaflet介绍 by 李远祥关于leaflet,可能很多人比较陌生,如果搭上esri几个字母,可能会有更多的人关注.如果没有留意过leaflet ...
简单介绍Windows中将Nginx添加为服务的问题
这篇文章主要介绍了Windows中将Nginx添加为服务的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下在使用LeafLet写离线地图时,需要将Ngi ...
Angular 个人深究（五）【外部包引用 Leaflet 简单实用】
2019独角兽企业重金招聘Python工程师标准>>> Leaflet 使用最近在Angular项目中,用到了地图,由于种种原因放弃了百度地图api使用,最后选择了leaflet, ...
入门Leaflet之小Demo
入门 Leaflet 之小 Demo 写在前面 ---- WebGIS 开发基础之 Leaflet GIS 基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Dat ...

Leaflet使用介绍

第一章概述

第二章 Leaflet版本及文件

2.1 版本介绍

2.2 文件介绍

2.3 生成Leaflet

第三章 Leaflet使用

3.1 快速入门

3.2 Layer

3.2.1 Tile Layer

3.2.2 WMS Layer

3.2.3 TMS Layer

3.2.4 访问ArcGIS MapServer

3.3 API文档

3.3.1 Dom Utility

3.3.1.1DomUtil

第四章 FAQ

4.1 隐藏左下角Leaflet

4.2 隐藏默认的缩放工具

4.3 自定义缩放工具

4.4 引用Leaflet插件

第五章拓展

5.1 常用坐标

5.2 OpenStreetMap

5.3 Mapbox

5.3.1 创建自己的地图

5.3.2 共享地图

5.4 WMS

5.5 TMS

Leaflet使用介绍相关推荐

最新文章

热门文章

Leaflet使用介绍

第一章 概述

第二章 Leaflet版本及文件

2.1 版本介绍

2.2 文件介绍

2.3 生成Leaflet

第三章 Leaflet使用

3.1 快速入门

3.2 Layer

3.2.1 Tile Layer

3.2.2 WMS Layer

3.2.3 TMS Layer

3.2.4 访问ArcGIS MapServer

3.3 API文档

3.3.1 Dom Utility

3.3.1.1DomUtil

第四章 FAQ

4.1 隐藏左下角Leaflet

4.2 隐藏默认的缩放工具

4.3 自定义缩放工具

4.4 引用Leaflet插件

第五章 拓展

5.1 常用坐标

5.2 OpenStreetMap

5.3 Mapbox

5.3.1 创建自己的地图

5.3.2 共享地图

5.4 WMS

5.5 TMS

Leaflet使用介绍相关推荐

最新文章

热门文章

第一章概述

第五章拓展