You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { TileLayer } from 'leaflet';
|
|
import { buildOptions, buildAttrMap, setLayerAttr, parseAttributeValue } from '../core/utils.ts';
|
|
import { WithProps } from '../core/with-props.ts';
|
|
|
|
import { registerChildren, unregisterChildren } from '../core/register.ts';
|
|
import { defineProps, num, str, on } from '../core/props.ts';
|
|
|
|
const PROPS = defineProps({
|
|
url: str(),
|
|
layers: str(),
|
|
styles: str(),
|
|
format: str('image/jpeg'),
|
|
transparent: on(),
|
|
version: str('1.1.1'),
|
|
uppercase: on(),
|
|
});
|
|
|
|
const PROP_BY_ATTR = buildAttrMap(PROPS);
|
|
|
|
export default class LeafletTileLayerWMS extends WithProps(HTMLElement, PROPS) {
|
|
#obj?: TileLayer.WMS;
|
|
|
|
connectedCallback() {
|
|
const url = this.getAttribute('url') || '';
|
|
this.#obj = new TileLayer.WMS(
|
|
url,
|
|
buildOptions(this, PROPS, ['url']),
|
|
);
|
|
registerChildren(this, this.#obj);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
unregisterChildren(this);
|
|
this.#obj?.remove();
|
|
this.#obj = undefined;
|
|
}
|
|
|
|
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
|
if (!this.#obj) return;
|
|
if (name === 'url') {
|
|
if (val) this.#obj.setUrl(val);
|
|
} else {
|
|
const propName = PROP_BY_ATTR.get(name);
|
|
if (!propName) return;
|
|
const spec = PROPS[propName as keyof typeof PROPS];
|
|
if (!setLayerAttr(this.#obj!, PROPS, PROP_BY_ATTR, name, val)) {
|
|
const value = spec.kind === 'bool-on' ? val !== null : parseAttributeValue(val);
|
|
(this.#obj.setParams as unknown as (params: Record<string, unknown>) => void)({
|
|
[propName]: value,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('leaflet-tile-layer-wms', LeafletTileLayerWMS);
|