javascript 半径にpixelではなく、mを用いたい

Question

前提・実現したいこと

javascriptにて、geojsonデータからサークルを描画したいと考えています。
最終的には、geojsonのpropertiesにある半径(m)の数値をradiusに指定したいと考えています。

発生している問題・エラーメッセージ

L.CircleMarkerでは、半径はピクセルで指定する必要があるのですが、この半径をmで指定するために
どのようにすればいいか教えていただきたいです。
L.Circleでは、mで指定できるようです、、、

Lhankor_Mhy様に回答を頂いた後、該当ソースコードを変更→その後発生したエラー
Error: Invalid LatLng object: (35.0155833957335, NaN)

該当のソースコード

Lhankor_Mhy様に回答していただき、ソースコードを調整いたしました。

from math import cos, sqrt
import numpy as np
class NodeLatlngMapper:
    """ノードマッパー"""
    def as_dict(self, node1, node2):
        def qick_distance(Lat1, Long1, Lat2, Long2):
            #degreeからradianへ
            Lat1 = np.deg2rad(Lat1)
            Lat2 = np.deg2rad(Lat2)
            Long1 = np.deg2rad(Long1)
            Long2 = np.deg2rad(Long2)
            x = Lat2 - Lat1
            y = (Long2 - Long1) * cos((Lat2 + Lat1)*0.00872664626)
            #戻り地はm
            return 111.138 * sqrt(x*x + y*y) * 1000
        return {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {
                        'node': {
                            'node_id': node1.node_id,
                        },
                        'popupContent': 'これは'+ str(node1.node_id) + '番目です。',
                        "distance": qick_distance(node1.latlng.x,node1.latlng.y,node2.latlng.x,node2.latlng.y),
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [node1.latlng.x,node1.latlng.y],
                    },
                },
            ]}

 V.showNodesLayer = function(geojson) {
var Marker = function(feature, latlng) {
           return new L.Circle(latlng, {
             radius: 3,
             color: "#00ff00",
             fillColor: '#00ff00',
             fillOpacity: 0.2,
           })
       };
       L.geoJson(geojson, {pointToLayer: Marker},).addTo(map).on( 'click', function(e) {  clickEvt(e); });
       function onEachFeature(feature, layer) {
           if (feature.properties && feature.properties.popupContent) {
               layer.bindPopup(feature.properties.popupContent);
           }
       }
       function clickEvt(e){
         alert('HelloWorld');
       }
}

試したこと

mからpixelに変換する方法も試してみたのですが、上手くいきませんでした。

補足情報（FW/ツールのバージョンなど）

必要な情報が抜けているかもしれません。
こちらも教えていただけましたら幸いです。
マップのサイズは(縦,横:500pixel,500pixel)で描画しています。

Comments

[Lhankor_Mhy]

ご自身で書かれているように、Circleであればメートルが使えると思いますが、何か不都合があるのですか？

[miyabi_pudding]

なぜ、mを指定したいのでしょうか？
画面上で実寸で表示したい、ということでしょうか？

[Lhankor_Mhy]

> miyabi_takatsukさん

いや、たぶん、地図上のメートルだと思いますよ。

[okiron9619]

Lhankor_Mhy様、miyabi_takatsuk様
返信遅れすみません。
m指定したい理由については、Lhankor_Mhy様の追記欄に書いていただいた通りです。。
geojsonデータ内の数値がmであるため、半径指定の際にもmにしたいと考えています。(地図上のメートルです。)

L.Circleを用いる方法についても検討したのですが、自分の理解不足で、geojsonデータを用い且つL.Circleを用いる方法について分かりませんでした。

多々理解不足な点がありますが、教えた頂けましたら幸いです。

[Lhankor_Mhy]

>geojsonデータを用い且つL.Circleを用いる方法について分かりませんでした。

ご提示のコードにはgeojsonの部分がありませんでしたが、つまり、ここに書かれていない問題があってCircleが利用できない、という理解で合っていますか？

[okiron9619]

Lhankor_Mhy様
仰る通りです。geojsonを形成している部分のコードとjavascript全体について、修正いたしました。

