使用传单修改来自WMS的GetFeatureInfo请求

时间:2018-08-31 09:59:06

标签: javascript leaflet wms getfeatureinfo

我有一张用传单制作的地图。有三个底图。第一个是基本的OSM映射。第二个和第三个(“边界”和“ FNP”)是WMS。我想通过WMS'FNP'中的GetFeatureInfo显示属性,但是只想请求'GEMEINDE','NUTZUNG'和'STAND'列的值。这是此代码:

<!DOCTYPE html>
<html lang="de">
<head>
	
	<title>FNP</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
	
	<script src="/cdn-cgi/apps/head/WCXTfKrGxLNzfpUe-D2TgHwMpm4.js"></script><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	
	<style>
	
		html, body {
			height: 100%
		}
		
		#mapid {
			width: 1000px;
			height: 800px;
		}
		
		@media (max-width: 1000px) {
			#mapid{
				width: 100%;
				height: 100%
			}
		}
	</style>
	
</head>
<body>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="L.TileLayer.BetterWMS.js"></script>

	<div id="mapid"></div>
	
<script type="text/javascript">
	
	<!-- *********************** betterWms ************************************ -->
	
	L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
  
		onAdd: function (map) {
			// Triggered when the layer is added to a map.
			//   Register a click listener, then do all the upstream WMS things
			L.TileLayer.WMS.prototype.onAdd.call(this, map);
			map.on('click', this.getFeatureInfo, this);
		},
	  
		onRemove: function (map) {
			// Triggered when the layer is removed from a map.
			//   Unregister a click listener, then do all the upstream WMS things
			L.TileLayer.WMS.prototype.onRemove.call(this, map);
			map.off('click', this.getFeatureInfo, this);
		},
	  
		getFeatureInfo: function (evt) {
			// Make an AJAX request to the server and hope for the best
			var url = this.getFeatureInfoUrl(evt.latlng),
				showResults = L.Util.bind(this.showGetFeatureInfo, this);
			$.ajax({
			  url: url,
			  success: function (data, status, xhr) {
				var err = typeof data === 'string' ? null : data;
				showResults(err, evt.latlng, data);
			  },
			  error: function (xhr, status, error) {
				showResults(error);  
			  }
			});
		},
	  
		getFeatureInfoUrl: function (latlng) {
			// Construct a GetFeatureInfo request URL given a point
			var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
				size = this._map.getSize(),
				
				params = {
				  request: 'GetFeatureInfo',
				  service: 'WMS',
				  srs: 'EPSG:4326',
				  styles: this.wmsParams.styles,
				  transparent: this.wmsParams.transparent,
				  version: this.wmsParams.version,      
				  format: this.wmsParams.format,
				  bbox: this._map.getBounds().toBBoxString(),
				  height: size.y,
				  width: size.x,
				  layers: this.wmsParams.layers,
				  query_layers: this.wmsParams.layers,
				  info_format: 'text/html',
				  propertyName: 'GEMEINDE,NUTZUNG,STAND'
				};
		
			params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
			params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;
			
			return this._url + L.Util.getParamString(params, this._url, true);
		},
	  
		showGetFeatureInfo: function (err, latlng, content) {
			if (err) { console.log(err); return; } // do nothing if there's an error
			
			// Otherwise show the content in a popup, or something.
			L.popup({ maxWidth: 800})
			  .setLatLng(latlng)
			  .setContent(content)
			  .openOn(this._map);
		  }
	});

	L.tileLayer.betterWms = function (url, options) {
	  return new L.TileLayer.BetterWMS(url, options);  
	};
	
	<!-- *****************map******************************** -->
	
	var map = L.map('mapid', {
		<!-- center: [51.1961, 13.3105], -->
		<!-- zoom: 15 -->
		center: [50.8, 14],
		zoom: 11
	});
	
	var basemaps = {
		OSM: L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
			minZoom: 4,
			maxZoom: 19,
			attribution: 'Map tiles by <a target="_blank" href="http://cartodb.com/attributions">CartoDB</a> | Map data by <a target="_blank" href="http://www.openstreetmap.org/copyright" >OpenStreetMap</a>',
			subdomains: 'abcd'
		}),

		Boundaries: L.tileLayer.betterWms('https://demo.boundlessgeo.com/geoserver/ows?', {
			layers: 'ne:ne_10m_admin_0_boundary_lines_land',
			transparent: true,
			format: 'image/png'
		}),
		
		FNP: L.tileLayer.betterWms("https://rz.ipm-gis.de/ags01/services/RAPIS/RAPIS_FNP/MapServer/WmsServer?", {
			layers: '1',
			format: 'image/png',
            transparent: true,
			attribution: 'WMS: <a target="_blank" href="https://www.geomis.sachsen.de/terraCatalog/Query/ShowCSWInfo.do?fileIdentifier=a57376e1-1de2-48f7-b125-0b43c5089d91">Flächennutzungsplan RAPIS</a>'
		})
	};

	L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);

	basemaps.FNP.addTo(map);

</script>

</body>
</html>

它不适用于WMS'FNP'。当我将'propertyName'更改为'name'以测试wms'Boundaries'的请求时,它起作用了。因此,也许WMS'FNP'中缺少某些表达式?这两个WMS都是外部的,并非由我自己发布。

以下是两个WMS的source / getCapabilities:

您是否知道为什么使用一个wms的指令却不能使用另一个wms的指令?

我将非常感谢您的帮助!谢谢!

1 个答案:

答案 0 :(得分:0)

  

您是否知道为什么使用一个wms的指令却不能使用另一个wms的指令?

您在“ WMS'边界不是WMS,而是WFS”标题下引用的服务。 WFS不支持称为GetFeatureInfo的操作,只有WMS支持该操作。