将 topojson 加载到传单滑块中

Question

我是 js 新手，正在尝试映射。为了适应我的数据大小，我一直在尝试让 Leaflet Slider 使用 topojson 输入。

我发现自己卡在了如何使用 Omnivore 将数据调用和 sliderControl 正确嵌套在函数中。 Topojson 数据加载正确，只是不能使用滑块，很可能是我的语法问题。如果有人能提供一些帮助，我将不胜感激。

来自 brainsengineering 的原始 geojson 示例：http://jsfiddle.net/brainsengineering/nboo4ksg/

    var geojson;
$(document).ready(function() {
  $.getJSON("http://vamoss.brainsen.com/API/Get.aspx?q=5", function(geoJson) {
    geojson = L.geoJson(geoJson, {
      style: style,
      onEachFeature: onEachFeature
    }).addTo(map);

我在这里的尝试：http://jsfiddle.net/midihavoc/ktxgdmkn/

var topoLayer;
$(document).ready(function() {
    omnivore.topojson('https://api.myjson.com/bins/2whnb', null, function(topoLayer){
  topoLayer = L.geoJson(null, {
    style: style,
    onEachFeature: onEachFeature
  }).addTo(map);

Answer 1

omnivore.topojson 的 API 不同于 jQuery 的 $.getJSON：你不应该提供回调函数，而是选项（对应于你的 2ng 参数 null) 和一个 L.GeoJSON 图层组，它将填充检索到的特征（您构建回调的第 3 个参数）。

回调函数（如果有的话）可以在omnivore.topojson的.on("ready", callback) method中指定。

最后，您在回调参数中使用了相同的标识符 topoLayer 作为全局变量，因此您无法再在回调范围内访问后者（已隐藏）。

请注意，在原始示例中，他们使用 geojson 作为全局变量名称，并使用 geoJson 作为回调参数（注意大写 J）。

var topoLayer = L.geoJson(null, {
  style: style,
  onEachFeature: onEachFeature
}).addTo(map);

omnivore.topojson('https://api.myjson.com/bins/2whnb', {}, topoLayer).on("ready", function() {
  var sliderControl = L.control.sliderControl({
    position: "bottomleft",
    layer: topoLayer,
    range: false,
    showAllOnStart: false
  });

  console.log(topoLayer.getLayers().length);

  map.addControl(sliderControl);
  sliderControl.startSlider();
});

已更新 JSFiddle：http://jsfiddle.net/ktxgdmkn/14/

将 topojson 加载到传单滑块中

Loading topojson into leaflet Slider

javascript

leaflet

topojson