0

お世話になります。

leafletで表示させているマーカーでクリックするとポップアップが表示されます。
このマーカーはcanvasで描画していて、
サイズを動的に変更出来るようにしています。

サイズを動的に変更するとクリックイベントの範囲が実際の円よりも広い判定になってしまい、
困っております。
マーカーをDOMで描画している場合サイズを変更しても問題ありません。
canvasで描画しながらマーカーサイズを変更してもイベントの判定を円の範囲内にしたいのですが、方法はありますでしょうか。

以下コードを記載します。
そのままコピーペーストで動作します。

よろしくお願いいたします。

leaflet: 1.6.0

<!DOCTYPE html>
<html lang="ja" id="map-html">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Pragma" content="no-store">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Expires" content="0">
<title>title</title>
    <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" rel="stylesheet">
<body>

<div id="optionmenu">
    <label>マーカーサイズ</label>
    <div><input id="marker_size" type="range" min="1" max="100"></div>
</div>

<div id="map" style="width: 100vw; height: 100vh;"></div>

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script  type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet-src.js"></script>
<script type="text/javascript">

let map = null;

const marker = {
    marker_size : 8,
    marker_layer: {},
    letlng: [35, 139],
    set: function () {
        L.circleMarker(
            marker.letlng,
            {
                radius: this.marker_size,
                className: 'normal-marker',
                color: '#FF0000',
                renderer:  L.canvas()
            }
        ).on('click', function(e) {
            L.popup({
                closeButton: true,
                popupOpen: true,
                autoClose: false
            }).setLatLng(marker.letlng).setContent('test').openOn(map);

        }).addTo(this.marker_layer)
    },

    remove_marker: function() {
        this.marker_layer.clearLayers();
        this.marker_layer = L.layerGroup().addTo(map);
    },
    init: function() {
        this.marker_layer = L.layerGroup().addTo(map);
    }
}



window.onload = function() {
    L.DomUtil.create('div', 'leaflet-overlay', document.getElementById('map'));

    const baseGSI = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
        attribution: ' &copy; <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
        maxZoom: 18,
        minZoom: 0
    });

    map = new L.map('map', {
        center: ['35', '139'],
        zoom: 8,
        layers: [baseGSI],
        zoomControl: false,
        zoomAnimation: false,
        fadeAnimation: false,
        markerZoomAnimation: false,
    });
    L.control.zoom({
        position:'bottomright',
        zoomInTitle: 'ズームイン',
        zoomOutTitle: 'ズームアウト'
    }).addTo(map);

    $(".leaflet-control-attribution").eq(0).html('<a href="http://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>');

    $("#marker_size").on('change', function () {
        const val = $(this).val();

        marker.marker_size = val;

        marker.remove_marker();
        marker.set();
    })

    marker.init();
    marker.set();
};

</script>
</body>

</html>

1 件の回答 1

1

自己解決しました。
結局マーカーサイズ変更処理の箇所でinput要素の値をnumberにキャストして渡してあげたら正常に動作しました。
内部でどういう処理が行われているか分かりませんが、やはり型には注意したほうがいいですね

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。