CSS-стилизация OpenLayers для стандартных кнопок управления

Question

Я использую OpenLayers для скрипта на своей странице и пытаюсь использовать CSS для стилизации стандартных кнопок, которые появляются на карте. Я следовал за сайтом документации OpenLayers, разрабатывая их так:

.olControlNavToolbar div {
  display:block;
  width:  28px;
  height: 28px;
  top: 300px;
  left: 6px;
  position: relative;
}
.olControlNavToolbar .olControlNavigationItemActive {
  background-image: url("img/panning-hand-on.png");
  background-repeat: no-repeat;
}
.olControlNavToolbar .olControlNavigationItemInactive {
  background-image: url("img/panning-hand-off.png");
  background-repeat: no-repeat;
}

Но независимо от того, какие настройки CSS я изменяю в приведенном выше коде, на карте ничего не меняется.

У кого-нибудь есть идеи относительно того, как я могу стилизовать (переместить / изменить размер / изменить) существующие / стандартные кнопки OpenLayers, которые появляются на данной карте?

Answer 1

Пример пользовательского элемента управления объясняет, почему это так, но в основном Openlayers динамически загружает CSS-файл поверх вашего и уничтожает ваши изменения, потому что он был добавлен позже.

Вы должны создать свою карту с опцией 'theme', установленной в null; {'theme: null} в настройках карты. Затем включите CSS по умолчанию (theme / default / style.CSS) перед вашим, и все должно быть хорошо.

Answer 2

См. Ответ на ваш другой вопрос .Если вы не ссылаетесь на файл 'themes / default / style.css', путь к изображениям определяется встроенным, а не в классах CSS, которые вы упомянули выше.