You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.9 KiB
88 lines
2.9 KiB
/* eslint-disable no-unused-vars */ |
|
// Credits to https://gist.github.com/rclark/6908938 |
|
|
|
L.TileLayer.GeneralWMS = L.TileLayer.WMS.extend({ |
|
onAdd(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) |
|
// map.on('move', () => console.log(this)) |
|
// console.log(this) |
|
}, |
|
onRemove(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) |
|
}, |
|
async getFeatureInfo(evt) { |
|
// Make an AJAX request to the server and hope for the best |
|
const url = this.getFeatureInfoUrl(evt.latlng), |
|
showResults = L.Util.bind(this.showGetFeatureInfo, this) |
|
|
|
await fetch(url) |
|
.then((response) => response.json()) |
|
.then((data) => { |
|
// console.log(data) |
|
const err = typeof data === 'object' ? null : data |
|
const numberReturned = data?.numberReturned |
|
|
|
if (numberReturned === 1) { |
|
// showResults(err, evt.latlng, JSON.stringify(data)) |
|
showResults(err, evt.latlng, data.features[0].properties) |
|
// const id_md = data.features[0].properties.i |
|
} |
|
if (numberReturned > 1) { |
|
showList(err, evt.latlng, data) |
|
} |
|
}) |
|
.catch((err) => { |
|
// showResults(JSON.stringify(err)) |
|
}) |
|
}, |
|
|
|
getFeatureInfoUrl(latlng) { |
|
// return |
|
// const map = useMap() |
|
// Construct a GetFeatureInfo request URL given a point |
|
const point = this._map.latLngToContainerPoint(latlng) |
|
const size = this._map.getSize() |
|
|
|
// https://docs.geoserver.org/latest/en/user/services/wms/reference.html#wms-getfeatureinfo |
|
const params = { |
|
request: 'GetFeatureInfo', |
|
service: 'WMS', |
|
crs: '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, |
|
// height: this.wmsParams.height, |
|
width: size.x, |
|
// width: this.wmsParams.width, |
|
layers: this.wmsParams.layers, |
|
viewparams: this.wmsParams.viewparams, |
|
cql_filter: this.wmsParams.cql_filter, |
|
query_layers: this.wmsParams.layers, |
|
info_format: 'application/json', |
|
feature_count: 1 |
|
} |
|
|
|
params[params.version === '1.3.0' ? 'i' : 'x'] = Math.round(point.x) |
|
params[params.version === '1.3.0' ? 'j' : 'y'] = Math.round(point.y) |
|
return this._url + L.Util.getParamString(params, this._url, true) |
|
}, |
|
|
|
showGetFeatureInfo(err, latlng, content) { |
|
if (err) { |
|
console.log(err) |
|
} |
|
} |
|
}) |
|
|
|
L.tileLayer.generalWms = function (url, options) { |
|
return new L.TileLayer.GeneralWMS(url, options) |
|
}
|
|
|