openlayers入门开发系列之地图空间查询篇

本篇的重点内容是利用openlayers实现地图空间查询功能,效果图如下:

实现思路:

  • 框选工具(多边形以及矩形)
//多边形
$("#polygonButton").bind("click", function () {
        	DCI.SpatialQuery.clearMap();
        	DCI.SpatialQuery.InitState();
        	DCI.SpatialQuery.addInteraction("Polygon");
})
//矩形
$("#rectangleButton").bind("click", function () {
        	DCI.SpatialQuery.clearMap();
        	DCI.SpatialQuery.InitState();
        	DCI.SpatialQuery.addInteraction("Box");
})

addInteraction:function(value){
    	var geometryFunction;
    	switch (value) {
		case "Box":	
            value = 'Circle';
            geometryFunction = ol.interaction.Draw.createBox();
			break;
		case "Polygon":	
            value = 'Polygon';
			break;
		}
    	DCI.SpatialQuery.draw = new ol.interaction.Draw({
            source: DCI.SpatialQuery.source,
            type: value,
            geometryFunction: geometryFunction
          });
    	DCI.SpatialQuery.map.addInteraction(DCI.SpatialQuery.draw);
    	DCI.SpatialQuery.draw.on('drawend',function(evt){
    		DCI.SpatialQuery.clearMap();
    		DCI.SpatialQuery.drawEndPlot(evt.feature);
		});   	
    	
}
  • 框选绘制完成,进行wfs进行空间查询
/**
 * 地图点击完成后函数
 * **/
drawEndPlot:function(feature){
	    var featureRequest = new ol.format.WFS().writeGetFeature({
	          srsName: bxmap.config.MapConfig.wfs.srsName,
	          featureNS: bxmap.config.MapConfig.wfs.featureNS,
	          featurePrefix: bxmap.config.MapConfig.wfs.featurePrefix,
	          featureTypes: bxmap.config.MapConfig.wfs.featureTypes,
	          outputFormat: bxmap.config.MapConfig.wfs.outputFormat,
	          filter:ol.format.filter.intersects(bxmap.config.MapConfig.wfs.geometryName, feature.getGeometry(), bxmap.config.MapConfig.wfs.srsName)
	    });
	    fetch(bxmap.config.MapConfig.geoserver_url+bxmap.config.MapConfig.wfs.url, {
	          method: 'POST',
	          body: new XMLSerializer().serializeToString(featureRequest)
	        }).then(function(response) {
	          return response.json();
	        }).then(function(json) {
	          var features = new ol.format.GeoJSON().readFeatures(json);
	          if(features && features.length>0){
	          	  if(DCI.SpatialQuery.spatialLayer)
	          	     DCI.SpatialQuery.spatialLayer.getSource().clear();
	          	  if(DCI.SpatialQuery.pointLayer)
		          	 DCI.SpatialQuery.pointLayer.getSource().clear();
		          DCI.SpatialQuery.spatialSource.addFeatures(features);
		          DCI.SpatialQuery.map.getView().fit(DCI.SpatialQuery.spatialSource.getExtent());
		          $("#spatial-total").html("框选查询共"+features.length+"条结果");
		          var innerStr = [];
	        	  for(var i=0;i<features.length;i++){
	        		  var feature = features[i];
	        		  //面取中心点
	   			      var pointGeometry=DCI.SpatialQuery.creatPointGeometry(feature.getGeometry().getExtent());//面取中心点
	   			      var attribute = {
	   			    	  "OBJECTID":features[i].get('OBJECTID'),
	   			    	  "名称":features[i].get('名称'),
	   			    	  "编号":features[i].get('编号'),
	   			    	  "类别":features[i].get('类别'),
	   			    	  "面积":features[i].get('面积'),
	   			      };
	   				  var feature=new ol.Feature({
	   					geometry: pointGeometry,
	   					attribute:attribute,
	   					id:features[i].get('OBJECTID'),
	   					type:"point"
	   				  });
	   				  DCI.SpatialQuery.pointLayer.getSource().addFeature(feature);
	   			      
	                  innerStr.push('<div class="left_list_li_box"   id="' + features[i].get('OBJECTID') + '"   onclick="DCI.SpatialQuery.locationToMap(\'' + features[i].get('OBJECTID') + '\')" >');
	                  innerStr.push('<div class="left_list_li_box_top">');
	                  innerStr.push('<div class="left2_box2">');
	                  innerStr.push('<img class="list_poi_marker" style="" src="' + getRootPath() + 'Content/images/index/poiLocation.png"></img>');
	                  innerStr.push('<div class="left_list_li1">');
	                  innerStr.push('<p>');
	                  innerStr.push('<a style="text-decoration:none">' + features[i].get('名称') + '</a><br/>');
	                  innerStr.push('</p>');
	                  innerStr.push('<p>');
	                  innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('编号') + '</a><br/>');
	                  innerStr.push('</p>');
	                  innerStr.push('<p>');
	                  innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('类别') + '</a><br/>');
	                  innerStr.push('</p>');
	                  innerStr.push('<p>');
	                  innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('面积') + '</a><br/>');
	                  innerStr.push('</p>');
	                  innerStr.push('</div>');
	                  innerStr.push('</div>')
	                  innerStr.push('</div>');
	                  innerStr.push('</div>');
	        	  }
	        	  $("#showLists").html(innerStr.join(''));
	          }
	          else{
	        	  $("#showLists").html("框选查询不到相关结果");	        	  
	          }
	   });		
}
  • 点击查询结果列表,地图定位
