Как получить атрибутивную информацию о слое wms, опубликованном в геосервере во всплывающем окне через.листовка - PullRequest
Новая
       90

Как получить атрибутивную информацию о слое wms, опубликованном в геосервере во всплывающем окне через.листовка

0 голосов
/ 23 апреля 2019

Я опубликовал функцию в геосервере, к которой я успешно обращаюсь с помощью листовки с ее базовой картой.Теперь мне нужно получить информацию об атрибутах функции onclick во всплывающем окне.

Я использовал пример (https://gist.github.com/rclark/6908938) как есть, но не удалось, при нажатии ничего не отображается,ни одной ошибки в консоли. Я заменил «map» на «mapid», т.е. mapid для меня. Я не понимаю, что происходит, пожалуйста, помогите мне с этим. Спасибо .....

мой HTML-файл - тест.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 с информацией об атрибутах объекта.

Ответы [ 2 ]

2 голосов
/ 24 апреля 2019

Вы определили свой Forest_Data как объект WMS по умолчанию:

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

Вам нужно использовать новый объект, который вы определили.Смотрите в примере вашей ссылки:

L.tileLayer.betterWms(...)

0 голосов
/ 29 апреля 2019

приведенный выше код является правильным, только одна замена была необходима, вместо - var Forest_Data = L.tileLayer.wms, это будет - var Forest_Data = L.tileLayer.betterWMS

...