Question

我正在使用OpenLayers 3，我只需要显示折线的顶点。例如，请看这张图片：

我希望能够仅显示红色方块（它们可以是除了正方形之外的其他东西，如圆圈）。使用标记不是性能问题的选项，我的线条可能很大（500 000个顶点）。

目前我有一个工作代码：

// Define the style for vertex polyline :
var yellowVertexPolylineStyle = [
    new ol.style.Style({
        image: new ol.style.Circle({
            radius: 1.5,
            fill: new ol.style.Fill({
                color: 'yellow'
            })
        }),
        geometry: function(feature) {
            return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
        }
    })
];

// Create the line :
var lineLayer = new ol.layer.Vector({

    zIndex: 1000,
    source: new ol.source.Vector({ features: [new ol.Feature({ geometry: myLine })] }),
    style: yellowVertexPolylineStyle
});

// Add the layer :
map.addLayer(lineLayer);

但是当折线非常大（> 10000点）时，这会导致性能问题。

使用ol.geom.MultiPoint几何体更糟糕。有人知道更好的方法吗？

编辑：我现在正在尝试：

// Define the style for vertex polyline :
var yellowVertexPolylineStyle = [
    new ol.style.Style({
        image: new ol.style.Circle({
            radius: 1.5,
            fill: new ol.style.Fill({
                color: 'yellow'
            })
        }),
        geometry: function(feature) {

            var geom = feature.get('stylegeom');
            if (!geom || (geom && geom.getCoordinates().length !== feature.getGeometry().getCoordinates().length) ) {

                geom = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
                feature.set('stylegeom', geom);
            }

            return geom;
        }
    })
];

我会回到这里告诉它是否有效......

Answer 1

您需要缓存样式几何体，否则将为每个渲染帧计算，例如

source.on('changefeature', function(evt) {
  feature.set('stylegeom', undefined);
});

如果要素几何体发生变化，您还需要更新样式几何体：

alias up="cd ../.."

OpenLayers 3 - 仅绘制折线顶点

1 个答案: