【问题标题】:Click fetures in OpenLayers get more information (OpenLayers3 and GeoServer)单击 OpenLayers 中的功能获取更多信息(OpenLayers 3 和 GeoServer)
【发布时间】:2020-10-18 17:34:18
【问题描述】:

当我在地图上单击该多边形时,我尝试将与之前在 OpenLayers3 上使用 GeoServer 显示的某个多边形相关的信息显示出来并放大几何图形 ....

到目前为止,我所做的,根据我在论坛上其他人在我之前所做的理解:

  var tot = new ol.layer.Tile({
              source: new ol.source.TileWMS({
                        url:'http://127.0.0.1:10000/geoserver/ADMINISTRATIE/wms',
                        params: {'LAYERS': 'ADMINISTRATIE:pdf',
                                 'STYLES':'TEREN',
                                  tiled:true,
                                  transparent: true },
                        format: new ol.format.GeoJSON(),
                        ratio: 1,
                        serverType:'geoserver'
                        
              })
          });   
             
          
          map.addLayer(tot);

map.on("singleclick", function (evt) {
        console.log("test");
          this.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
            console.log(feature);
          });
      });

在这里我尝试了单点点击事件,去点击地图并显示“测试”但已经功能根本不想显示:(

map.on("singleclick", function (evt) {
        console.log("test");
          this.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
            console.log(feature);
          });
      });

我对这些概念很陌生,现在我正在学习一个小项目,我想做一些基本的事情,为此我请求你的帮助。谢谢!

【问题讨论】:

标签: click openlayers-3 geoserver feature-selection


【解决方案1】:

我试过这样:

<!DOCTYPE html>
<html>
  <head>
    <title>WMS GetFeatureInfo (Tile Layer)</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <script>
      var wmsSource = new ol.source.TileWMS({
        url: 'http://localhost:10000/geoserver/ADMINISTRATIE/wms',
        params: {'LAYERS': 'ADMINISTRATIE:pdf',
                             'STYLES':'TEREN',
                              tiled:true,
                              transparent: true },
        serverType: 'geoserver',
        crossOrigin: 'anonymous'
      });

      var wmsLayer = new ol.layer.Tile({
        source: wmsSource
      });

      var view = new ol.View({
        center: [0, 0],
        zoom: 1
      });

      var map = new ol.Map({
        layers: [wmsLayer],
        target: 'map',
        view: view
      });

      map.on('singleclick', function(evt) {
        document.getElementById('info').innerHTML = '';
        var viewResolution = /** @type {number} */ (view.getResolution());
        var url = wmsSource.getGetFeatureInfoUrl(
            evt.coordinate, viewResolution, 'EPSG:3857',
            {'INFO_FORMAT': 'text/html'});
        if (url) {
          document.getElementById('info').innerHTML =
              '<iframe seamless src="' + url + '"></iframe>';
        }
      });

      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        var hit = map.forEachLayerAtPixel(pixel, function() {
          return true;
        });
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
      });
    </script>
  </body>
</html>

它不显示地图并给我这个错误:

Access to image at 'http://localhost:10000/geoserver/ADMINISTRATIE/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=ADMINISTRATIE%3Apdf&STYLES=TEREN&tiled=true&transparent=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:10000/geoserver/ADMINISTRATIE/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=ADMINISTRATIE%3Apdf&STYLES=TEREN&tiled=true&transparent=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244:1 GET http://localhost:10000/geoserver/ADMINISTRATIE/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=ADMINISTRATIE%3Apdf&STYLES=TEREN&tiled=true&transparent=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244 net::ERR_FAILED
Image (async)
nx @ ol.js:719
k.load @ ol.js:646
jg @ ol.js:124
k.fl @ ol.js:387
setTimeout (async)
k.Zo @ ol.js:392
(anonymous) @ ol.js:378
requestAnimationFrame (async)
k.render @ ol.js:389
k.Tk @ ol.js:389
b @ ol.js:15
Na.b @ ol.js:18
Va @ ol.js:20
k.set @ ol.js:20
k.I @ ol.js:21
I @ ol.js:380
(anonymous) @ test.php:33
test.php:1 Access to image at 'http://localhost:10000/geoserver/ADMINISTRATIE/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=ADMINISTRATIE%3Apdf&STYLES=TEREN&tiled=true&transparent=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=0%2C0%2C20037508.342789244%2C20037508.342789244' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多