Руководство пользователя
Создание собственного базового слоя с данными
Описывает, как применить стиль к собственному базовому слою для отрисовки фона вашей карты в конструкторе Epsilon Metrics.
В этом руководстве описывается, как создать базовую карту в конструкторе с пользовательскими слоями и EpsilonCSS.
Отключение базовой карты
Вы можете отключить базовую карту в конструкторе, изменив фон вашего Map View на белый. Это по сути убирает фон карты, позволяя вам применить пользовательские стили к своим собственным данным.
-
В этом руководстве импортируйте файл шаблона из архива с помощью перетаскивания в область конструктора.
Карта содержит два слоя от Natural Earth. Слой
Ocean
содержит полигоны океана, полученные из 10м океанических береговых линий. Эти данные включают уровни обрезки воды как часть своих данных. СлойCountries
содержит культурные векторные полигоны, полученные из 247 стран мира, и имеет обрезанные границы внутренних озер. -
Из списка СЛОЕВ нажмите на имя базовой карты, чтобы просмотреть опции базовой карты.
-
Измените источник базовой карты на ЦВЕТ.
-
Примените белый
#ffffff
в качестве HEX-кода для цвета фона.
Пользовательские свойства заливки
Следующие шаги описывают, как применить пользовательский EpsilonCSS для стилизации обоих слоев карты.
-
Примените цвет заливки к слою карты Океан:
- Из списка СЛОЕВ выберите слой карты Ocean.
- Нажмите вкладку STYLE.
- Переместите ползунок со ЗНАЧЕНИЙ на EpsilonCSS.
- Примените следующий EpsilonCSS для стилизации этого слоя.
#ne_10m_ocean { polygon-fill: #DEE1E2; }
Определенный HEX-код применяется в качестве цвета заливки для слоя Ocean.
-
Примените стиль для свойств заливки, линии и прозрачности слоя Countries:
- Из списка СЛОЕВ выберите слой карты Countries.
- Нажмите вкладку STYLE.
- Переместите ползунок со ЗНАЧЕНИЙ на EpsilonCSS.
- Примените следующий EpsilonCSS для создания фона заливки для этого слоя.
#ne_10m_admin_0_countries_lakes { polygon-fill: #FDF8E6; polygon-opacity: 1; line-color: #979797; line-width: 0.25; line-opacity: 0.5; }
Два определенных HEX-кода применяются к свойствам заливки и линии соответственно. Кроме того, свойства полигона и линии слоя Countries были скорректированы, чтобы отразить дополнительные настройки линии и прозрачности, определенные в пользовательском EpsilonCSS.
Пользовательский эффект тени
Чтобы подчеркнуть визуальную иерархию между полигонами Countries и Ocean, используйте image-filters
для применения эффекта тени к слою Countries.
- Из представления EpsilonCSS слоя Countries добавьте следующий синтаксис
country_shadow
выше свойств заливки и поместите свойства из вышеуказанного во второе приложениеcountry_fill
:
#ne_10m_admin_0_countries_lakes {
::country_shadow {
polygon-fill: #b2bbd5;
image-filters: agg-stack-blur(10,10);
}
::country_fill {
line-color: #979797;
line-width: 0.25;
line-opacity: 0.5;
polygon-opacity: 1;
polygon-fill: #FDF8E6;
}
}
Обратите внимание, как это способствует большему определению между двумя слоями, и карта превращается в пользовательскую базовую карту.