OpenLayers автоматически стилизует линейные функции - PullRequest
0 голосов
/ 30 ноября 2018

Есть ли способ автоматически стилизовать каждую функцию, читаемую из файла GeoJSON и по-разному используемую в качестве источника для векторного слоя?Я приложил снимок экрана: этот беспорядок в зеленых линиях более чем запутанный.Было бы хорошо, чтобы каждая строка имела другой цвет, случайно назначенный ей.Спасибо за вашу помощь!

enter image description here

Редактировать: добавлен код

Здесь вы найдете соответствующий код, который я использую для этого представления.Вы можете видеть, что я определяю 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
});

1 Ответ

0 голосов
/ 13 декабря 2018

Я понял это благодаря всей вашей помощи из ваших комментариев:

  1. Загрузите chroma.js в ваш проект (я использую npm и webpack, и после установки с помощью npm мне требуется цветность вот так:var chroma = require("chroma-js");)
  2. Определить функцию рандомизации:

    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
        });
    }
    
  3. вызывать функцию один раз и каждый раз, когда слой изменяет: randomize();

  4. «Определить» слой, на этот раз без стиль:

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

enter image description here

...