我从继承创建了一个新控件:
L.Control.extend({
options: {
position: position,
descriptionHeader: 'This is a description',
descriptionText: 'Label',
counterHeader: 'This is a description',
counterText: 'Label',
className: 'leaflet-control-custom',
labelClassName: 'button-label'
},
setDescriptionHeader(text: string){
console.log("here");
this.options.descriptionHeader = text;
},
setDescriptionText(text: string){
this.options.descriptiontext = text;
},
setDescriptionCounterHeader(text: string){
this.options.counterHeader = text;
},
setDescriptionCounterText(text: string){
this.options.counterText = text;
},
onAdd: function (map) {
let mainContainer: any = L.DomUtil.create('div', 'description-control');
let container: any = L.DomUtil.create('div', 'description-options');
let counterContainer: any = L.DomUtil.create('div', 'description-options-2');
let header: HTMLElement = document.createElement("h2");
header.className = 'description-title';
header.innerText = this.options.descriptionHeader;
container.appendChild(header);
let text: HTMLElement = document.createElement("span");
text.className = 'description-text';
text.innerText = this.options.descriptionText;
container.appendChild(text);
let counter: HTMLElement = document.createElement("h2");
counter.className = this.options.labelClassName;
counter.innerText = this.options.counterHeader;
counterContainer.appendChild(counter);
let counterText: HTMLElement = document.createElement("span");
counterText.className = this.options.labelClassName;
counterText.innerText = this.options.counterText;
counterContainer.appendChild(counterText);
mainContainer.appendChild(counterContainer);
mainContainer.appendChild(container);
return mainContainer;
}
});
我希望在外部变量更改或触发操作时自动更新此控件内容:
我希望能够将一些变量传递给控件以更新其文本。 我已经尝试了几种解决方案,例如为变量设置设置器,但是不起作用。
该控件如下所示:
您能告诉我一种更新控件内容的方法吗?
谢谢