在OpenLayers中繪製速度引導線

Question

我試圖在OpenLayers地圖上繪製一個圖標，該圖標包含一個「速度先導」，這是一個起源於圖標並沿方向向外繪製的小線段該實體正在移動。線的長度表示實體的速度。

我遇到的問題是我想讓線條的長度與屏幕座標有關，但線條的角度和位置要相對於地圖座標。因此，放大時，我不希望線條變長，但在平移或旋轉時，它應該平移/旋轉。

我很想使用getPixelFromCoordinate/getCoordinateFromPixel來找出地圖座標對應於我的線端點，然後在用戶每次放大地圖時添加一些鉤子來重新計算線段。有沒有更好的辦法？

編輯： 我使用OpenLayers 3.但是，如果任何人有一箇舊版本的解決方案，我想聽聽它。它可能在新版本中被類似命名。

Answer 1

在這種情況下，使用返回兩個樣式數組的ol.style.StyleFunction(feature, resolution)是有意義的。第一種風格是針對「速度領先者」的第二種風格。 「速度引導者」的樣式使用一個用視圖分辨率計算的自定義幾何圖形，以始終使用相同的像素長度。

var style = function(feature, resolution) { 
    var length = feature.get('speed'); // in pixel 
    var pointFrom = feature.getGeometry().getCoordinates(); 
    var pointTo = [ 
     pointFrom[0] + length * resolution, 
     pointFrom[1] + length * resolution 
    ]; 
    var line = new ol.geom.LineString([ 
     pointTo, 
     pointFrom 
    ]); 

    return [ 
    // the style for the point 
    new ol.style.Style({ ... }), 
    // the style for the "speed leader" 
    new ol.style.Style({ 
     geometry: line, 
     stroke: new ol.style.Stroke({ ... }) 
    }), 
    ]; 
}; 

http://jsfiddle.net/annyL2sc/

在這個例子中，我沒有服用的方向考慮，但我認爲它給出了這個概念。