gpt4 book ai didi

javascript - 如何通过弹出窗口获取在geoserver中发布的wms图层的属性信息。传单

转载 作者:行者123 更新时间:2023-12-02 23:46:59 31 4
gpt4 key购买 nike

我已经在地理服务器中发布了一个功能,我可以通过传单及其 basemap 成功访问该功能。现在我需要在弹出窗口中获取feature onclick的属性信息。

我按原样使用了示例( https://gist.github.com/rclark/6908938 ),但没有成功,单击后它没有显示任何内容,控制台中也没有任何错误。我用“mapid”替换了“map”,即我的mapid。我不明白发生了什么,请帮助我解决这个问题。谢谢......

我的 html 文件是 - test.html

    <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);
};

我期待点击 WMS 图层时会出现一个简单的弹出窗口,其中包含该要素的属性信息。

最佳答案

您将 Forest_Data 定义为默认 WMS 对象:

var Forest_Data = L.tileLayer.wms (...)

您需要使用您定义的新对象。请参阅您的链接示例:

L.tileLayer.betterWms(...)

关于javascript - 如何通过弹出窗口获取在geoserver中发布的wms图层的属性信息。传单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55813632/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com