如何为 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