/**点击list定位**/
locationToMap:function(index){
		var curfeature;
		DCI.SpatialQuery.pointLayer.getSource().forEachFeature(function(feature){
			var fid=feature.get('id');
			if(fid==index){
				curfeature=feature;
			}
		});
		if(curfeature){
			var attribute = curfeature.get('attribute');
			var centerCord= DCI.SpatialQuery.getCenterCoordinates(curfeature);
			var winObj=DCI.SpatialQuery.getWinContent(attribute);
			DCI.SpatialQuery.showGraphicWin(centerCord,winObj.html,winObj.title);	
			$(".openInfo").click(function(){
				DCI.SpatialQuery.showInfoWindow(attribute);
			});
		}
		else{
			DCI.SpatialQuery.hideGraphicWin();
			promptdialog("提示信息","地图定位匹配不到相关数据");
		}
}
  • 地图点击事件,显示气泡窗口
DCI.SpatialQuery.map.on("click", function (e) {//鼠标单击图标事件
			if (e.dragging) {
				return;
			}
			var feature =DCI.SpatialQuery.map.forEachFeatureAtPixel(e.pixel,
				function(feature) {
				return feature;
			});
			if(feature){
				var type=feature.get('type');
				if(type=='point'){
					var attribute = feature.get('attribute');
					var winObject=DCI.SpatialQuery.getWinContent(attribute);
					var centerCoordinates=DCI.SpatialQuery.getCenterCoordinates(feature);
					DCI.SpatialQuery.showGraphicWin(centerCoordinates,winObject.html,winObject.title);
					$(".openInfo").click(function(){
						DCI.SpatialQuery.showInfoWindow(attribute);
					});
				}
			}
});	
  • 气泡窗口显示
showInfoWindow:function(attribute){
	var id=$(this).attr("videoid");
        var dialog = jDialog.dialog({
            title: '详情信息',
            content: '<div id="mapInfo" style="height:100% !important"></div>',
            width:$("#main-container").width()*0.8,
            height:$("#main-container").height()
        });
        var html=DCI.SpatialQuery.getInfoWinContent(attribute);
        $("#mapInfo").empty();
        $("#mapInfo").append(html);		
},
/**获取详情弹出框html模版
 *@attribute
**/
getInfoWinContent:function(attribute){
	var winHtml="";
	winHtml = "<div  style='width:300px;' id='inforwin_Container'>"+
			"<table>"+
			"<tr>"+
			"<td style='width:20%'><label style='font-weight:normal;font-size:13px;'>名称:</label></td>"+
			"<td><label style='font-weight:normal;font-size:13px;'>"+attribute.名称+ "</label></td>"+
			"</tr>"+
			"<tr>"+
			"<td style='width:20%'><label style='font-weight:normal;font-size:13px;'>编号:</label></td>"+
			"<td><label style='font-weight:normal;font-size:13px;'>"+attribute.编号+ "</label></td>"+
			"</tr>"+
			"<tr>"+
			"<td style='width:20%'><label style='font-weight:normal;font-size:13px;'>类别:</label></td>"+
			"<td><label style='font-weight:normal;font-size:13px;'>"+attribute.类别+ "</label></td>"+
			"</tr>"+
			"<tr>"+
			"<td style='width:20%'><label style='font-weight:normal;font-size:13px;'>面积:</label></td>"+
			"<td><label style='font-weight:normal;font-size:13px;'>"+attribute.面积+ "</label></td>"+
			"</tr>"+
			"</table>"+	
			"</div>";
	return winHtml;
}

 

作者: GIS之家

GIS之家微信号:gishome;GIS之家拥有自己的GIS开发团队,均是高校GIS研究生,具备丰富的webgis开发项目工作经验,专注以及热爱研究webgis技术的团队

发表评论

电子邮件地址不会被公开。