59318


tileLayer と互換性のない地図ライブラリを背景にうめこんで leaflet を使いたいのですが  
leaflet 側で地図を移動したり拡大したりしたときにそのイベントをオーバーライドして  
背景の地図も移動や拡大縮小がしたいです

手始めとしてとりあえず移動や拡大縮小時にイベントをトリガーして  
console.log にはくだけのコードをかいてみたのですが  
移動時には反応がなく拡大縮小時には

[code]

    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)
    
[/code]

というエラーが出てしまいます

プラグインの作り方は  
[LeafletでL.Layerから派生した独自レイヤを作る](http://mng.seedcollector.net/blog/?p=946)  
<https://github.com/unbam/Leaflet.ZoomLabel/blob/master/src/L.Control.ZoomLabel.js>  
等を参考にしてみようみまねで作ってみたのですが  
どこがいけないのでしょうか

あと Leaflet 拡張プラグインを作るための  
入門サイトみたいなのがあれば教えていただけるとありがたいです

以下該当コードをすべて１HTMLにまとめたものです

[code]

    <!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>
    
[/code]


CC BY-SA 4.0
2019-09-17T09:32:22.083
59122
2019-09-27T06:12:30.183
2019-09-18T00:06:08.697
3060
question
javascript leaflet
Leaflet 独自プラグインで移動や拡大縮小をトリガーする方法


中で this を使ってたので Lambda 式じゃなく function でかかなければいけないようでした


CC BY-SA 4.0
2019-09-27T06:12:30.183
59318
2019-09-27T06:12:30.183
59122
answer