Всем привет! Получение случайных цветов в Google Earth Engine может быть сложной задачей, особенно если вы сравниваете похожие функции с такими событиями, как onClick. Если цвета в конечном итоге похожи, то черты легко неразличимы. Работая над отдельным проектом я понял эту проблему. Есть много способов сделать это, в этой статье я опишу два.

Давайте воспользуемся шаблоном для тестирования наших методов. Назовите его random_color_gen.

// Add the title on which we will test the colors
var mapTitle = ui.Label({
  value: 'Lorem ipsum dolor sit amet',
  style: {color: 'blue', fontWeight: 'bold', fontSize: '20px'}
});
// Add a description
var mapDesc = ui.Label({
  value: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. \
          Consequatur dolorem enim animi similique asperiores \ 
          velit ex necessitatibus optio.',
  style: {fontSize: '16px'}
});
//Create a button to invoke the test result
var runButton = ui.Button({
  label: 'Generate colour',
  style: {stretch: 'horizontal'}
});
// Create a panel 
var panel = ui.Panel({
  layout: ui.Panel.Layout.flow('vertical'),
  style: {width: '25%', padding: '10px'}
});
panel.add(mapTitle);
panel.add(mapDesc);
panel.add(runButton);
ui.root.insert(0, panel);

Это создаст левую панель, подобную этой.

Хорошо, начнем.

Сначала добавим событие onClick к нашему runButton.

var runButton = ui.Button({
  label: 'Generate colour',
  onClick: function(){
     // Here we will create the colors
    },
  style: {stretch: 'horizontal'}
});

Способ 1: Использование функции Math()

Цвета в Google Earth Engine должны быть #rrggbb или строковыми format. Идея состоит в том, чтобы использовать функцию Math() для генерации случайных строк, пока мы не создадим формат, аналогичный #rrggbb, где r=красный, g=зеленый и b=синий. Мы попробуем это,

Math.floor(Math.random()*16777215).toString(16)

В этой строке

  • Math.random()*16777215 возвращает случайное число от 0 до 16777215.
  • Math.floor() возвращает наибольшее целое число, меньшее или равное заданному числу, означает, что оно создает округленное целое число из любого десятичного значения.
  • toString(16) наконец возвращает строку шестнадцатеричного значения

Добавив эту строку к нашему runButton, мы можем изменить цвет заголовка панели.

var runButton = ui.Button({
  label: 'Generate colour',
  onClick: function(){
    // Here we will create the colors
    var aColor = Math.floor(Math.random()*16777215).toString(16)
    //print(aColor) 
    mapTitle.style().set('color', aColor);    
    },
  style: {stretch: 'horizontal'}
});

Сохраните скрипт и запустите код. Используйте print(), чтобы увидеть, какие строки возвращает aColor. Но как я узнал, что 16777215 создаст этот цвет? Что ж,

  • найти цвет и связанное с ним шестнадцатеричное значение отсюда. Я выбрал белый (#ffffff)
  • затем преобразуйте шестнадцатеричное значение в десятичное. Есть много онлайн-конвертеров таких как этот

aColor создает и содержит строку, аналогичную #rrggbb, и используется для присвоения свойства style() mapTitle.

Простой.

Способ 2: Использование сторонней библиотеки

Как вы уже заметили, название нашего приложения иногда окрашивается в белый цвет, что делает его невозможным для чтения из-за белого фона. Почему бы не использовать стороннюю библиотеку под названием randomColor (github, я не связан). Эта библиотека потрясающая; он крошечный, создает случайные оттенки одного и того же цвета, использует яркость и даже может создавать цветовые форматы HSL, HSV, RGB и RGBA. Представьте, что вы хотите создать карту земельного покрова, но боитесь в конечном итоге создать что-то мрачное или диковинное, например, зеленые водоемы или голубые леса. Эта библиотека, используя свойство hue, поможет нам сохранить нашу цветовую схему и создать разные оттенки одного и того же оттенка. Конечно, мы можем генерировать случайные цвета, как и раньше, не занимаясь математикой.

Давайте начнем. Создайте пустой файл с именем randomColour в Google Earth Engine. Скопируйте все коды из randomColor/randomColor.js, вставьте в randomColor и сохраните.

Нам нужно импортировать эту библиотеку в наш скрипт. Добавьте эту строку вверху random_color_gen, сохраните и запустите.

var randomColor = require(‘users/username/your_project:randomColor’)

Сначала вы можете увидеть ошибку в консоли, говорящую о том, что «module» не определено. Это связано с тем, что переменная с именем module внутри нашего только что созданного randomColor перепутана. Мы будем искать эту «module штуку» внутри randomColor.

Хм. Закомментируйте строки 11, 12 и 13 и попробуйте снова запустить random_color_gen. Ошибка должна исчезнуть.

Ура!

Переменная randomColor в строке 1 random_color_gen дает объект, который мы превратим в функцию и установим свойство hue. Добавьте эти новые строки в runButton, сохраните и запустите снова.

var runButton = ui.Button({
  label: 'Generate colour',
  onClick: function(){
    // Here we will create the colors
    var aColor = randomColor.randomColor({hue:'blue'});
    mapTitle.style().set('color', aColor);
    },
  style: {stretch: 'horizontal'}
});

Каждое новое событие кнопки генерирует новый оттенок синего для заголовка. Попробуйте другие цвета, такие как красный, оранжевый, розовый, бирюзовый или любой другой, который вам нравится. Вы также можете использовать шестнадцатеричные значения, такие как #RRGGBB. Вы даже можете изменить акцент hue, установив для свойства luminosity значение light, dark или random.

Могут быть похожие другие библиотеки, например PleaseJS, palette.js, gradstop и т. д., которые вы можете попробовать.

Развлекайся.