如何在 openlayers API 中定义缩放按钮？

Question

如何删除默认的 ol-zoom 按钮并在 openlayers[=19= 中定义另一个具有不同标签和 class 名称的缩放按钮] 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 class 名称，但我不知道为什么它不起作用：

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

Answer 1

我看不到您是否真的向地图添加了缩放控件。实例化控件本身不会更改 OL 贴图。此外，地图有一个默认的缩放控件实例。如果您在地图上调用 addControl，您可能会得到两个缩放控件彼此重叠的结果。

您可以将控件作为地图初始化的选项。如果您不想手动列出所有其他控件，只需使用 ol.control.defaults 和选项 zoom: false。它省略了缩放控件，但添加了默认属性和旋转控件。

您甚至可以直接将您的选项提供给 ol.control.defaults:

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

其次，设置class名称不是附加的，它取代了默认的ol-zoom class。因此，您的控件可能会添加到 DOM，但没有样式并且放置在屏幕外。您也可以通过将 ol-zoom 添加到 class 名称来解决此问题。

这是一个工作示例：

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>

如何在 openlayers API 中定义缩放按钮？

How to define zoom button in openlayers API?

javascript

css

api

openlayers

openstreetmap