时间戳

首页 > 解决方案 > 如何将图像添加到打开图层中的 ZoomToExtent 按钮？

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

问题描述

我正在尝试在 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%;
}

堆栈闪电战

标签： typescriptopenlayers

解决方案

它可以在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>

推荐阅读