第15章 - 插件开发与扩展机制

import {Class, Util} from 'leaflet';

class MyBox extends Class {
	static defaultOptions = {width: 1, height: 1};

	constructor(name, options) {
		super();
		Util.setOptions(this, options);
		this.name = name;
	}
}

class MyCube extends MyBox {
	static defaultOptions = {depth: 1};
}

const cube = new MyCube('red', {width: 10});
cube.options.width;   // 10（构造参数）
cube.options.height;  // 1（父类默认）
cube.options.depth;   // 1（子类默认）

import {Marker} from 'leaflet';

Marker.mergeOptions({riseOnHover: true});

import {Polyline} from 'leaflet';

Polyline.include({
	getPointCount() {
		return this.getLatLngs().length;
	}
});

new Polyline([[39.9, 116.3], [39.9, 116.5]]).getPointCount(); // 2

import {Polyline} from 'leaflet';

Polyline.addInitHook(function () {
	this._createdAt = Date.now();
});

class MyLayer extends Layer {
	static initHooks = true;

	constructor(options) {
		super();
		Util.setOptions(this, options);
		this._items = [];
		this.callInitHooks();
	}
}

import {Layer, DomUtil, DomEvent} from 'leaflet';

class CornerLabel extends Layer {
	static defaultOptions = {text: '', className: 'corner-label'};

	onAdd(map) {
		const div = this._container = DomUtil.create('div', this.options.className);
		div.textContent = this.options.text;
		map.getPane('overlayPane').append(div);
		this._update();
		return this;
	}

	onRemove() {
		this._container.remove();
		this._container = null;
	}

	getEvents() {
		return {zoomend: this._update, moveend: this._update};
	}

	_update() {
		// 固定在容器左上角 10px 处
		DomUtil.setPosition(this._container, this._map.containerPointToLayerPoint([10, 10]));
	}
}

new CornerLabel({text: '数据更新于 2026-11'}).addTo(map);

getEvents() {
	return {zoomanim: this._animateZoom, viewreset: this._update};
}

_animateZoom(e) {
	const scale = this._map.getZoomScale(e.zoom);
	const offset = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center);
	DomUtil.setTransform(this._container, offset, scale);
}

import {Control, DomUtil, DomEvent} from 'leaflet';

class CounterControl extends Control {
	static defaultOptions = {position: 'bottomright'};

	constructor(options) {
		super(options);
		this._count = 0;
	}

	onAdd(map) {
		const box = DomUtil.create('div', 'leaflet-bar counter');
		const btn = DomUtil.create('a', '', box);
		btn.href = '#';
		btn.setAttribute('role', 'button');
		btn.setAttribute('aria-label', '记录一次点击');
		btn.textContent = '0';

		DomEvent.disableClickPropagation(box);
		DomEvent.on(btn, 'click', e => {
			e.preventDefault();
			btn.textContent = String(++this._count);
		});

		this._btn = btn;
		return box;
	}

	onRemove() {
		this._btn = null;
	}
}

new CounterControl().addTo(map);

import {Handler, DomEvent, Point} from 'leaflet';

class TiltPanHandler extends Handler {
	addHooks() {
		DomEvent.on(window, 'deviceorientation', this._tilt, this);
	}

	removeHooks() {
		DomEvent.off(window, 'deviceorientation', this._tilt, this);
	}

	_tilt(e) {
		if (e.gamma == null || e.beta == null) { return; }
		// 1 度倾斜 ≈ 3 像素平移
		this._map.panBy(new Point(-e.gamma * 3, -e.beta * 3), {animate: false});
	}
}

// 挂到所有地图实例上，并成为 map.tilt
import {LeafletMap} from 'leaflet';
LeafletMap.addInitHook('addHandler', 'tilt', TiltPanHandler);

// 创建时自动启用
new LeafletMap('map', {tilt: true}).setView([39.9, 116.4], 12);

// 运行时开关
map.tilt.disable();
map.tilt.enabled(); // false

import {GridLayer, DomUtil} from 'leaflet';

class CoordinateGridLayer extends GridLayer {
	createTile(coords) {
		const tile = DomUtil.create('div', 'leaflet-tile');
		const size = this.getTileSize();
		tile.style.width = size.x + 'px';
		tile.style.height = size.y + 'px';
		tile.style.outline = '1px solid #ccc';
		tile.textContent = [coords.x, coords.y, coords.z].join(', ');
		return tile;
	}
}

new CoordinateGridLayer({tileSize: 256}).addTo(map);

import {TileLayer} from 'leaflet';

class TimestampTileLayer extends TileLayer {
	getTileUrl(coords) {
		const base = super.getTileUrl(coords);
		return `${base}&t=${this.options.timestamp}`;
	}
}

new TimestampTileLayer('https://tile.example.com/{z}/{x}/{y}.png', {
	timestamp: 1735689600,
	maxZoom: 18
}).addTo(map);

import {Polyline} from 'leaflet';

const editors = new WeakMap();

Object.defineProperty(Polyline.prototype, 'editor', {
	configurable: true,
	get() {
		let editor = editors.get(this);
		if (!editor) {
			editor = new PolylineEditor(this);
			editors.set(this, editor);
		}
		return editor;
	}
});

import * as L from 'leaflet';

class MyLayer extends L.Layer {
	constructor(options) {
		super();
		L.Util.setOptions(this, options);
	}
}

// 1.x 的默认值在 prototype.options 上，先复制一份再加，避免污染所有 Layer
if (L.version.startsWith('1.')) {
	MyLayer.prototype.options = Object.create(L.Layer.prototype.options);
}
MyLayer.mergeOptions({opacity: 0.5});

// rolldown.config.js
export default [
	{input: './src/MyLayer.js', external: ['leaflet'],
	 output: {file: './dist/leaflet-my-layer.js'}},
	{
		input: './build/global.js',
		external: ['leaflet'],
		output: {file: './dist/leaflet-my-layer-global.js', format: 'iife', globals: {leaflet: 'L'}}
	}
];