发现leaflet这个js框架,据说数据量很小33kb,函数都很精简有木有,L.map(),L.tilelayer(),L.circle(),L.marker()……
这个是干啥用的呢。主要为了适应移动端的gis开发。以后手机平板用这个开发出来的地图得多爽啊。参数都很少啊,多符合现在的代码调优的要求啊。
怎么开发呢。在开发的时候引用上js库和css文件就可以了啊,怪不得33kb呢只有css和js库33kb当然够了。
这是leaflet做的gis拓扑
http://demo.qunee.com/map/mapByLeafLet.html
###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);