Question

我正在尝试添加一个图标来代替'E'。我已经搜索了OpenLayers的文档，但没有找到。任何建议将不胜感激。

  this.map = new Map({
    controls: defaultControls({ attribution: false, rotate: false }).extend([
      new FullScreen(),
      new ZoomToExtent({
        extent: zoomToCenter,
        label: 'E',
        tipLabel: 'Zoom Extent'  

      })

Answer 1

我知道这是一个老问题，但当我遇到类似的问题时，我会尽力为未来的读者提供完整的答案。

正如@barbsan 所说，你可以传递一个 HTMLElement 给标签 witch 不是一个包含一些 HTML 标签的简单字符串，而是一个你必须从 DOM 中获取或像这样创建的对象：

var customLabel = document.createElement('span');
//Do your DOM manip here to add classes or innerHtml
this.map = new Map({
    controls: defaultControls({ attribution: false, rotate: false }).extend([
      new FullScreen(),
      new ZoomToExtent({
        extent: zoomToCenter,
        label: customLabel,
        tipLabel: 'Zoom Extent'  
    })
})

Answer 2

是的，您可以将label设置为某些HTMLElement

来自docs：

新的 ZoomToExtent （选择选项）
  ...
  选项：
  名称： label
  类型： string | HTMLElement
  默认值：'E'
  说明：
用于按钮的文本标签。 除了文本，还可以使用元素（例如span元素）。

是否可以在OpenLayers中为ZoomToExtent添加图标？默认为“ E”

2 个答案: