Question

如何强制ol3渲染几何体中的每个点？

我遇到了openlayers 3的问题，虽然我在100米的距离内绘制了一个3000点的线串，但只有大约1000个渲染。

编辑：现在 - Openlayers 3 v.3.7.0

在开放层3中的一组点上进行足够远的放大显示，在网格图案中仅绘制了几个点。我想放大查看在厘米或毫米刻度图中略微偏移的100个点。

这是否可以使用openlayers 3？

Answer 1

渲染器将简化您的几何体。如果坐标中有2个，3个或4个值，则Stride基本上是这样的，例如， 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或负数。

Answer 2

对于只有四个顶点的线，我遇到了同样的问题。我将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

                }));
            }

Openlayers 3如何以高（小）分辨率渲染几何体中的每个点？

2 个答案: