Leaflet 独自プラグインで移動や拡大縮小をトリガーする方法
tileLayer と互換性のない地図ライブラリを背景にうめこんで leaflet を使いたいのですが
leaflet 側で地図を移動したり拡大したりしたときにそのイベントをオーバーライドして
背景の地図も移動や拡大縮小がしたいです
手始めとしてとりあえず移動や拡大縮小時にイベントをトリガーして
console.log にはくだけのコードをかいてみたのですが
移動時には反応がなく拡大縮小時には
Uncaught TypeError: Cannot read property 'call' of undefined
at i.fire (leaflet.js:5)
at i._moveEnd (leaflet.js:5)
at i.<anonymous> (leaflet.js:5)
というエラーが出てしまいます
プラグインの作り方は
LeafletでL.Layerから派生した独自レイヤを作る
https://github.com/unbam/Leaflet.ZoomLabel/blob/master/src/L.Control.ZoomLabel.js
等を参考にしてみようみまねで作ってみたのですが
どこがいけないのでしょうか
あと Leaflet 拡張プラグインを作るための
入門サイトみたいなのがあれば教えていただけるとありがたいです
以下該当コードをすべて1HTMLにまとめたものです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" crossorigin=""/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" crossorigin="">
</script>
</head>
<body>
<div id="map" class="map" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px; position:absolute;"></div>
</body>
<script type="text/javascript">
L.ZMap = L.Layer.extend({
initialize: (options) => {
this._options = options;
},
onAdd: (map) => {
this._map = map;
//map.on('viewreset', this._updatePosition, this);
map.on('zoomend', this._onZoomend, this);
map.on('moveend', this._onMoveend, this);
},
_updatePosition: () => {
console.log('update position');
},
_onMoveend: (e) => {
console.log('moveend');
},
_onZoomend: (e) => {
console.log('zoomend');
},
onRemove: (map) => {
//map.off('viewreset', this._updatePosition, this);
map.off('zoomend', this._onZoomend, this);
map.off('moveend', this._onMoveend, this);
}
});
L.zmap = (options = {}) => {
return new L.ZMap(options);
};
////////////////////////////////////////////////
const lat = 35.6778614, lon = 139.7703167, zoom = 10;
const map = L.map('map').setView([lat, lon], zoom);
L.marker([lat, lon]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
L.zmap().addTo(map);
</script>
</html>