Javascript 如何通过弹出窗口获取发布在geoserver中的wms图层的属性信息。传单
我已经在geoserver中发布了一个功能，我正在通过带有底图的传单成功访问该功能。现在我需要在弹出窗口中获取FeatureOnClick的属性信息 我按原样使用了example（），但并没有成功，单击它不会显示任何内容，也不会在控制台中显示任何错误。我用“mapid”替换了“map”，即我的mapid。我不明白发生了什么，请帮我解决这个问题。谢谢 我的html文件是-test.htmlJavascript 如何通过弹出窗口获取发布在geoserver中的wms图层的属性信息。传单,javascript,leaflet,geoserver,wms,getfeatureinfo,Javascript,Leaflet,Geoserver,Wms,Getfeatureinfo,我已经在geoserver中发布了一个功能，我正在通过带有底图的传单成功访问该功能。现在我需要在弹出窗口中获取FeatureOnClick的属性信息 我按原样使用了example（），但并没有成功，单击它不会显示任何内容，也不会在控制台中显示任何错误。我用“mapid”替换了“map”，即我的mapid。我不明白发生了什么，请帮我解决这个问题。谢谢 我的html文件是-test.html <html> <head> <title>
<html>
<head>
<title>Leaflet</title>
<link rel="stylesheet" href="http://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="http://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="BetterWMS.js"></script>
<script type='text/javascript'>
var map = new L.Map('map', {center: new L.LatLng(30.176166666666667,79.14880555555557), zoom: 8});
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(osm);
var Forest_Data = L.tileLayer.wms('http://localhost:8080/geoserver/cite/wms', {
format: 'image/png',layers: 'cite:Forest_Data',transparent: 'true'
}).addTo(map);
</script>
</body>
</html>
and "BetterWMS.js" file is -
L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
onAdd: function (mapid) {
// 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, mapid);
map.on('click', this.getFeatureInfo, this);
},
onRemove: function (mapid) {
// 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, mapid);
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'
};
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);
};
传单
var map=newl.map（'map'，{中心：newl.LatLng（30.17616666667,79.1488055557），缩放：8}）；
var osm=newl.TileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'）；
map.addLayer（osm）；
var Forest_Data=L.tileLayer.wms（'http://localhost:8080/geoserver/cite/wms', {
格式：'image/png'，图层：'cite:Forest_Data'，透明：'true'
}).addTo（地图）；
“BetterWMS.js”文件是-
L.TileLayer.BetterWMS=L.TileLayer.WMS.extend({
onAdd:函数（mapid）{
//将图层添加到地图时触发。
//注册一个click侦听器，然后执行所有上游WMS操作
L.TileLayer.WMS.prototype.onAdd.call（this，mapid）；
map.on（'click'，this.getFeatureInfo，this）；
},
onRemove:函数（mapid）{
//从地图中删除图层时触发。
//取消注册click侦听器，然后执行所有上游WMS操作
L.TileLayer.WMS.prototype.onRemove.call（this，mapid）；
map.off（'click'，this.getFeatureInfo，this）；
},
getFeatureInfo:函数（evt）{
//向服务器发出AJAX请求，希望一切顺利
var url=this.getFeatureInfoUrl（evt.latlng），
showResults=L.Util.bind（this.showGetFeatureInfo，this）；
$.ajax({
url:url，
成功：功能（数据、状态、xhr）{
var err=typeof data=='string'？null:数据；
显示结果（err、evt.latlng、数据）；
},
错误：函数（xhr、状态、错误）{
显示结果（错误）；
}
});
},
getFeatureInfoUrl:函数（latlng）{
//构造一个给定点的GetFeatureInfo请求URL
var point=this.\u map.latLngToContainerPoint（latlng，this.\u map.getZoom（）），
size=this.\u map.getSize（），
参数={
请求：“GetFeatureInfo”，
服务：“WMS”，
srs:‘EPSG:4326’，
样式：this.wmsParams.styles，
透明：this.wmsParams.transparent，
版本：this.wmsParams.version，
格式：this.wmsParams.format，
bbox:this.\u map.getBounds（）.toBBoxString（），
身高：尺码.y，
宽度：size.x，
图层：this.wmsParams.layers，
查询层：this.wmsParams.layers，
信息格式：“文本/html”
};
params[params.version=='1.3.0'？'i'：'x']=point.x；
params[params.version=='1.3.0'？'j'：'y']=point.y；
返回此。_url+L.Util.getParamString（params，this。_url，true）；
},
showGetFeatureInfo:函数（错误、板条、内容）{
if（err）{console.log（err）；return；}//如果出现错误，则不执行任何操作
//否则，在弹出窗口中显示内容或其他内容。
L.popup（{maxWidth:800}）
.setLatLng（latlng）
.setContent（content）
.openOn（这张地图）；
}
});
L.tileLayer.betterWms=函数（url，选项）{
返回新的L.TileLayer.BetterWMS（url，选项）；
};
我希望单击WMS图层时会出现一个简单的弹出窗口，其中包含该功能的属性信息。您已将
林\u数据定义为默认WMS对象：
var-Forest\u Data=L.tileLayer.wms（…）
您需要使用您定义的新对象。请参见链接的示例：
L.tillelayer.betterWms（…）
以上代码正确，只需更换一次，而不是-
var Forest_Data=L.tileLayer.wms，它将是-
var Forest_Data=L.tileLayer.betterWMS非常感谢@Joffrey，现在我得到了弹出窗口，但CORS错误仍然存在，即请求的资源上没有“访问控制允许来源”标题。我正在为chrome使用CORS扩展并获得弹出窗口。但我想通过代码来纠正它。如何做到这一点？我尝试了以下几件事-Geoserver中web.xml中的未注释CORS过滤器添加了标题访问控制允许来源：“*”在我的html文件中也尝试了它，因为php是否有人可以建议将此代码放在何处？此标题必须在Geoserver的答案中设置。您的web.xml版本应该已经解决了这个问题：修改后是否重新启动了服务器？否则，您应该在GIS上创建一个关于此的新问题：是的，我尝试重新启动服务器，但存在相同的错误。