6

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?

4

2 回答 2

3

渲染器将​​简化您的几何图形。步幅基本上是如果您在一个坐标中有 2、3 或 4 个值，例如 XY、XYZ、XYZM。

您将希望查看更改 ol.SIMPLIFY_TOLERANCE 但您需要创建自定义构建并在我所见的范围内更改定义（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;

尝试将其设置为 0 或负数。

于 2015-06-07T09:29:41.900 回答
3

我对只有四个顶点的线有同样的问题。我将 ol.SIMPLIFY_TOLERANCE 的数字更改为 -1，并且该功能的渲染没有任何变化。如果我调用geometry.getSimplifiedGeometry(0)，我会取回所有四个顶点。但是在渲染时，只返回两个顶点。我想知道是否需要更改其他内容？多边形似乎渲染得很好。我是 OpenLayers 3 的新手，所以我确信有更好的方法来解决这个问题。

我可以使用样式功能使线条正确显示。我在下面放了一个我选择的风格的样本。我还为矢量图层创建了一个标准样式函数。如果我没有将样式函数添加到选择交互中，我的特征将从具有 4 个顶点的线跳到只有起点和终点的线。

 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;
        }

我用于 LineString 功能的另一种样式，我添加到用于矢量图层的样式函数中。这个向每个顶点添加点，并且基于 OpenLayers 示例站点上的多边形示例：

 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

                }));
            }
于 2015-06-26T15:17:55.803 回答