时间戳

首页 > 解决方案 > 根据滑块位置移动标记？

javascript - 根据滑块位置移动标记？

问题描述

我设法获得了一张工作地图，并设法将它与 Leaflet timedimension 滑块结合起来。接下来我要做的是在地图上获取一个移动标记，该标记根据脚本路径改变位置，例如日期 X 上的标记位于某些特定坐标上，但在日期 Y 上，标记向不同的脚本位置移动。

到目前为止，我已经设法在地图上找到了一个标记，但我不知道我必须做些什么才能让它移动。我查看了此处发布的各种示例，似乎最接近我需要实现的示例就是这个，但是代码指向外部 .xml 文件，我不知道我必须如何编码它可以工作，并且示例代码没有显示标记本身在 .html 文件中具有哪些变量。

我的问题是，是否甚至可以使用此“timeDimension”滑块移动标记，如果可以，有人可以指出我可以查看的一些示例代码吗？

有点无关紧要，如果我想要一个带有时间轴滑块的地图，可以在几年内围绕许多标记移动，那么我目前的设置是最好的吗？

这是我到目前为止的代码，

    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <title>Home</title>        
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
            <link rel="stylesheet" href="leaflet.timedimension.control.css" />
                <style>#map { height: 500px; }</style>
        </head>
    <body>

    <p style="text-align: center;"><strong><span style="font-size: 20px;">Heading test</span></strong></p>

    <!--Map with needed map scripts-->
    <div id="map" style="height: 75%; width: 100%"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.
    <script type="text/javascript" src="SliderScript.js"></script> //This is the Leaflet slider, just renamed

    <!--Here is a script for map overlay -->

    <!--Markers-->
    <script>
    var Icontest= L.icon({
        iconUrl: 'icons/testicon1.png',
        iconSize:     [40, 25], // size of the icon
        iconAnchor:   [0, 0], // point of the icon which will correspond to marker's location
    });

    L.marker([29, 57], {icon: Icontest},{draggable: true}).addTo(map); //Do I have to add something here to give it coordinates depending on date?
    </script>


    </body>
    </html>

这是 SliderScript.js，与本网站上的 example.js 文件相同。

// example.js
var map = L.map('map', {
    zoom: 10,
    center: [38.705, 1.15],
    timeDimension: true,
    timeDimensionOptions: {
        timeInterval: "2014-09-30/2014-10-30",
        period: "PT1H"
    },
    timeDimensionControl: true,
});

var wmsUrl = "http://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc"
var wmsLayer = L.tileLayer.wms(wmsUrl, {
    layers: 'sea_water_velocity',
    format: 'image/png',
    transparent: true,
    attribution: 'SOCIB HF RADAR | sea_water_velocity'
});

// Create and add a TimeDimension Layer to the map
var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer);
tdWmsLayer.addTo(map);


// example.js
var map = L.map('map', {
  zoom: 10,
  center: [38.705, 1.15],
  timeDimension: true,
  timeDimensionOptions: {
    timeInterval: "2014-09-30/2014-10-30",
    period: "PT1H"
  },
  timeDimensionControl: true,
});

var wmsUrl = "http://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc"
var wmsLayer = L.tileLayer.wms(wmsUrl, {
  layers: 'sea_water_velocity',
  format: 'image/png',
  transparent: true,
  attribution: 'SOCIB HF RADAR | sea_water_velocity'
});

// Create and add a TimeDimension Layer to the map
var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer);
tdWmsLayer.addTo(map);
<html>

<head>
  <title>Leaflet TimeDimension Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
</head>

<body>
  <div id="map" style="height: 100%; width: 100%"></div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
  <script type="text/javascript" src="example.js"></script>
  <!--Markers-->
  <script>
    var Icontest = L.icon({
      iconUrl: 'icons/testicon1.png',
      iconSize: [40, 25], // size of the icon
      iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
    });

    L.marker([29, 57], {
      icon: Icontest
    }, {
      draggable: true
    }).addTo(map); //Do I have to add something here to give it coordinates depending on date?
  </script>
</body>

</html>

标签： javascriptleafletslidermarkertimeline

解决方案

推荐阅读