Leaflet
2016年10月9日
2016年10月11日添加统计图
2016年10月17日添加Identify
1 目标:实现HTML展示地图的功能。
在WEB页面展示在线的地图服务,并实现常用的地图操作,完成各种地图交互,显示各种地图数据等功能。
2原理:JS+CSS实现各种地图服务、资源的展示和控制。
通过JS+CSS按照各种地图服务标准,获取地图数据,通过HTML展示、控制、交互等。
Leaflet核心包实现了标准地图服务、资源的展示和控制,其它地图服务需要使用插件实现,如arcgis地图服务需要使用arcgis的插件才能加载,google地图服务不对外开放,需要使用google map的api 插件才能加载。
Leaflet主要组件是map,使用一个div作为地图的容器,在其中展示地图。Leaflet使用L对象作为所有Leaflet的基本对象。
参考:http://leafletjs.com/reference-1.0.0.html#map-example
http://leafletjs.com/examples.html
3方法:Leaflet基本类型
参考:http://leafletjs.com/examples/quick-start/
http://leafletjs.com/reference-1.0.0.html
3.1 地图Map:L.map
初始化:L.map(“div id”)。
3.2 图层:tileLayer,tileLayer.wms等多种类型的图层。
3.2.1 TMS:tileLayer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <ahref="http://osm.org/copyright">OpenStreetMap</a>contributors'
}).addTo(map);
3.2.2 WMS:tileLayer.wms
varwmsBhxq = L.tileLayer.wms('http://localhost:8087/geoserver/bhxq/wms?', {
layers: 'bhxq:bhxq',
format: 'image/png',
transparent: true,
attribution: "Map© 2016 XXZX"
}).addTo(mymap);
varmymap = L.map('mapid').setView([38.88, 117.58], 10);
varwmsTDHBaseMap =L.tileLayer.wms('http://111.160.249.157:8095/Tile/WMS/BHGGVECTORBLEND.gis', {
layers: 'bhggvectorblend',
crs:L.CRS.EPSG4326,
format: 'image/png',
transparent: true,
attribution: "Map© 2016 XXZX"
}).addTo(mymap);
3.2.2.1 标准的WMS不支持GetFeatureInfo(),可以通过插件实现元素信息查询功能。
插件地址:https://github.com/heigeo/leaflet.wms
原理:添加identify启用功能(默认启用),通过GetFeatureInfo()提交ajax请求数据,parseFeatureInfo()处理返回值,ShowFeatureInfo()将结果显示在Map上。
示例:参见:Identify地图元素信息:点击地图显示图层对应元素的信息
3.2.3 WMTS:不能直接加载,需要使用插件L.tileLayer.WMTS加载。
3.3 地图元素:Marker,Popup,Tooltip
3.3.1 图标Marker:L.marker(坐标).addTo(地图)。
Div作为Marker的图标:L.divIcon()。
varmyDivIcon=L.divIcon({
className:'leaflet-echart-icon',
iconSize:[160, 160],
html:'<div id="marker1" style="width: 160px; height: 160px;position: relative; background-color: transparent;">asd</div>'
});
varmarker=L.marker([51.5, -0.09],{icon:myDivIcon}).addTo(map);
3.3.2 气泡Popup:marker.bindPopup('pop <br>OK.').openPopup();
3.4 地图控件:zoom,layers等固定的不随map移动上的HTML元素。
L.control.layers(null,baseLayers).addTo(mymap);
添加控件:L.control(),指定位置postion,指定内容onAdd。
varchartControl=L.control({position:'bottomright'});
chartControl.onAdd=function(map){
vardiv=L.DomUtil.create('div','info div');
div.id="chartdiv";
div.style="width:500px;height: 300px; background-color: white;";
returndiv;
};
chartControl.addTo(map);
自定义控件:
3.5 事件event:事件的响应函数可以获取事件参数。
mymap.on('click', onMapClick);
4应用
注意:div style中width,height 100%无效的问题,添加html,body的style解决。
html, body{ margin:0;height:100%; }
参考:http://www.weste.net/2014/4-28/96579.html
http://www.cnblogs.com/shitao/p/5604652.html
4.1 基本展示
参考:http://leafletjs.com/examples/quick-start/
//index.htm
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<linkrel="stylesheet" href="js/leaflet/leaflet.css" />
<styletype="text/css">
html, body{ margin:0;height:100%; }
#map{ height:100%;width:100%;}
</style>
<scripttype="text/javascript" src="js/leaflet/leaflet-src.js"></script>
<title>LeafletDemo</title>
</head>
<body>
<divid='map'></div>
<scripttype="text/javascript">
varmap=L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <ahref="http://osm.org/copyright">OpenStreetMap</a>contributors'
}).addTo(map);
L.marker([51.5,-0.09]).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easilycustomizable.').openPopup();
</script>
</body>
</html>
4.2 图层控制
//bhxq.htm
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<linkrel="stylesheet" href="js/leaflet/leaflet.css" />
<style>
html, body{margin:0; height:100%; }
#mapid {height:100%;width: 100%;}
</style>
<scripttype="text/javascript" src="js/leaflet/leaflet-src.js"></script>
<title>滨海新区</title>
</head>
<body>
<divid="mapid"></div>
<scripttype="text/javascript">
var mymap =L.map('mapid').setView([38.88, 117.58], 10);
var wmsBhxq =L.tileLayer.wms('http://localhost:8087/geoserver/bhxq/wms?', {
layers: 'bhxq:bhxq',
format: 'image/png',
transparent: true,
attribution: "Map© 2016 XXZX"
}).addTo(mymap);
var wmsRoad =L.tileLayer.wms('http://localhost:8087/geoserver/bhxq/wms?', {
layers: 'bhxq:主要道路',
format:'image/png',
transparent: true,
attribution: "Map© 2016 XXZX"
}).addTo(mymap);
var wmsPlace =L.tileLayer.wms('http://localhost:8087/geoserver/bhxq/wms?', {
layers: 'bhxq:行政地名',
format:'image/png',
transparent: true,
attribution: "Map© 2016 XXZX"
}).addTo(mymap);
var baseLayers ={
"滨海新区":wmsBhxq,