JS 追加按钮以及设置按钮样式
0
悬赏园豆：15
[已关闭问题]
关闭于 2023-08-16 10:08
这里有一段openlayers的自定义按钮样例代码，我的需求是为这个按钮添加图标svg而不是只写一个文本内容，但是我不会用js设置样式
我这边想把图标定义在css样式中，这样我可以重复使用这个按钮
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import {Control, defaults as defaultControls} from 'ol/control';
//
// Define rotate to north control.
//
class RotateNorthControl extends Control {
/**
* @param {Object} [opt_options] Control options.
*/
constructor(opt_options) {
const options = opt_options || {};
const button = document.createElement('button');
button.innerHTML = 'N';
const element = document.createElement('div');
element.className = 'rotate-north ol-unselectable ol-control';
element.appendChild(button);
super({
element: element,
target: options.target,
});
button.addEventListener('click', this.handleRotateNorth.bind(this), false);
}
handleRotateNorth() {
this.getMap().getView().setRotation(0);
}
}
下图是我写的，这个点实在是太丑了
- 通过传入类型、文字、css类的样式来修改按钮
export class DrawPointBtn extends ol.control.Control {
controlType='None'
/**
* @param {Object} [opt_options] Control options.
*/
constructor(type, string,className, opt_options) {
const options = opt_options || {};
const button = document.createElement('button');
button.innerHTML = string;
const element = document.createElement('div');
element.className = className+' ol-unselectable ol-control';
element.appendChild(button);
super({
element: element,
target: options.target,
});
this.controlType = type
button.addEventListener('click', this.handleClick.bind(this), false);
}
handleClick() {
drawGraphics(this.controlType)
}
}
所有回答(1)
0
import { drawGraphics } from '../map2D'
const ol = window.ol
export class PlottingBtn extends ol.control.Control {
controlType = 'None'
/**
* 为openlayers生成一个自定义的绘制按钮
* @param {string} type 绘制类型：Point | LineString | Polygon | None | Clear
* @param {boolean} isChar 是否是文本
* @param {string} string 若是文本，则为文本内容；若不是，则为图标路径：@/assets/images/svg/下的图标
* @param {string} className div的css class名
* @param {object} [opt_options] Control选择配置对象
*/
constructor(type, isChar, string, className, opt_options) {
const options = opt_options || {};
const button = document.createElement('button');
if (isChar) {
button.innerHTML = string;
} else {
const span = document.createElement('span');
const img = document.createElement("img")
// @/assets/images/svg/clear.svg
img.setAttribute("src", require('@/assets/images/svg/' + string))
span.appendChild(img)
button.appendChild(span)
}
const element = document.createElement('div');
element.className = className + ' ol-unselectable ol-control';
element.appendChild(button);
super({
element: element,
target: options.target,
});
this.controlType = type
button.addEventListener('click', this.handleClick.bind(this), false);
}
handleClick() {
// 只有以下类型的controlType可以进行绘制
if (this.controlType === 'Point' || this.controlType === 'LineString' || this.controlType === 'Polygon' || this.controlType === 'None' || this.controlType === 'Clear') {
drawGraphics(this.controlType)
}
}
}