posgresqlデータベースにある緯度経度とidの情報を用いて、python上でgeojsonデータを形成しています。
この時に、idとid+1の緯度経度を用い、距離をdistanceに格納しています。(単位はmです)
Ajax通信を使い、python上のgeojsonデータをjavascriptにて扱っています。(V.showNodesLayer = function(geojson)の引数であるgeojsonに当たります)

返答していただいた内容でほぼあっていますが、おそらく自分の理解不足でL.Circle()が利用できないのではなく、利用方法がわからないのだと思います。

[okiron9619]

すみません、日本語がおかしい記述がありますが、ご容赦ください。

[Lhankor_Mhy]

手元の環境で、GeoJSONを読み込んで circle で書くコードを書いてみましたが、問題なく動作しました。
ドキュメントを見ても、CircleMarkerの子クラスと書いてあったので、使えないということはないと思うんですよね。
お試しになった時に、どのような問題が発生しましたか？

[Lhankor_Mhy]

ご存知かと思いますが、ドキュメントはこちらです。
https://leafletjs.com/reference-1.7.1.html#circle

[okiron9619]

Lhankor_Mhy様
不甲斐ないのですが、自分で調べた限りで、geojson用い、L.Circleメソッドを用いて、描画する方法を見つけることができませんでした。そのため、L.Circleを用いて描画してみること自体試していませんでした。(添付していただいたドキュメントは拝見済みでした)

L.Circleであれば、半径にmを用いることができるため、一度以下のように記述して試してみたのですが上手くいかなかったため、断念していました。(書き方に問題あると思います。)
var Marker = function(feature, latlng) {
return new L.Circle(latlng, {
radius: feature.properties.distance * 3,
color: "#00ff00",
fillColor: '#00ff00',
fillOpacity: 0.2,
})
};
上記のコードの時に、出たエラーは
Error: Invalid LatLng object: (35.0155833957335, NaN) leaflet.js:6:13842
というものです。
お手数ですが、記述方法を教えていただけましたら幸いです。

[Lhankor_Mhy]

回答しました。

Answer 1

試してみましたが、やはり問題なくL.circleで動作しますね。

サンプル

var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    139.70215,35.65831 // teratailを運営してくれているレバレジーズ様本社
                ]
            },
            "type": "Feature",
            "properties": {
                "distance": 20,
                
            },
        },
]};

//...

var Marker = function(feature, latlng) {
           return new L.circle(latlng, {
             radius: feature.properties.distance * 3,
             color: "#00ff00",
             fillColor: '#00ff00',
             fillOpacity: 0.2,
           })
       };
       L.geoJson(geojson, {pointToLayer: Marker},).addTo(map).on( 'click', function(e) {  clickEvt(e); });

Comments

[okiron9619]

回答ありがとうございます。
質問文の変更を致しました。
変更後も先日と同じようなエラーが出ました。
Leafletのversionなどによる影響なのでしょうか、、、
一応ですが、leaflet-0.7.3を使用しています。

[Lhankor_Mhy]

ずいぶん古いものを使ってますね……

[Lhankor_Mhy]

バージョンを0.7.3に代えてみたところ、同じエラーが出ました。

[okiron9619]

versionを変更したところ、エラーが消えました。ポイントによって、mの指定もできているかと思います。(詳しい数値の部分までは、まだわからないです)
丁寧に教えていただき、ありがとうございます。

一つ質問なのですが、l.Circleメソッドにて指定できる半径には、最小値なるものが存在するのでしょうか。(5m以上ではないと、描画できない、のような事を言いたいです。)

[Lhankor_Mhy]

https://github.com/Leaflet/Leaflet/blob/37d2fd15ad6518c254fae3e033177e96c48b5012/src/layer/vector/Circle.js#L77

コードを見る感じ、そういうのはなさそうですね。小さすぎて見えない、ということはあるでしょうけれど。

[okiron9619]

やはりそうですよね。
丁寧且つ詳しい回答ありがとうございます。

Answer 2

いやこの場合ｍ指定の意味がないような...
もしかして画面の表示とgeojsonデータ内の単位で
表示結果で縮尺合わせようとか考えていますか？
1m = 100cm
1m / 100 = 1cm
画面で測ると1cm(1/100)とか？