OpenLayers3, display attribute information

[المشرف العام]

Good day! Sorry for my bad Engllish. On the hole, I have OpenLayers OSM map with two WMS layers hotpoint and threat provided from GeoServer. I need to display attribute information from wms layers with popup or other appearing info table. I find this [ask][1], bud don't understand this work. My code: `$(document).ready(function() {

view = new ol.View({ center: [4701182.98765148, 7492051.764399836], zoom: 5, maxZoom: 18, minZoom: 2});var format = 'image/png';var osm = new ol.layer.Tile({ source: new ol.source.OSM(), visible: true, name: 'osm'});var mousePosition = new ol.control.MousePosition({ coordinateFormat: ol.coordinate.createStringXY(2), projection: 'EPSG:4326', target: document.getElementById('myposition'), undefinedHTML: ' '});var untiledhotpoint = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://192.168.255.197:8080/geoserver/geoportal/wms', params: {'FORMAT': format, 'VERSION': '1.1.1', LAYERS: 'geoportal:hotpoint', STYLES: '', } })});var hotpoint = new ol.layer.Tile({ visible: false, source: new ol.source.TileWMS({ url: 'http://192.168.255.197:8080/geoserver/geoportal/wms', params: {'FORMAT': format, 'VERSION': '1.1.1', tiled: true, LAYERS: 'geoportal:hotpoint', STYLES: '', } })});

var untiledthreat = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://192.168.255.197:8080/geoserver/geoportal/wms', params: {'FORMAT': format, 'VERSION': '1.1.1', LAYERS: 'geoportal:threat', STYLES: '', } })}); var threat = new ol.layer.Tile({ visible: false, source: new ol.source.TileWMS({ url: 'http://192.168.255.197:8080/geoserver/geoportal/wms', params: {'FORMAT': format, 'VERSION': '1.1.1', tiled: true, LAYERS: 'geoportal:threat', STYLES: '', } }) });var map = new ol.Map({ target: 'map', controls: ol.control.defaults().extend([ new ol.control.ScaleLine(), new ol.control.ZoomSlider() ]), layers: [osm, untiledhotpoint, hotpoint, threat, untiledthreat], view: view, renderer: 'canvas'}); map.addControl(mousePosition); var attributeData = function(pixel) { var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer){ return feature; }, null, function(layer) { return layer === hotpoint; }); var info = document.getElementById('info'); if (feature){ info.innerHTML = '' + feature.get('point_id')+'
' } else { info.innerHTML = ' '; }}; });` [1]: open layers 3 forEachFeatureAtPixel specify layer



أكثر...