1

Im constructing a Vector-tile map using data from the following site GeoNorge -N5000. Im constructing it using OpenLayers 3 and MapServer with the data being passed from a PostGis database.

I've managed to display lines and polygons more or less perfectly, and also style them using a JSON-file. But for some reason I am unable to display any points on the map. The points are parsed in the map-file, but my code doesn't seem to aquire them.

The following is an excerpt of the map-file. The polygon layer is parsed and displayed, while the point is not.

LAYER
    DEBUG 5
    TYPE point
    METADATA
        "WMS_TITLE" "N5000 Stasjon"
        "GML_INCLUDE_ITEMS" ""
        "WMS_INCLUDE_ITEMS" ""
    END
    CONNECTION "user=postgres password=postgres dbname=n5000 host=localhost port=5432"
    CONNECTIONTYPE postgis
    DATA "posisjon FROM (SELECT * FROM n5000kartdata_3abc657467024482a6b5ba9ddff592b7.stasjon) AS MYTABLE USING UNIQUE objid USING SRID=25833"
    NAME "Stasjon"
    PROCESSING "CLOSE_CONNECTION=DEFER"
    PROJECTION "init=epsg:25833" END
    CLASS
        STYLE
            ANGLE auto
            COLOR 244 17 17
            LINECAP round
            LINEJOIN round
            OUTLINECOLOR 204 8 8
            SIZE 12
            SYMBOL "ellipse"
        END
    END
END 
LAYER
    TYPE POLYGON
    METADATA
        "WMS_TITLE" "N5000 - Skog"
        "GML_INCLUDE_ITEMS" ""
        "WMS_INCLUDE_ITEMS" ""
    END
    CONNECTION "user=postgres password=postgres dbname=n5000 host=localhost port=5432"
    CONNECTIONTYPE postgis
    DATA "omrade FROM (SELECT * FROM n5000kartdata_3abc657467024482a6b5ba9ddff592b7.skog) AS MYTABLE USING UNIQUE objid USING SRID=25833"

    NAME "Skog"
    PROCESSING "CLOSE_CONNECTION=DEFER"
    PROJECTION "init=epsg:25833" END
    CLASS
        STYLE
            ANGLE auto
            LINECAP round
            LINEJOIN round
        END
    END
END

The following code shows the map-file being loaded:

<div className="content">
      <h1>
        Welcome to <code>react-openlayers</code> Demo
      </h1>
      <button onClick={() => this.setState({ unmounted: true })}>
        Unmount map
      </button>
      <CenterRenderer />
            { <VectorTileLayer
              id="vectorTileLayer"
              key="vectorTileKey"
              name="vector tile layer"
              url={
                'http://localhost/mapserver?map=c:/a3/data/mapengine/mapfiles/n5000Test.map&mode=tile&tilemode=gmap&tile={x}+{y}+{z}&layers=All&map.imagetype=mvt'
              }
            />}

This code shows how the points/lines/polygons are defined:

var fill = new Fill({ color: '' });
var stroke= new Stroke({ color: '', width: 1 });
var radius = 5;
var textSize = 12;
var text = new Text({font: textSize + 'px serif', fill: fill, stroke: 
stroke});

var styleFunc = {
  Polygon: new Style({ fill: fill }),
  StrokedPolygon: new Style({ fill: fill, stroke: stroke }),
  Point: new Style ({
    image: new Circle({fill: fill, stroke: stroke, radius: radius})
  }),
  Line: new Style({ stroke: stroke }),
  Text: new Style({
    text: text
  })
};

var temp = JsonData;
var styles = [];

return function(feature) {
  var length = 0;
  var layer = feature.get('layer');

  var layerStyle = temp.layers[layer.toLowerCase()];
  fill.setColor(layerStyle.fillColor|| undefined);
  stroke.setColor(layerStyle.strokeColor || undefined);
  stroke.setWidth(layerStyle.strokeWidth || undefined);
  text.setText(feature.getProperties().fulltekst || undefined);

  radius = layerStyle.radius || undefined;
  styles[length++] = styleFunc[layerStyle.type];

The class VectorTile adds the data to a layer:

class VectorTile extends React.Component {
get id() {
  return this.props.id;
}
// const med attr
componentDidMount() {
  this.addLayer(this.props);
}

addLayer(props) {
  const { map, style, tileUrlFunction, url, opacity } = props;

  if (!map) return;

  if (map._layers && map._layers[this.id]) {
    map._layers[this.id].setVisible(true);
    return;
  }

  map._layers = map._layers || {};
  map._layers[this.id] = new VectorTileLayer({
    declutter: true,
    minResolution: 0,
    maxResolution: 20000,
    source: new VectorTileSource({
      attributions: 'testtT!',
      format: new MVT(),
      projection: "EPSG:3857",
      url: url,
      tileUrlFunction: tileUrlFunction
    }),
    renderMode: "image",

    opacity: opacity,
    style:
      style || MapStyle(Style, Fill, Stroke, Icon, Text),
    zIndex: -10
  });
  this.mountLayer();
}

Later on I have methods for unmount and mountlayer, and also for rendering. Does anyone have a clue why points wont show in the map? I'm able to render them in QGIS without any problems. Sorry for the walls of code/text, but I've been stuck on this problem for about a week now.

In short

I am able to display lines and polygons. Why am I unable to display points?

  • Comment style: line to be sure that the issue is not in your OpenLayers styling (default style displays points correctly) – ThomasG77 Aug 8 '18 at 12:48
  • Thanks for the reply Thomas. I forgot to mention that I have a text-type that is listed as a point-type in the map-file. This text-type is displayed on the map without any problems. I tried to comment the style block but sadly nothing changed. – Hansi Aug 8 '18 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.