Openlayers 3 How to render every point in a geometry at a high ( small ) resolution?

Question

How do I force ol3 to render every single point in a geometry?

I'm having an issue with openlayers 3, where although I'm plotting a line string with 3000 points over a distance of maybe 100m, only about 1000 are rendering.

EDIT: Now - Openlayers 3 v.3.7.0

Zooming in far enough on a set of points in openlayers 3 reveals that only a few points are drawn, in a grid pattern. I would like to zoom in to see a hundred points drawn slightly offset from each other in a centimeter or millimeter scale map.

Is this possible with openlayers 3?

Answer 1

The renderer will simplify your geometries. Stride is basically if you have 2, 3 or 4 values in a coordinate, so e.g. XY, XYZ, XYZM.

You will want to look at changing the ol.SIMPLIFY_TOLERANCE but you'll need to create a custom build and change the define as far as I can see (http://openlayers.org/en/v3.5.0/doc/tutorials/custom-builds.html).

/**
 * @define {number} Tolerance for geometry simplification in device pixels.
 */
ol.SIMPLIFY_TOLERANCE = 0.5;

Try setting it to 0 or negative.

Answer 2

I'm having the same issue with a line with just four vertices. I changed the number for ol.SIMPLIFY_TOLERANCE to -1, and there was no change in the rendering of the feature. If I call geometry.getSimplifiedGeometry(0), I get back all four vertices. However when rendering, only two vertices are returned. I wonder if something else needs to be changed? Polygons seem to render fine. I'm new to OpenLayers 3, so I'm sure there's a better way to get around this.

I can get the line to display properly using a style function. I put a sample of my select style below. I also created a standard style function for the vector layer. If I didn't add the style function to the select interaction, my feature would jump from a line with 4 vertices to a line with just the start and end points.

 var selectStyleFunction = function (feature, resolution) {
            var styles = [];
            var white = [255, 255, 255, 1];
            var blue = [0, 153, 255, 1];
            var width = 3;
            var geometry = feature.getGeometry();
            var type = geometry.getType();
            if (type == 'Point') {
                styles.push(new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: width * 2,
                        fill: new ol.style.Fill({
                            color: blue
                        }),
                        stroke: new ol.style.Stroke({
                            color: white,
                            width: width / 2
                        })
                    }),
                    zIndex: Infinity
                }));
            }
            if (type == 'LineString') {
                geometry.forEachSegment(function (start, end) {
                    styles.push(new ol.style.Style({
                        geometry: new ol.geom.LineString([start, end]),
                        stroke: new ol.style.Stroke({
                            color: white,
                            width: width + 2
                        })
                    }));
                    styles.push(new ol.style.Style({
                        geometry: new ol.geom.LineString([start, end]),
                        stroke: new ol.style.Stroke({
                            color: blue,
                            width: width
                        })
                    }));
                });
            }

            if (type == 'Polygon') {
                styles.push(new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: [255, 255, 255, .5]
                    })
                }));
                styles.push(new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: white,
                        width: width + 2
                    })
                }));
                styles.push(new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: blue,
                        width: width
                    })
                }));
            }
            return styles;
        }

Another style that I used for a LineString feature that I added to my style function used for my vector layer. This one adds points to each vertex, and is based off of the polygon example on the OpenLayers Examples site:

 if (type == horizontal') {

                var coords = geometry.getCoordinates();
                geometry.forEachSegment(function (start, end) {
                    styles.push(new ol.style.Style({
                        geometry: new ol.geom.LineString([start, end]),
                        stroke: new ol.style.Stroke({
                            color: [0, 128, 0, .9],
                            width: width + 2
                        }),
                        zIndex: 9000
                    }));
                });

                styles.push(new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: width + 2,
                        fill: new ol.style.Fill({
                            color: [0, 128, 0, 2, 1]
                        }),
                        stroke: new ol.style.Stroke({
                            color: [255, 255, 255, 0.75],
                            width: width
                        })
                    }),
                    geometry: function () {
                        return new ol.geom.MultiPoint(coords);
                    },
                    zIndex: 9000

                }));
            }