Question

我想在我的流星应用程序中添加一个动画线到我的地图框/传单地图（类似于这里可以看到的内容：D3, Leaflet animation）。目的是绘制连接两个点的大圆/短程线弧 - 不使用d3，我用以下代码绘制静态弧：

Template.explore.rendered = () ->

  L.mapbox.accessToken = 'ACCESS_TOKEN_MAPBOX'
  map = L.mapbox.map('map', 'MAP_ID', zoomControl: false)
  countryPair = CountryPairs.findOne()
    geojson = {
      'type': 'FeatureCollection'
      'features': [
        {
          'type': 'Feature'
          'geometry':
            'type': 'Point'
            'coordinates': [
              countryPair.country_a_longitude_dec
              countryPair.country_a_latitude_dec
            ]
          'properties':
            'name': 'Country A'
        }
        {
          'type': 'Feature'
          'geometry':
            'type': 'Point'
            'coordinates': [
              countryPair.country_b_longitude_dec
              countryPair.country_b_latitude_dec
            ]
          'properties':
            'name': 'Country B'
        }
      ]
    }
    markerLayer = L.mapbox.featureLayer(geojson).addTo(map)

    map.fitBounds markerLayer.getBounds(),
      paddingTopLeft: [
        30
        70
      ]
      paddingBottomRight: [
        600
        30
      ]

    # Code for geodesic
    start = 
      x: countryPair.country_a_longitude_dec
      y: countryPair.country_a_latitude_dec
    end = 
      x: countryPair.country_b_longitude_dec
      y: countryPair.country_b_latitude_dec
    generator = new (arc.GreatCircle)(start, end, name: 'Great Arc')
    line = generator.Arc(100, offset: 10)
    L.geoJson(line.json()).addTo map

此后我一直试图将d3与此代码集成，但是在拉入geojson变量时遇到了麻烦。使用先前发布的示例中的代码（http://bl.ocks.org/zross/2f2baa1699b8ae38c768），我将SVG附加到传单地图，如下所示：

Template.explore.rendered = () ->

    # Code as above...
    markerLayer = L.mapbox.featureLayer(geojson).addTo(map)

    svg = d3.select(map.getPanes().overlayPane).append('svg')
    g = svg.append('g').attr('class', 'leaflet-zoom-hide')

    d3.json geojson, (error, collection) ->
      transform = d3.geo.transform(point: projectPoint)
      d3path = d3.geo.path().projection(transform)
      lineFeatures = g.selectAll('path').data(collection.features).enter().append('path').attr('class', (d) ->
        d.properties.name
      ).attr('style', 'opacity:0.5')
      # Code continues as in example

但是，我得到了一个类型错误：Uncaught TypeError: Cannot read property 'features' of undefined在此行上失败：

lineFeatures = g.selectAll('path').data(collection.features).enter().append('path').attr('class', (d) ->
            d.properties.name
          ).attr('style', 'opacity:0.5')

我想知道d3.json函数是否在＆＃39; geojson＆＃39;之前被调用。数据集可用，但我正在努力纠正这个问题 - 任何帮助都会非常感激！

Answer 1

这不是一个适当的答案，但我没有评论的声誉（很奇怪）。

整合这两只野兽是一项非常痛苦的任务。我已经通过SVG Overlay Layer获得了一些结果。

要展示plunker。我希望它能有所帮助。

d3.js，mapbox / leaflet和meteor - 地图上的动画

1 个答案: