Mais

OpenLayers3, exibir informações de atributos

OpenLayers3, exibir informações de atributos


Eu tenho o mapa OSM do OpenLayers com dois pontos de acesso de camadas WMS e ameaça fornecida pelo GeoServer. Preciso exibir informações de atributo de camadas wms com pop-up ou outra tabela de informações aparecendo. Acho essa pergunta, mas não entendo esse trabalho. Meu código:

$ (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), projeção: 'EPSG: 4326', destino: document.getElementById ('myposition'), undefinedHTML: ''}); var untiledhotpoint = new ol.layer.Image ({fonte: 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 atéedthreat = new ol.layer.Image ({fonte: 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: ameaça', ESTILOS: ",}})}); var ameaça = new ol.layer.Tile ({visible: false, source: new ol.source.TileWMS ({url: 'http://192.168.255.197:8080/geoserver/geoportal/wms', params: {'FORMAT ': formato,' VERSÃO ':' 1.1.1 ', lado a lado: verdadeiro, CAMADAS:' geoportal: ameaça ', ESTILOS: ",}})}); var map = new ol.Map ({target:' map ' , controles: ol.control.defaults (). extend ([novo ol.control.ScaleLine (), novo ol.control.ZoomSlider ()]), camadas: [osm, até ponto quente, ponto quente, ameaça, ameaça até a ameaça], ver: view, renderer: 'canvas'}); map.addControl (mousePosition); var attributeData = function (pixel) {var feature = map.forEachFeatureAtPixel (pixel, function (feature, layer) {return feature;}, null, function ( camada) {return layer === hotpoint;}); var info = document.getElementById ('info'); if (feature) {info.innerHTML = '' + feature.get ('point_id') + ''} else {info.innerHTML = '';}};});

Você está tentando usarforEachFeatureAtPixelem um mapa com apenasImagem/TileImagecamadas, masforEachFeatureAtPixelrequer que o OpenLayers conheça os recursos (ou seja, ele só funciona em camadas vetoriais).

O que você provavelmente está procurando é como usar ogetFeatureInfoOperação WMS com OpenLayers 3. Confira o exemplo oficial, contendo este código:

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

E se você não quiser usar um iframe e deixar o servidor gerar seu layout, então ol.format.WMSGetFeatureInfo é provavelmente o caminho a percorrer.


Assista o vídeo: OpenLayers Introduction for Beginners