環境
事象
leafletでOpenStreetMapを表示し、その上にピンを描写。
その状態で下記動作を行うことでエラー発生。
- ズームイン/アウトを高速で繰り返す
- 同コンポーネントの状態が変更するような動作(例えばプルダウンを表示する等)をした直後にズームを行う
エラー内容
Uncaught TypeError: Cannot read properties of null (reading '_latLngToNewLayerPoint')
at e._animateZoom (Tooltip.js:209:23)
at e.fire (Events.js:195:9)
at e._animateZoom (Map.js:1701:8)
at e.<anonymous> (Map.js:1679:9)
原因
結論としてはleafletのバグのようです。
エラー主力された/leaflet/src/layer/Tooltip.js
の該当処理を見てみると、
this._map._latLngToNewLayerPoint
を呼び出そうとしています。
この時にthis._map
がnullなのでエラーが発生している模様。
_animateZoom: function (e) {
var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center);
this._setPosition(pos);
},
恐らく負荷をかけて処理が遅くなる、コンポーネント再読み込みなどのタイミングでthis._map
が格納される前にズーム処理が動いているのが原因かと思います。
Issueにも同様の不具合が報告されていました。
Fix issue with _latLngToNewLayerPoint #8574
対策
上記のIssueにもありますが、問題のメソッドをオーバーライドして実行前にthis._map
が存在するかチェックすることで解消しました。
具体的には下記のコードを追記しました。
<script lang="ts" setup>
import { ref } from 'vue'
import L from 'leaflet'
// ここから
L.Tooltip.prototype._animateZoom = function (e: any) {
if (!this._map) {
return
}
let pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center)
this._setPosition(pos)
}
L.Tooltip.prototype._updatePosition = function () {
if (!this._map) {
return
}
let pos = this._map.latLngToLayerPoint(this._latlng)
this._setPosition(pos)
}
// ここまでを追加
const map = ref<any>()
// 地図描写処理 etc.
</script>
<template>
...
</template>