使用d3和传单将地理坐标传递给latLngtoLayerPoint函数时出现问题吗?

时间:2019-02-02 20:28:26

标签: javascript d3.js leaflet

我正在尝试使用d3和传单的组合来绘制一些经/纬度坐标。

我有一个嵌套的JSON瓦特/地理坐标,名称为allSFEvents

@context: "http://schema.org"
@type: "MusicEvent"
endDate: "2019-01-27"
image: ""
location:
    @type: "Place"
    address: "San Francisco, CA"
    geo:
        @type: "GeoCoordinates"
        latitude: 37.775
        longitude: -122.4183333
        __proto__: Object
    name: "Natoma Cabana"
    __proto__: Object
    name: "Winter Olympics"
    performer: {url: "https://www.bandsintown.com/a/217960- 
    winter-olympics?came_from=244", image: "", @type: 
   "MusicGroup", name: "Winter Olympics"}
startDate: "2019-01-27"
url: "https://www.bandsintown.com/e/1013280443-winter-olympics-at-natoma-cabana?came_from=244"
__proto__: Object

我然后通过循环allSFEvents

allSFEvents.forEach(function(d) {
  for (var key in allSFEvents) {
  d.latLong = new L.LatLng(allSFEvents[key].location.geo.latitude,
              allSFEvents[key].location.geo.longitude);
  console.log(d.latLong)
  }                 
    })

万事大吉。 console-logging d.latLongs会打印每个不同的经/纬对。

我使用d3和传单约定映射坐标:

var events = mapG.selectAll("circle")
        .data(allSFEvents)
        .enter().append("circle")
        .style("stroke", "blue")
        .attr("class", 'events')
        .style("fill", 'blue')

控制台日志记录events给出了不同的圆圈,以及不同的经/纬对。

因此,问题似乎在最后一步中发生:

function drawAndUpdateEventCircles() {

    events.attr("transform",
        function(d) {
            var layerPoints = map.latLngToLayerPoint(d.latLong);
            console.log(d.latLong)//returns the same lat/long pair over and over
            return "translate("+ layerPoints.x +","+ layerPoints.y +")";
        }
    )
}
drawAndUpdateEventCircles();
      map.on("moveend", drawAndUpdateEventCircles);

如果我CONSOLE.LOG d.latLong之内drawAndUpdateEventCircles功能,它读取反复相同的纬度/经度对(从最后一个条目allSFEvents),并且因此仅一个映射单数点。所以我想知道为什么我无法将forEach函数中的d.latLong传递给drawAndUpdateEventCircles函数?感谢所有提前。

0 个答案:

没有答案