如何為 lineString OpenLayers 5 設置不同的 colors

Question

我畫了一條汽車經過的道路的線串。 汽車在路上有不同的速度值。 我已經將速度值與經度、緯度存儲在一個數組中。 根據速度值，lineString 顏色應該改變。
例如：如果速度低於 100，則顏色應為藍色，如果速度在 100 到 150 之間，則 lineString 的這部分應為綠色，否則應為黑色。
我也讀過關於拆分 lineString 但我仍然不知道如何做到這一點

這是我為繪制 lineString 編寫的代碼

/* open street map newest version */
var map = new ol.Map({
    target: 'map', // the div id
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        })
    ],
    view: new ol.View({ 
        center: ol.proj.fromLonLat([13.381777, 52.520008]),
        zoom: 9
    })
});

//transform the projection
for (var i = 0; i < array.length; i++) {
    array[i] = ol.proj.fromLonLat(array[i]);
}

// get the last index for the end point
var routeLength = array.length;

// create a feature for the line
var featureLine = new ol.Feature({
    geometry: new ol.geom.LineString(array) //accepts only array of points
});

var vectorLine = new ol.source.Vector({});
var startVector = new ol.source.Vector({});


// Start layer
var startLayer = new ol.layer.Vector({
    source: startVector, 
    style: new ol.style.Style({
        image: new ol.style.Icon({
            src: '/img/start.svg',
            scale: 0.3,
            anchor: [20, 150],
            anchorXUnits: "pixels",
            anchorYUnits: "pixels"
        })
    })
});

// end layer
var endLayer = new ol.layer.Vector({
    source: vectorLine, 
    style: new ol.style.Style({
        image: new ol.style.Icon({
            src: '/img/end.svg',
            scale: 0.3, 
            anchor: [20, 150],
            anchorXUnits: "pixels",
            anchorYUnits: "pixels"
        })
    })
});

// create features for the start and the end points
var startFeature = new ol.Feature({
    geometry: new ol.geom.Point(array[0])
});
var endFeature = new ol.Feature({
    geometry: new ol.geom.Point(array[routeLength - 1])
});

// add all features to the vector source
startVector.addFeature(startFeature);
vectorLine.addFeature(endFeature);
vectorLine.addFeature(featureLine);

var speed;
for (var i = 0; i < array.length; i++) {
    speed = array[i][2];
    
    if((speed > 0) && (speed < 800)) {
        // change the color of the lineString
    }
    else if((speed > 800) && (speed < 2000)) {
        // change the color of the lineString
    }
    else if(speed > 2000) {
        // change the color of the lineString
    }
}

// add style to the lineString
var vectorLineLayer = new ol.layer.Vector({
    source: vectorLine,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({ color: '#FF0000', width: 4 })
    })
});

// add all layers to the map
map.addLayer(vectorLineLayer);
map.addLayer(startLayer);
map.addLayer(endLayer);

// zoom out to fit the layerline
map.getView().fit(vectorLine.getExtent());
//popup code

Answer 1

您可以使用ol.style.FlowLine將高度或速度顯示為沿 GPX 軌跡的顏色。
在線查看示例： https://viglino.github.io/ol-ext/examples/style/map.style.gpxline.html