1

我在 GeoServer 中添加了多个图层并实现了 HTML、JavaScript 代码来创建图例并调用图层。

地图和图层会显示，但是当我单击图层的某个功能时，该图层的属性不会显示。我的 GetFeatureInfoUrl 函数有什么问题？

HTML：

    <!DOCTYPE html>
    <html>
    <head>
    <title>Map</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css">
    <link rel="stylesheet" href="ol3-layerswitcher.css">
    <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
    <script src="ol3-layerswitcher.js"></script>
    </head>
    <body>
    <div id="map"</div>
    </body>
    </html>

JavaScript：

    var layers = [
    new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'osm'})
    }),

    new ol.layer.Group({
    title: 'Layers',
    layers: [

    //Implementing layers
    new ol.layer.Tile({
    title: 'UK RAMSAR 20150903',
    source: new ol.source.TileWMS({
    url: 'http://localhost:8080/geoserver/wms',             
    params: {'LAYERS': 'Marine:UK_RAMSAR_20150903', 'TILED': true},
    serverType: 'geoserver'
    })
    }),

    new ol.layer.Tile({
    title: 'UK SPAs with Marine Components',
    source: new ol.source.TileWMS({
    url: 'http://localhost:8080/geoserver/wms',             
    params: {'LAYERS': 'Marine:UK_SPAswithMarineComponents', 'TILED': true},
    serverType: 'geoserver'
    })
    })
    ]
    })


    ];
    var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
    center: [51480.6, 7216744.2],
    zoom: 5
    })
    });

    //Function to get features
    map.on('singleclick', function(evt) {
    document.getElementById('info').innerHTML = '';
    var viewResolution = /** @type {number} */ (view.getResolution());
    var url = layers.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(layer) {
    return true;
    });
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });

    //Layer switcher to turn layers on and off
    var layerSwitcher = new ol.control.LayerSwitcher({
    tipLabel: 'Legend'
    });
    map.addControl(layerSwitcher);
4

0 回答 0