Question

我正在使用LeafletJS在MapBox地图上显示点。然而，积分并没有排成一列。它们很接近但不准确。

我将setView设置为以下位置：

var mymap = L.map（'mapid'）。setView（[40.311420，-75.134643]，17）;

然后我试图在40.310676，-75.138090上绘制一个点：

    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 + ")");

正如您在下面的图像中看到的那样，点（黄色）确实显示但是它不在正确的位置。它应该是红点所在的位置。 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几何的具体细节。

我正在使用LeafletJS和JavaScript在MapBox地图上显示点。然而，积分并没有排成一列。它们很接近但不准确

2 个答案: