Question

我正在使用JavaScript进行项目。我正在Leaflet中构建交互式地图，在该地图上我将可视化数据。当前没有可视化的真实数据，我只需要演示其应如何工作。我正在使用Data Visualization Framework for Leaflet可视化数据。数值由径向计标记显示。我目前正在使用函数 Math.random（）将数据生成到标记中。它在地图上的外观： Radial meter marker

我的代码如下：

    //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);

我需要做什么：
我需要在时间间隔（例如5秒）中生成值，并同时刷新地图，以便可以在地图标记中看到新值。

我尝试过的事情：

我试图用setInterval创建函数： Data are generated, but value in marker is 0
我试图通过setInterval将整个geojsondata放入函数中，还尝试通过setInterval函数创建标记。 Data are generated, markers are refreshing, but they are stacking

我认为我已经接近第二个代码中的需求了。但我不知道如何删除以前的标记，以防止它们堆叠在彼此的顶部。谁能帮我这个忙吗？谢谢。

Answer 1

要删除标记，您需要保留对它们或图层的引用。

Clear Marker Layers (Leaflet )
这是制作图层图层的一个好例子，该图层图层使您可以轻松删除标记以供以后使用。 docs

JavaScript-生成数据并定期刷新

1 个答案: