OpenLayers 自动设计线条特征

Question

有什么方法可以自动设置从 GeoJSON 文件中读取并用作矢量层源的每个要素的样式不同吗？我附上了一张截图：这一团乱七八糟的绿线功能让人非常困惑。每行随机分配不同的颜色会很好。感谢您的帮助！

编辑：添加代码

在这里您可以找到我用于此表示的相关代码。你可以看到我将 green 定义为 LineStrings 的颜色，但我想知道如何自动为 LineStrings 分配不同的颜色。

// load GeoJSON with > 2000 Line Features
var fullGeoJSON = require("./data/datafile.json");
// Style function to be called in Layer definition, uses Styles defined in var styles
var styleFunction = function (feature) {
    return styles[feature.getGeometry().getType()];
};
// Define Style (one for all)
var styles = {
    "Point": new Style({
        image: image
    }),
    "LineString": new Style({
        stroke: new Stroke({
            color: "green",
            width: 3
        })
    }),
};
// Define Source
var geoSource = new VectorSource({
    features: new GeoJSON().readFeatures(fullGeoJSON, {
        featureProjection: "EPSG:3857"
    })
});
// Define Layer
var baseLayer = new VectorLayer({
    source: geoSource,
    style: styleFunction
});
// Define Map
const mainMap = new Map({
    target: "map-container",
    layers: [baseLayer],
    view: initialView
});

Answer 1

感谢您评论中的所有帮助，我弄明白了：

将 chroma.js 加载到您的项目中（我使用 npm 和 webpack，在使用 npm 安装后我需要这样的色度：var chroma = require("chroma-js");）

定义一个随机化函数：

function randomize() {
    geoSource.forEachFeature(function (feature) {
        var scale = chroma.scale(["#731422", "#1CBD20", "#1CA1FF"]).mode("lch").colors(300); // Define color scale
        var randomColor = scale[Math.floor(Math.random() * scale.length)]; // select a random color from color scale
        var randomStyle = new Style({
            stroke: new Stroke({
                color: randomColor,
                width: 5
            })
        }); // define a style variable
        feature.setStyle(randomStyle); // set feature Style
    });
}

每当图层发生变化时调用函数一次：randomize();

"Define"层，这次没有一个样式：

var baseLayer = new VectorLayer({
    source: geoSource
});

OpenLayers 自动设计线条特征

OpenLayers automatically style line features

openlayers

openlayers-5

编辑：添加代码