首页 > 代码库 > leaflet开源地图库源码阅读笔记(一)——简介&Demo初体验(by vczero)

leaflet开源地图库源码阅读笔记(一)——简介&Demo初体验(by vczero)

一、简介

电子地图已经在O2O、生活服务、出行等领域布局,传统的GIS也孕育着互联网基因。传统GIS的图商有ESRI(Arc系列)、四维、高德、超图、中地等等。在web互联网领域,百度和高德较为出色。但是开放源代码都远远做的不够,相比而言国外开源较多且丰富,最近认真研读了openlayers2/3和leaflet的源码,收获颇多,不仅加强对浏览器兼容性、HTML5、CSS3等基础,还增强了GIS的基础。本人现在也在一家互联网公司做js api的研发,因此,需要不断地吸取开源代码的营养。

leaflet:An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps。leaflef具有很好的其兼容性、HTML5新特性、轻量级吸引着我。引百度百科:Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 33 KB,但它具有开发人员开发在线地图的大部分功能。Leaflet是一个为建设移动设备友好的互动地图,而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 33 KB,但它具有开发人员开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码。使用和阅读leaflet是一种享受。

leaflet document:http://leafletjs.com/index.html

github:https://github.com/Leaflet/Leaflet

二、初体验

下面上一副地图,多么优雅!

三、上面地图的源码

修改下了leaflet的demo,以最为简介的代码构建了上面的地图。这就是leaflet的魅力。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta charset="utf-8" /> 5     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6     <title>Leaflet初体验</title> 7     <link rel="stylesheet" href="http://www.mamicode.com/dist/leaflet.css" /> 8     <link rel="stylesheet" href="http://www.mamicode.com/css/screen.css" /> 9     <script type="text/javascript" src="http://www.mamicode.com/build/deps.js"></script>10     <script src="http://www.mamicode.com/leaflet-include.js"></script>11 </head>12 <body>13     <div id="map"></div>14     <script type="text/javascript">15         //获取切片数据的URL,x,y是切片的坐标,z是缩放级别16         var osmUrl = ‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png‘,17             osm = L.tileLayer(osmUrl, {maxZoom: 17});18         //创建map对象19         var map = L.map(‘map‘);20         map.setView([50.5, 30.51], 15);21         map.addLayer(osm);22         23         //创建marker24         var marker = new L.Marker(new L.latLng(50.5, 30.51));25         map.addLayer(marker);26         27         //创建infowindow28         marker.bindPopup(‘这个是infowindow对象‘);29     </script>30 </body>31 </html>

四、下一篇

(1)下一篇:leaflet的代码总体框架,预计产出时间:国庆期间

(2)该系列博客(leaflet源码笔记)总体设想12篇,深入剖析leaflet源码和如何使用。

 

leaflet开源地图库源码阅读笔记(一)——简介&Demo初体验(by vczero)