私はMapBoxマップ上にポイントを表示するためにLeafletJSとJavaScriptを使用しています。しかしポイントは並んでいません。それらは近いが正確ではない

Question

MapBoxマップ上にポイントを表示するためにLeafletJSを使用しています。しかしポイントは並んでいません。彼らは近いが正確ではない。

私setviewコマンドは、次の場所に設定されている：。

するvar mymapという= L.map（ 'mapid'）setviewコマンド（[40.311420、-75.134643]、17）。あなたは（黄色で）点以下の画像で見ることができるように

temp.LatLng = new L.LatLng(40.310653, -75.138070); 

    g.append("circle") 
     .attr("cx", temp.LatLng.lat) 
     .attr("cy", temp.LatLng.lng) 
     .attr("r", 10) 
     .attr("fill", "#ffff00") 
     .attr("stroke", "#ffff00") 
     .attr("transform", "translate(" + mymap.latLngToLayerPoint(temp.LatLng).x + "," + mymap.latLngToLayerPoint(temp.LatLng).y + ")"); 

現れないが、それはではない：

その後、私はこれを行うことにより、40.310676、-75.138090にポイントをプロットしようとしています正しい場所。それは、赤い点がある場所でなければなりません。 enter image description here

ご協力いただきありがとうございます。

Answer 1

私は自分自身の質問に答えることになった。

私は円を描いているコードで、私は緯度と経度にcxとcyを設定してからそこから変換していました。このように：

g.append("circle") 
     .attr("cx", temp.LatLng.lat) 
     .attr("cy", temp.LatLng.lng) 
     .attr("r", 10) 
     .attr("fill", "#ffff00") 
     .attr("stroke", "#ffff00") 
     .attr("transform", "translate(" + mymap.latLngToLayerPoint(temp.LatLng).x + "," + mymap.latLngToLayerPoint(temp.LatLng).y + ")"); 

元の円を0,0で描画し、そこから変換する必要があります。

g.append("circle") 
     .attr("cx", 0) 
     .attr("cy", 0) 
     .attr("r", 10) 
     .attr("fill", "#ffff00") 
     .attr("stroke", "#ffff00") 
     .attr("transform", "translate(" + mymap.latLngToLayerPoint(temp.LatLng).x + "," + mymap.latLngToLayerPoint(temp.LatLng).y + ")"); 

Answer 2

使用L.CircleまたはL.CircleMarker：これは、符号化は以下のように見てしまったものです。これにより、LeafletはDOM内のSVGジオメトリを特定する詳細を処理できます。