Question

我正在尝试自定义CSS中的ZoomToExtent控件，并在按钮上设置图像，如打开层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

Answer 1

可以用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>

如何在打开的图层中将图像添加到ZoomToExtent按钮？

1 个答案: