开源JavaScript WebGIS库Leaflet教程:LeafLet快速入门

开源JavaScript WebGIS库Leaflet教程:LeafLet快速入门


发布日期: 2015-05-03 更新日期: 2016-09-03 编辑:bukun 浏览次数: 9946

标签:

摘要: Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 33 KB,但它具有开发人员开发在线地图的大部分功能。 Leaflet...

Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 33 KB,但它具有开发人员开发在线地图的大部分功能。

Leaflet设计坚持简便、高性能和可用性好的思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码。

LeafLet快速入门教程

本教程将一步一步的指导你如何使用Leaflet加载地图、使用标记,折线和弹出窗口,处理事件。

如何用leaflet快速加载地图

引入CSS文件

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

引用JavaScript

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

页面添加一个div作为地图的容器

<div id="map"></div>

确定map容器的高度

#map { height: 180px; }

设置地图

设置地图中心和缩放级别

var map = L.map('map').setView([51.505, -0.09], 13);

添加图层

L.tileLayer('http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png', {
attribution: 'Map data © <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
}).addTo(map);`

添加标注、圆形、多边形

添加标注
var marker = L.marker([51.5, -0.09]).addTo(map);
添加圆形
var circle = L.circle([51.508, -0.11], 500, {
 color: 'red',
    fillColor: '#f03',
 fillOpacity: 0.5
}).addTo(map);
添加多边形
var polygon = L.polygon([
 [51.509, -0.08],
 [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);
为覆盖物标注、圆、多边形添加弹出气泡
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
处理事件
function onMapClick(e) {
 alert("You clicked the map at " + e.latlng);
}
map.on('click', onMapClick);

返回目录 开源JavaScript WebGIS库Leaflet教程

关注公众号
获取免费资源

随机推荐


Copyright © Since 2014. 开源地理空间基金会中文分会 吉ICP备05002032号

Powered by TorCMS

OSGeo 中国中心 邮件列表

问题讨论 : 要订阅或者退订列表,请点击 订阅

发言 : 请写信给: osgeo-china@lists.osgeo.org