openlayers3 - 将节点设置为 ol.control.FullScreen 控件的标签

Question

我正在尝试将自定义跨度 (<span class="fa fa-expand"></span>) 设置为 openlayers 3 FullScreen 控件的标签。

根据文档，这应该是可行的。文档指出：

label string | Node | undefined experimental

Text label to use for the button. Default is \u2922 (NORTH EAST AND SOUTH WEST ARROW). Instead of text, also a Node (e.g. a span element) can be used.

我试过这样设置标签：

let fullScreenControl = new ol.control.FullScreen({
     className: 'fullScreen-button',
     label: '<span class="fa fa-expand"></span>'
});

但这似乎 html 编码了我的标签。当我在开发人员控制台中检查生成的按钮时，它会添加 <span> ...

有人可以指导我如何将 "Node" 设置为标签，或者通常是将自定义跨度设置为控件标签的正确方法吗？谢谢

Answer 1

您需要创建一个元素对象：

var mySpan = document.createElement("span");
mySpan.className = "fa fa-expand";

var fullScreenControl = new ol.control.FullScreen({
  className: 'fullScreen-button',
  label: mySpan
});

openlayers3 - 将节点设置为 ol.control.FullScreen 控件的标签

openlayers3 - Set Node as label for ol.control.FullScreen control

javascript

css

openlayers-3