如何为 lineString OpenLayers 5 设置不同的颜色 [英] How to set different colors for a lineString OpenLayers 5

问题描述

我画了一条汽车经过的道路的线.这辆车在路上有不同的速度值.我已经将速度值与经度、纬度一起存储在一个数组中.根据速度值 lineString 颜色应该改变.
例如:如果速度低于100那么颜色应该是蓝色，如果速度在100和150之间那么这部分lineString应该是绿色否则它应该是黑色.
我也读过关于分割 lineString 的内容，但我仍然不知道如何做到这一点

I have drawn a lineString of the road that a car went through. The car had different speed values during the road. I have stored the values of the speed with the longitude, latitude in an array. Based on the speed value the lineString color should change.
For example: if the speed is under 100 then the color should be blue, if the the speed is between 100 and 150 then this part of the lineString should be green else it should be black.
I have also read about splitting the lineString but i still have no idea how to do this

这是我为绘制 lineString 而编写的代码

here is the code i wrote for drawling the 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

推荐答案

您可以使用 ol.style.FlowLine 沿 GPX 轨迹将高程或速度显示为颜色.
在线查看示例:https://viglino.github.io/ol-ext/examples/style/map.style.gpxline.html

You can use ol.style.FlowLine to display elevation or speed as color along a GPX track.
See example online: https://viglino.github.io/ol-ext/examples/style/map.style.gpxline.html

这篇关于如何为 lineString OpenLayers 5 设置不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！