使用Leaflet播放器在每个标记上弹出Leaflet弹出窗口

Question

我有一个类似于GEOJson的文件

  {
    "type": "Feature",
     "geometry": {
       "type": "MultiPoint",
       "coordinates": [
          [
            -123.77252789,
             44.37857221
          ],
          [
            -123.77317087,
            44.37864694
         ],
         [
          -123.77383407,
          44.37875853
        ],
        [
         -123.7744676,
         44.37886305
       ]
    ]
   },
    "properties": {
      "time": [
       1369786338000,
       1369786340000,
       1369786342000,
       1369786344000
     ],
     "Temp":[70F,60F,72F,80F],
     "Title": "Car1"
    }
  }

使用 Leaflet Playback，我能够使标记移动，但我希望每个标记在移动时都有自己的弹出窗口显示时间和温度。我尝试过像这样做：

  var playbackOptions = {
    marker: function (featureData) {
                return {
                    getPopup: function (feature) {
                        return "Temp: " + feature.properties.Temp + "at " +  feature.properties.time;
                    }
                };
            }
   };

 var playback = new L.Playback(map, demoTracks, null, playbackOptions); 

但它一直给我每个标记的所有时间和温度数组，而不是每个标记的不同时间和温度。我想知道如何使每个弹出窗口显示其信息。

- Tenz

Answer 1

简短回答：你无法做到。

这个库的问题在于每个特征都是MultiPoint特征。选项对象中的每个对featureData/feature/whatever的引用都是完全相同的整个MULTIPOINT特征，而不是数组中当前索引处的特定"feature"。https://github.com/hallahan/LeafletPlayback#options 另一个问题是弹出窗口中的坐标是硬编码的。

if (this._popup) {
    this._popup.setContent(
      this.getPopupContent() + this._latlng.toString()
    );
  }

我有一个朋友也在这方面挣扎，我建议他最好使用 FeatureCollection GeoJSON 数据编写自己的实现，但是他没有经验，正在寻找一些现成的 OOTB 解决方案。

更新： 我稍微调整了代码，公开了当前索引，这样您就可以从源 GeoJSON 中获取任何内容。在示例中，我将弹出窗口的内容设置为包含当前索引处的高度，并根据其更改颜色。

这是一个 GIST： https://gist.github.com/danikane/f8490e62529f3cf64eb672d2e737b982 我同意，我的修改写得很糟糕，但无论如何，您都会明白我的意思 :)

- Daniel Kehlibarov

---

谢谢。让我试一试，然后会告诉你。 - Tenz

如果您能将此作为PR包含在库中，那将是非常好的。 - SeGa

我可以试试看。我看到有一些提交，但是如果我的更改有用的话，总体上可以被合并。不过，一个好的GeoJSON实现会更好。 - Daniel Kehlibarov

@SeGa的请求PR https://github.com/hallahan/LeafletPlayback/pull/75 - Daniel Kehlibarov