JavaScript - генерация данных и обновление в определенные промежутки - PullRequest
Новая
       11

JavaScript - генерация данных и обновление в определенные промежутки

0 голосов
/ 09 мая 2019

Я работаю над проектом в JavaScript.Я строю интерактивную карту в Leaflet, на которой я буду визуализировать данные.В настоящее время нет реальных данных для визуализации, мне просто нужно продемонстрировать, как они должны работать.Я визуализирую данные с помощью Data Visualization Framework для Leaflet.Значение отображается маркером Radial meter.В настоящее время я генерирую данные в маркер с помощью функции Math.random () .Как это выглядит на карте: Маркер радиального метра

Как выглядит мой код: 

    //here are my data
    geojsondata = {
     "type": "FeatureCollection",
     "features": [{
       "type": "Feature",
       "properties": {
         "name": "1",
         "value": Math.random() * 200
      },
      "geometry": {
        "type": "Point",
        "coordinates": [315, -360]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "2",
        "value": Math.random() * 200

      },
      "geometry": {
        "type": "Point",
        "coordinates": [360, -360]
       }
      }
     ]
    }


    //here I am adding markers to map
    var marker = new L.geoJSON(geojsondata, {
     pointToLayer: function(feature, latlng) {
      return new L.RadialMeterMarker(latlng, {
       data: {
        'Value': feature.properties.value
       },
      chartOptions: {
        'Value': {
          displayName: 'Value',
          displayText: function (value) {
            return value.toFixed(1);
          },
          color: 'hsl(240,100%,55%)',
          fillColor: 'hsl(240,80%,55%)',
          maxValue: 200,
          minValue: 0
        }
      },
      displayOptions: {
        'Value': {
          color: new L.HSLHueFunction(new L.Point(0,minHue), new L.Point(200,maxHue), {outputSaturation: '100%', outputLuminosity: '25%'}),
          fillColor: new L.HSLHueFunction(new L.Point(0,minHue), new L.Point(200,maxHue), {outputSaturation: '100%', outputLuminosity: '50%'})
        }
      },
      fillOpacity: 0.8,
      opacity: 1,
      weight: 0.5,
      radius: 20,
      barThickness: 15,
      maxDegrees: 360,
      rotation: 0,
      numSegments: 10
        });
      },
    });
    marker.addTo(map);

Что мне нужноdo:
Мне нужно сгенерировать значение во временных интервалах (например, 5 секунд) и одновременно обновить карту, чтобы я мог видеть новое значение в маркере карты.

То, что я пробовал:

  1. Я пытался создать функцию с setInterval: Данные генерируются, но значение в маркере равно 0

  2. Я пытался поместить целые геоджондаты в функцию с помощью setInterval, а также создать маркеры с помощью функции setInterval .: Данные генерируются, маркеры обновляются, но они укладываются

Я думаю, что я близок к тому, что мне нужно во втором коде.Но я не знаю, как удалить предыдущий маркер, чтобы они не накладывались друг на друга.Кто-нибудь может мне помочь с этим?Спасибо.

1 Ответ

0 голосов
/ 09 мая 2019

Чтобы удалить маркеры, вам нужно сохранить ссылку на них или слой.

Очистить слои маркера (листовка)
это хороший пример создания слояслой, который позволяет легко удалить маркеры на потом. документы

...