javascript - 使用带有 Leaflet 的 WMS 弹出窗口

Question

我想知道来自地理服务器的传单 map 如何迭代并显示带有信息的弹出窗口。请有人可以在 jsfiddle 中做一些事情，这样我就能理解，因为我只是不知道如何做到这一点。基本上这就是我想要的，引入一个地理服务器层，并能够通过每个部分的弹出窗口从中获取信息。我的代码就是这样:

var stComerciaisLayer= L.tileLayer.wms("http://...:8080/geoserver/wms/", {
          layers: 'IGEO:setor_comercial_geo',
          format: 'image/png',
          transparent: true,
          attribution: "Test"
        });

如何放置弹出窗口？谢谢!

<小时/>

我完全复制了这个:

http://bl.ocks.org/rclark/6908938

但不起作用:

<script src="L.TileLayer.BetterWMS.js"></script>

var stComerciaisLayer= L.tileLayer.betterWms("http://...:8080/geoserver/wms/", {
          layers: 'IGEO:setor_comercial_geo',
          format: 'image/png',
          transparent: true,
          attribution: "Some test"
        });

L.TileLayer.BetterWMS.js

L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({

  onAdd: function (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);
  },

  onRemove: function (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);
  },

  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: 'application/json'
        };

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

错误如下:

Failed to load http://...:8080/geoserver/wms/?REQUEST=GetFeatureInfo&SERVICE=WMS&SRS=EPSG%3A4326&STYLES=&TRANSPARENT=true&VERSION=1.1.1&FORMAT=image%2Fpng&BBOX=-38.74431610107422%2C-4.0605082148574105%2C-38.26400756835938%2C-3.726884196645965&HEIGHT=974&WIDTH=1399&LAYERS=IGEO%3Asetor_comercial_geo&QUERY_LAYERS=IGEO%3Asetor_comercial_geo&INFO_FORMAT=application%2Fjson&X=821&Y=172: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.



leaflet.js:5 Uncaught TypeError: Cannot read property 'lat' of undefined

Answer 1

您显示的错误消息是关于 CORS .

它表示您的服务器(geoserver)未配置为发送 CORS header ，因此您的浏览器拒绝从该服务器加载数据，坚持 Same-origin policy .

您应该有足够的资源来配置地理服务器的 CORS header ，包括在 SO 或 GIS Stack Exchange 上，例如CORS - Tomcat - Geoserver