Openlayers 3 Как визуализировать каждую точку геометрии с высоким (небольшим) разрешением?

Question

Как заставить ol3 визуализировать каждую точку геометрии?

У меня проблема с openlayers 3, где, хотя я строю линейную строку с 3000 точками на расстоянии, может быть, 100 м, рендеринг только около 1000.

РЕДАКТИРОВАТЬ: Теперь - Openlayers 3 v.3.7.0

Увеличение достаточно большого количества точек в открытых слоях 3 показывает, что только несколько точек нарисованы в виде сетки. Я хотел бы увеличить масштаб, чтобы увидеть сотню точек, слегка смещенных друг от друга на карте в сантиметрах или миллиметрах.

Это возможно с openlayers 3?

Answer 1

Рендерер упростит вашу геометрию. Stride в основном, если у вас есть 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 или отрицательный.

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

                }));
            }