Viac

OpenLayers3, zobrazenie informácií o atribútoch


Mám mapu OSM OpenLayers s dvoma horúcimi bodmi a hrozbami dvoch vrstiev WMS poskytovanými z GeoServeru. Potrebujem zobraziť informácie o atribútoch z vrstiev wms pomocou kontextového okna alebo inej zobrazenej informačnej tabuľky. Považujem to za otázku, ale nerozumiem tejto práci. Môj kód:

$ (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), projekcia: 'EPSG: 4326', target: document.getElementById ('myposition'), undefinedHTML: ''})); var untiledhotpoint = new ol.layer.Image ({zdroj: new ol.source. ImageWMS ({pomer: 1, adresa URL: 'http://192.168.255.197:8080/geoserver/geoportal/wms', parametre: {'FORMAT': formát, 'VERZIA': '1.1.1', VRSTVY: 'geoportál : 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 ({zdroj: new ol.s ource.ImageWMS ({ratio: 1, url: 'http://192.168.255.197:8080/geoserver/geoportal/wms', params: {'FORMAT': format, 'VERSION': '1.1.1', LAYERS: 'geoportal: hrozba', STYLES: ",}})}); var hrozba = nový 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: hrozba ', STYLES: ",}})}); var map = new ol.Map ({target:' map ' , ovládacie prvky: ol.control.defaults (). extend ([nový ol.control.ScaleLine (), nový ol.control.ZoomSlider ()]), vrstvy: [osm, tilledhotpoint, hotpoint, hrozba, untiledthreat], zobrazenie: view, renderer: 'canvas'}); map.addControl (mousePosition); var attributeData = function (pixel) {var feature = map.forEachFeatureAtPixel (pixel, function (feature, layer) {return feature;}, null, function ( vrstva) {návratová vrstva === hotpoint;}); var info = document.getElementById ('info'); if (feature) {info.innerHTML = '' + feature.get ('point_id') + ''} else {info.innerHTML = '';}};});

Pokúšate sa použiťforEachFeatureAtPixeliba na mapeObrázok/TileImagevrstvy, aleforEachFeatureAtPixelvyžaduje, aby OpenLayers vedel o funkciách (to znamená, že funguje iba vo vektorových vrstvách).

To, čo hľadáte, je pravdepodobne spôsob, ako používaťgetFeatureInfoPrevádzka WMS s OpenLayers 3. Pozrite sa na oficiálny príklad obsahujúci tento kód:

map.on ('singleclick', function (evt) {document.getElementById ('info'). innerHTML = "; var viewResolution = view.getResolution (); var url = wmsSource.getGetFeatureInfoUrl (evt.coordinate, viewResolution, 'EPSG : 3857 ', {' INFO_FORMAT ':' text/html '}); if (url) {document.getElementById (' info '). InnerHTML =''; } });

A ak nechcete používať iframe a nechať server vygenerovať vaše rozloženie, potom ol.format.WMSGetFeatureInfo je pravdepodobne cesta.


Pozri si video: Tegn et ER diagram (Septembra 2021).