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

Question

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

我在使用 openlayers 3 时遇到了问题，尽管我在 100 米的距离内绘制了一个包含 3000 个点的线串，但只有大约 1000 个点在渲染。

编辑：现在 - Openlayers 3 v.3.7.0

将 openlayers 3 中的一组点放大到足够远会发现在网格图案中只绘制了几个点。我想放大以查看在厘米或毫米比例尺地图中绘制的一百个点彼此略有偏移。

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 的新手，所以我确信有更好的方法来解决这个问题。

我可以使用样式函数使线条正确显示。我在下面放了一个 select 样式的示例。我还为矢量图层创建了一个标准样式函数。如果我没有将样式函数添加到 select 交互中，我的特征将从一条有 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 如何以高（小）分辨率渲染几何体中的每个点？

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

geojson

openlayers-3

stride