Leaflet 地图开发笔记

  • A+
所属分类:制图方法

Leaflet 是一个开源地图接口的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 33 KB,但它具有开发人员开发在线地图的大部分功能。对加载的图层、色彩风格有很灵活的控制,现在很多数据可视化、分析图都在上面做。

官方网站:http://leafletjs.com/

加载地图例子:

 

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Web Map</title>

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

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

<style>
* {
padding: 0;
margin: 0;
}

body,html {
height: 100%;
}

#map {
width: 100%;
height: 100%;
min-height: 100%;
}

* html #map {
height: 100%;
}
</style>

</head>

<body>

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

<script>

var map = L.map('map',{
center: [29, 119],
zoom: 4
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//添加wms

L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
layers: 'nexrad-n0r-900913',
format: 'image/png',
transparent: true,
attribution: "Weather data © 2012 IEM Nexrad"
}).addTo(map);

L.tileLayer.wms("http://gisserver.tianditu.com/TDTService/region/wms", {
layers: '030100',
format: 'image/png',
transparent: true,
attribution: "Weather data © 2012 IEM Nexrad"
}).addTo(map);

</script>

</body>

</html>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: