OpenLayers 3 - только вершины полилинии

Question

Я использую OpenLayers 3, и мне нужно показать только вершины полилинии. Для Exemple видеть это изображение:

Я хочу, чтобы иметь возможность показать только красные квадраты (они могут быть что-то другое, чем квадраты, как круги). Использование маркеров не является вариантом для проблемы с производительностью, мои строки могут быть огромными (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); 

Но это вызывает проблемы с производительностью, когда ломаная довольно большой (> 10 000 баллов).

Использование геометрии ol.geom.MultiPoint еще хуже. Кто-нибудь знает лучший способ?

EDIT: Я пытался это сейчас:

// 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

Вы должны кэшировать геометрию стиля, в противном случае он будет рассчитанный для каждого визуализированного кадра, например

geometry: function(feature) { 
    var geom = feature.get('stylegeom'); 
    if (!geom) { 
    geom = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()); 
    feature.set('stylegeom', geom); 
    } 
    return geom; 
} 

Если ваши изменения геометрии особенности, вам необходимо обновить геометрию стиля тоже:

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