从geoJSON文件在Leaflet js中创建故事地图幻灯片

时间:2018-03-11 17:26:25

标签: javascript leaflet geojson

我已经在gis堆栈交换论坛上问了这个问题,但没有运气。我在这里转发,希望我能找到答案!

我正在尝试创建一个远足径的交互式Leaflet地图。沿着这条路线,我有一些“航路点”,在GeoJSON文件中表示为标记:

 var waypoints = [{ 
    "Name": "Cabane de Susanfe", 
    "Altitude": 2095, 
    "Text": "This is the first waypoint",
    "coordinates": [ 6.91246, 46.14939 ] 
    }, { 
    "Name": "Rhône Valley", 
    "Altitude": 457, 
    "Text": "This is the second waypoint",
    "coordinates": [ 7.0458, 46.13417 ]
    }, { 
    "Name": "Cabane de Sorniot", 
    "Altitude": 2064, 
    "Text": "This is the third waypoint",
    "coordinates": [ 7.09167, 46.16176 ] 
    }, {
    "Name": "Cabane du Demècre", 
    "Altitude": 2361, 
    "Text": "This is the fourth waypoint",
    "coordinates": [ 7.07314, 46.18744 ] 
    },
    ]

我想在一个单独的div中创建一个按钮,它会循环显示这些航点,并在侧面显示有关每个航点的信息,就像地图幻灯片一样。到目前为止,我已经设法创建了一个按钮,循环通过“航点”中的元素。数组,但如何让地图平移到新标记并显示信息?这是我到目前为止迭代数组元素的jquery代码:

    $(document).ready(function(){
      var i = 0;

      $("#button-next").on('click', function(){
         i = (i + 1) % waypoints.length;

         console.log(waypoints[i]);
    });
    });

我正在寻找的效果类似于CartoDB的odyssey.js幻灯片或jQuery slidemapper插件,但我认为可能比使用其中一个库完全重建地图更简单。

我是一名小册子和javascript的初学者。

0 个答案:

没有答案