Как добавить изображение к кнопке ZoomToExtent в открытых слоях? - PullRequest
Новая
       13

Как добавить изображение к кнопке ZoomToExtent в открытых слоях?

0 голосов
/ 09 декабря 2018

Я пытаюсь настроить элемент управления ZoomToExtent в css и установить изображение на кнопке, как сказано в описании API открытых слоев, но это не работает.

Кто-нибудь еще имел эту проблему и решил ее?

CSS: 

.ol-zoom-extent button {
   background-image: url(https://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png);
   height: 1.375em;
   width: 1.375em;
   background-size: 100%;
}

Stackblitz

1 Ответ

0 голосов
/ 09 декабря 2018

Это может быть сделано в javascript 

var zoom = document.createElement('span');
zoom.innerHTML = '<img src="icon.png" width="32" height="32">';

var map = new ol.Map({
    layers: [ layer ],
    target: 'map',
    controls: ol.control.defaults().extend([
        new ol.control.ZoomToExtent({
            label: zoom
        })
    ])
});

Это также может быть сделано в CSS, но синтаксис должен быть 

background-image: url(https://openlayers.org/en/v5.3.0/examples/data/icon.png);

Полный пример кода с использованием javascript 

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <style>
    html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

<body>
  <div id="map" class="map"></div>
  <script type="text/javascript">

    var zoom = document.createElement('span');
    zoom.innerHTML = '<img src="https://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png" width="100%" height="100%">';

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        controls: ol.control.defaults().extend([
            new ol.control.ZoomToExtent({label: zoom})
        ]),
        view: new ol.View({
            center: [0,0],
            zoom: 2
        })
    });

  </script>
</body>

</html>

Полный пример кода с использованием CSS 

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <style>
    html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .ol-zoom-extent button {
        background-image: url(https://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png);
        background-size: 100%;
    }
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

<body>
  <div id="map" class="map"></div>
  <script type="text/javascript">

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        controls: ol.control.defaults().extend([
            new ol.control.ZoomToExtent({label: ''})
        ]),
        view: new ol.View({
            center: [0,0],
            zoom: 2
        })
    });

  </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...