Руководство пользователя

Руководство пользователя

Создание собственного базового слоя с данными

Описывает, как применить стиль к собственному базовому слою для отрисовки фона вашей карты в конструкторе Epsilon Metrics.

В этом руководстве описывается, как создать базовую карту в конструкторе с пользовательскими слоями и EpsilonCSS.

Отключение базовой карты

Вы можете отключить базовую карту в конструкторе, изменив фон вашего Map View на белый. Это по сути убирает фон карты, позволяя вам применить пользовательские стили к своим собственным данным.

  1. В этом руководстве импортируйте файл шаблона из архива с помощью перетаскивания в область конструктора.

    Карта содержит два слоя от Natural Earth. Слой Ocean содержит полигоны океана, полученные из 10м океанических береговых линий. Эти данные включают уровни обрезки воды как часть своих данных. Слой Countries содержит культурные векторные полигоны, полученные из 247 стран мира, и имеет обрезанные границы внутренних озер.

  2. Из списка СЛОЕВ нажмите на имя базовой карты, чтобы просмотреть опции базовой карты.

  3. Измените источник базовой карты на ЦВЕТ.

  4. Примените белый #ffffff в качестве HEX-кода для цвета фона.

    basemap_color

Пользовательские свойства заливки

Следующие шаги описывают, как применить пользовательский EpsilonCSS для стилизации обоих слоев карты.

  1. Примените цвет заливки к слою карты Океан:

    1. Из списка СЛОЕВ выберите слой карты Ocean.
    2. Нажмите вкладку STYLE.
    3. Переместите ползунок со ЗНАЧЕНИЙ на EpsilonCSS.
    4. Примените следующий EpsilonCSS для стилизации этого слоя.
     #ne_10m_ocean {
         polygon-fill: #DEE1E2;
     }
    

    Определенный HEX-код применяется в качестве цвета заливки для слоя Ocean.

    style_ocean_layer

  2. Примените стиль для свойств заливки, линии и прозрачности слоя Countries:

    1. Из списка СЛОЕВ выберите слой карты Countries.
    2. Нажмите вкладку STYLE.
    3. Переместите ползунок со ЗНАЧЕНИЙ на EpsilonCSS.
    4. Примените следующий 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.

    fill_countries

Пользовательский эффект тени

Чтобы подчеркнуть визуальную иерархию между полигонами 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;
   }
 }

Обратите внимание, как это способствует большему определению между двумя слоями, и карта превращается в пользовательскую базовую карту.

shadow_countries