Leaflet 简单网页地图

1.作品描述

基于SuperMap iClient for Leaflet的简单的网页地图设计，实现切换底图、加载数据，属性查询，测距功能。

2.软件平台

平台：supermap iserver（发布地图服务）

数据：南京市停车场点数据， 南京市区划数据等

3.前期准备

配置idesktop，iserver

发布地图服务，得到地图服务的url

4.主要代码分析

4.1加载底图

方法：layerGroup()图层组，图层控件切换图层，tiledMapLayer().addTo(map)添加图层到地图

                //加载地图
				var url1 = "***";
				var url2 = "***";
				var url_over1 = "***";
				var url_over2 = "***";
				//声明图层组，存储停车场图层
				var parkings = L.layerGroup();
				var parking = L.supermap.tiledMapLayer(url_over1).addTo(parkings);
				var nanjingparking = L.supermap.tiledMapLayer(url_over2,{transparent:true,opacity:0.6}).addTo(parkings);
				// 定义两个图层
				var satellite = L.supermap.tiledMapLayer(url1)
				var streets = L.supermap.tiledMapLayer(url2);

				var map = L.map('allmap',{
					center:[ 31.88 ,118.77 ],
					maxZoom:18,
					zoom:8.8,
					layers: [satellite, streets],  //展示`影像图` 和 `街道图` 两个图层
				});
				
				// 图层切换
				var baseLayers = {
				    "影像图": satellite,
				    "街道图": streets
				};
				//新建图层控件的数据源
				var overlays = {'停车场': parkings};
				//新建图层控件并添加到地图
				var layerControl = L.control.layers(baseLayers, overlays).addTo(map);

结果：

4.2属性查询

方法：QueryBySQLParameters() sql属性查询

                //获取输入的区划
				function theLocation() {
					var adName = document.getElementById("AdName").value;
					alert("查询"+adName);
					var param = new SuperMap.QueryBySQLParameters({
					queryParams:{name:"parking@***",  //查询图层
					attributeFilter:"adname like '" + adName + "'"  //查询条件
					}
					});
					L.supermap.queryService(url_over1).queryBySQL(param,function(result){
						console.log(result);
						var resultlayer=L.geoJSON(result.result.recordsets[0].features.features,{
							coordsToLatLng: function (coords) {
								return L.CRS.EPSG3857.unproject(L.point(coords[0], coords[1]));
							}
						}).addTo(map);
						var overlays2 = L.layerGroup(nanjingparking).addLayer(resultlayer).addTo(map);
						layerControl.addOverlay(overlays2, "查询结果_" + adName + "").addTo(map);  //添加新的图层控件
					});
				  }

结果：

4.3测距

方法：定义鼠标动作事件来绘制折线，并计算各线段距离

var DRAWING = false;
			    var DRAWLAYERS = [];
			    var BarDRAWLAYERS = [];

			    var MEASURETOOLTIP;
			    var MEASURERESULT = 0;

			    var DRAWPOLYLINEPOINTS = []; 
			    var DRAWPOLYLINE; 
			    var DRAWMOVEPOLYLINE;
			    //测距按钮点击函数
			    function Measure() {
				    //开始画线
				    startDrawLine();
			    };

			    function startDrawLine() {
				    MEASURERESULT = 0; //测量结果
				    map.getContainer().style.cursor = 'crosshair';
				    var shapeOptions = {
					    color: '#F54124',
					    weight: 3,
					    opacity: 0.8,
					    fill: false,
					    clickable: true
				    },
				    //绘制的折线
				    DRAWPOLYLINE = new L.Polyline([], shapeOptions); 
				    map.addLayer(DRAWPOLYLINE);
				    MEASURETOOLTIP = new L.Tooltip(map); 
				    //设置地图的鼠标按下事件
				    map.on('mousedown', onClick);
				    //设置地图的双击事件
				    map.on('dblclick', onDoubleClick);

				    //鼠标按下事件
				    function onClick(e) {
					    DRAWING = true;
					    DRAWPOLYLINEPOINTS.push([e.latlng.lat,e.latlng.lng]);
					    DRAWPOLYLINE.addLatLng(e.latlng); 
					    if (DRAWPOLYLINEPOINTS.length>1){
						    //测量结果加上距离上个点的距离
						    MEASURERESULT += e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 2]);
					    }
					    //地图添加鼠标移动事件
					    map.on('mousemove', onMove);
				    }

				    //鼠标移动事件
				    function onMove(e) {
					    if (DRAWING) {
						    if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) { //绘制过程中的折线
							    map.removeLayer(DRAWMOVEPOLYLINE);
						    }    
						    var prevPoint = DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1];
						    DRAWMOVEPOLYLINE = new L.Polyline([prevPoint, e.latlng], shapeOptions);
						    //添加到地图
						    map.addLayer(DRAWMOVEPOLYLINE); 
						    //累加距离
						    var distance = MEASURERESULT + e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS
						  .length - 1]);
					    }
				    }

				    //鼠标双击事件
				    function onDoubleClick(e) {
					    map.getContainer().style.cursor = '';
					    //之前的距离加上最后一次的距离
					    var distance = MEASURERESULT + e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length -
					1]);
					    //添加一个标记
					    marker = new L.Marker(e.latlng, {
						    draggable: false
					    });
					    map.addLayer(marker);
					    //标记绑定弹窗显示
					    marker.bindPopup((distance / 1000).toFixed(2) + "公里").openPopup();
					    if (DRAWING) {
						    if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) {
						      map.removeLayer(DRAWMOVEPOLYLINE);
						      DRAWMOVEPOLYLINE = null;
						    }
						    BarDRAWLAYERS.push(DRAWPOLYLINE);
						    DRAWPOLYLINEPOINTS = [];
						    DRAWING = false;
						    //移除事件
						    map.off('mousedown');
						    map.off('mousemove');
						    map.off('dblclick');
					    }
				    }

			    }


			    //执行清除方法
			    function clearMeasure(func) {
				    for (var i = 0; i < BarDRAWLAYERS.length; i++) {
				    	//移除图层
					    map.removeLayer(BarDRAWLAYERS[i]);
				    }
				    //清空数组
				    BarDRAWLAYERS = [];
				    if (marker) {
					    map.removeLayer(marker)
				    }
			    }

结果：

 

5.完整代码

	
		
		
		
		
		
		
		
	

					
		

			

				

					
测距
					
清除
				
				

					
查询停车场
					
区划: