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?

Seabrooke

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.

Nitrometer

Thank you - I'm still working with the ol-debug library, so changing this number did reduce the distance between points. – Seabrooke

I will have to check my data to make sure this is rendering all the data, though, it still looks like a grid when zoomed in close. – Seabrooke

I may have been mistaken. Changing this value from 0.5 to 0.001 or 0 or -0.001 doesn't seem to make a difference in # of points rendered. Changing it higher, however, dramatically reduces the number of features. – Seabrooke

Somehow this began working. I'm going to mark this as the answer, but both answers were very helpful in figuring out what to do about this problem. – Seabrooke

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

                }));
            }

Mab

You should probably ask this as a separate question instead of as an answer to this question. – Dismember

I thought the style function would help him to display all vertices, as it resolved my issue. I can ask a separate question, but then it may be a duplicate as it's related to the rendering of linestrings and the simplified geometry. To display all points, instead of all segments, you can create a multipoint from the geometry.getCoordinates(). In his case, the number of points may still be reduced. Thank you. – Mab

could you please append the original select style that you were using, is it a single static style? Also, thank you for posting, this helps and I may not have seen it otherwise. – Seabrooke

The initial style attached to the vector layer is based on a different set of values, so I didn't add it as it is specific to my case. I'm adding other information to the feature when I create it that I use in that style function. You can modify the style that I used for the select control and just add it to your vector layer to see if it works to display your data. If you have a select interaction, you can add this style to that interaction and see if your geometry changes when it is selected. Are you trying to display missing line segments, or points for each vertex in your LineString? – Mab

I am trying to display every line segment. Did you find documentation or a tutorial on how an ol3 style function is supposed to return based on geometry, or just read through the code and figure it out? – Seabrooke

I looked at the polygon styles in the examples and just pulled from that. I was initially just drawing simple lines and didn't realize that if I added more vertices, they wouldn't render. – Mab

Here is the style that I used for one of the LineString features in my vector layer (this is just what was pushed to the styles array in the style function (I'll add it above, no room here) – Mab