TransWikia.com

OpenLayers Vector Tile Info

Geographic Information Systems Asked by Amy O Keefe on February 5, 2021

I’ve created a map and I am using Openlayers Vector Tile Info example https://openlayers.org/en/latest/examples/vector-tile-info.html
to retrieve the point information from GeoServer.

My code is as follows:

// WFS Layer
layer_wfs = new ol.layer.Vector(
{
source: new ol.source.Vector(
{
format: new ol.format.GeoJSON(),
url: 'http://[URL as required]
}
),
title: 'WFS Layer',
visible: false,
style: new ol.style.Style(
    {
        image: new ol.style.Circle(
        {
            radius: 6,
            stroke: new ol.style.Stroke(
            {
                color: [255, 219, 77],
                width: 2
            }
            ),
            fill: new ol.style.Fill(
            {
                color: [255, 255, 0, 0.6]
            }
            )
        }
    )
    }
    )
}
);

// Create a view
myview = new ol.View(
{
center: ol.proj.fromLonLat([-6.67, 54.15], "EPSG:3857"),
zoom: 7,
projection: 'EPSG:3857'
}
); 

// Create a map
map = new ol.Map(
{
target: 'map',
interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false }),
layers:[layer_wfs],
view: myview,
controls:[
new ol.control.Zoom(),
new ol.control.ZoomSlider(),
new ol.control.ScaleLine(),
new ol.control.LayerSwitcher()
]
}
);

map.on('pointermove', showInfo);

var info = document.getElementById('info');
function showInfo(event) {
  var features = map.getFeaturesAtPixel(event.pixel);
  if (features.length == 0) {
    info.innerText = '';
    info.style.opacity = 0;
    return;
  }
  var properties = features[0].getProperties();
  info.innerText = JSON.stringify(properties, null, 2);
  info.style.opacity = 1;
}

This brings up the information perfectly, however it seems to be bringing up additional information which I’m not sure how to get rid off (or why it’s there as it isn’t stored in the attribute table). I only want the Address, Postcode, X and Y coordinate information to appear – how do I get rid of the rest?

strong text

One Answer

This should work on any browser

  var properties = features[0].getProperties();
  var subset = {
    Address: properties.Address,
    Postcode: properties.Postcode,
    X_Coordina: properties.X_Coordina,
    Y_Coordina: properties.Y_Coordina
  };
  info.innerText = JSON.stringify(subset, null, 2);

Answered by Mike on February 5, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP