Openlayers 3 How to visualize each point in the geometry at high (low) resolution?

Question

How to get ol3 to display every point in geometry?

I have a problem with openlayers 3, although although I am building a line of a line with 3000 points at a distance of maybe 100 m, only about 1000 are rendering.

EDIT: Now - Openlayers 3 v.3.7.0

Scaling far enough on the set of points in openlayers 3 shows that only a few points are shown in the grid template. I would like to zoom in to see a hundred dots drawn slightly offset from each other on the scale of a centimeter or millimeter.

Is this possible with openlayers 3?

Answer 1

A renderer will simplify your geometries. Stride is basically if you have 2, 3, or 4 values ​​in a coordinate, such as XY, XYZ, XYZM.

You want to look at the ol.SIMPLIFY_TOLERANCE change, but you will need to create a custom assembly and change the definition 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 have the same problem with a four vertex line. I changed the number for ol.SIMPLIFY_TOLERANCE to -1, and there were no changes to the function rendering. If I call geometry.getSimplifiedGeometry (0), I will return all four vertices. However, when rendering, only two vertices are returned. I wonder if something else needs to be changed? Polygons seem beautiful. I am new to OpenLayers 3, so I'm sure there is a better way around this.

I can display the string correctly using the style function. I set a sample of my chosen style below. I also created a standard style function for the vector layer. If I did not add a style function to the selected interaction, my function would go from a line with 4 vertices to a line with only 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 the LineString function, which I added to my style function, used for my vector layer. This adds points to each vertex and is based on the example of a polygon on the OpenLayers example 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 })); }