

お世話になります。

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

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

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

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

leaflet: 1.6.0

[code]

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


CC BY-SA 4.0
2020-03-14T01:50:52.653
63819
2020-03-15T04:04:07.573
38184
question
javascript html5-canvas leaflet
leafletでマーカーをcanvasで描画している時、マーカーサイズを動的に変更するとイベントの判定がズレてしまう


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


CC BY-SA 4.0
2020-03-15T04:04:07.573
63855
2020-03-15T04:04:07.573
38184
63819
answer