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,
最低0.47元/天 解锁文章
4500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
