engineN/app/Views/kewilayahan/peta/generalWms/L.TileLayer.GeneralWMS.js

/* 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)
}