openlayr 5 MultiLineString 渲染多颜色

预览图

public GetTraffficSpeed(): Observable<any> {
        let serviceUrl = GEOSERVICE;
        serviceUrl +=
            '/geoserver/tomtom/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tomtom:map_traffic_speed&maxFeatures=9999999&outputFormat=application%2Fjson';
        return this.http.get(serviceUrl);
}
public MakeLevelOfService(options: any) {
    let vectorSource = null;
    let vectorFeatures = null;
    vectorSource = new VectorSource({
        format: new GeoJSON(),
        strategy: bboxStrategy
    });
    vectorFeatures = vectorSource.getFormat().readFeatures(options);
    vectorFeatures.forEach((value: any, index: number) => {
        let RoadStatusColor = null;
        const propptotype = value.getProperties();
        if (propptotype.los === 'A') {
            RoadStatusColor = '#10f4c3';
        } else if (propptotype.los === 'B') {
            RoadStatusColor = '#db9921';
        } else if (propptotype.los === 'C') {
            RoadStatusColor = '#fbd594';
        } else if (propptotype.los === 'D') {
            RoadStatusColor = '#ffffd0';
        } else if (propptotype.los === 'E') {
            RoadStatusColor = '#eb8988';
        } else if (propptotype.los === 'F') {
            RoadStatusColor = '#e90516';
        }
        value.setStyle(
            new Style({
                stroke: new Stroke({
                    color: RoadStatusColor,
                    width: 6
                })
            })
        );
    });
    vectorSource.addFeatures(vectorFeatures);
    return vectorSource;
}

优点：

官方的WFS例子只能对单一图层里面的线段渲染同一种颜色，这种方法可以在同一个图层中渲染出各自线段不同的颜色

转载自：https://blog.csdn.net/weixin_43947681/article/details/88885787