Как определить кнопку масштабирования в openlayers API? - PullRequest
Новая
       7

Как определить кнопку масштабирования в openlayers API?

0 голосов
/ 25 апреля 2018

Как удалить кнопки по умолчанию ol-zoom и определить другие кнопки масштабирования с различными тегами и именами классов в openlayers API? 

<div class="ol-zoom ol-unselectable ol-control">
    <button class="ol-zoom-in" type="button" title="Zoom in">+</button>
    <button class="ol-zoom-out" type="button" title="Zoom out">−</button>
</div>

Я использовалэтот код для установки имени класса CSS для кнопок масштабирования, но я не знаю, почему он не работает: 

new ol.control.Zoom({
          className: "my-new-class-name"
        });

1 Ответ

0 голосов
/ 25 апреля 2018

Я не вижу, добавили ли вы на самом деле элемент управления Zoom на карту.Создание самого элемента управления не меняет карту OL.Кроме того, карта имеет экземпляр управления масштабированием по умолчанию.Если вы назвали addControl на карте, вы могли бы получить два элемента управления масштабированием, расположенные друг над другом.

Вы можете передать свой элемент управления в качестве опции для инициализации карты.Если вы не хотите перечислять все остальные элементы управления вручную, просто используйте ol.control.defaults с параметром zoom: false.Он пропускает элемент управления масштабированием, но добавляет элементы управления атрибуцией и вращением по умолчанию.

Вы даже можете передать свои параметры непосредственно ol.control.defaults: 

ol.control.defaults({
    zoomOptions: {
        className: "ol-zoom my-new-class-name"
    }
})

Во-вторых, установка className имеет видне аддитивный, он заменяет класс ol-zoom по умолчанию.Таким образом, ваш элемент управления может быть добавлен в DOM, но не имеет стиля и размещен за кадром.Вы можете исправить это, добавив ol-zoom к className.

Вот рабочий пример: 

var map = new ol.Map({
  controls: ol.control.defaults({
    zoom: false
  }).extend([
    new ol.control.Zoom({
          className: "ol-zoom my-new-class-name"
        })
  ]),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 3,
  })
});
.ol-zoom.my-new-class-name {
  background: red;
}
<link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
<div id="map" class="map"></div>
...