传单中基于颜色折线的 geojson 属性

Question

我正在尝试根据某些条件设置我的传单折线（显示轨迹的 geojson 对象）的样式（颜色）。条件是平均速度，它是根据geojson自带的时间戳计算的。感谢这个论坛，我设法按预期显示了这条线。但是样式不起作用。示例数据的平均速度为 1.3 km/h，因此该线应为红色。但它是蓝色的。也许那是因为折线是在计算速度之前创建的。但是稍后添加该代码行不起作用，因为距离的计算取决于该折线。或者我的错误是什么？任何提示如何正确设置样式？提前致谢。这是一个简化的代码；

<html>
  <head>  
    <!-- Load leaflet library and use its styling css        -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js">  </script>
    
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="js/measuredDistance.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />  //not included
    
  </head>
  <body>
    <div class="pagewrapper">
        <div id="map"></div>
        <button onclick="myFunction()">Click me</button>
    </div>
    <script type="text/javascript">

    //add map and set view
    var map =  L.map('map').setView([48.8,13.03],6);
      
    // add background layer "opentopomap"
    var backgroundlayer = L.tileLayer ('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png');
    map.addLayer(backgroundlayer);
  
    //get geojson data
var geojsondata = {
    "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": 1,
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.0908549980086,
          47.812500986468
        ]
      },
      "properties": {
        "Source": 2,
        "ele": 399.0844,
        "time": 1174816297000,
        "ObjectId": 2
      }
    },
    {
      "type": "Feature",
      "id": 2,
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.0408219980085,
          47.812484986468
        ]
      },
      "properties": {
        "Source": 2,
        "ele": 397.1617,
        "time": 1174826310000,
        "ObjectId": 2
      }
    }]};


    function myFunction() {
             visualizer.sendDataToMap(geojsondata)
        };

    //---------------------------------------------               
//styling function for polyline, depending on velocitiy of track     
function restylemap(feature) {
        if(velocitiy <= 4) {
              return{color: "red"}
            }
          else if (velocitiy > 4 && velocitiy <= 20) {return 
            {color:"green"}
            }
          else {return {color:"grey"}}
            };
      
      // function to calculate total time of track
      function sum(array) {
      return Number(array[array.length - 1] - Number(array[0]));
      };
//----------------------------------------------------
        
var visualizer = {};
         visualizer.sendDataToMap = function (jsonData) {{
          L.geoJson(jsonData 
          )};
        // read coordinates from geojson object
          const latlngs = jsonData.features.map((feature) => [
            feature.geometry.coordinates[1],
            feature.geometry.coordinates[0]
          ]);
           //access time information from geojson object
          const time = jsonData.features.map((feature) => [
            feature.properties.time
          ]);
          
          //create polyline from coordinates and style according to function "restylemap"
          var linie = L.polyline(latlngs, {style:restylemap});
          
          //calculate total distance of polyline
          var lengthInMeters = linie.measuredDistance();
          
          //remove non numeric chars ("km") from string 
          var distance = lengthInMeters.replace(/[^\d.-]/g, ''); 
          
          //calculate time between first and last timestamp
          var elapstime = (sum(time) / 1000 / 60 / 60);
          
          //Calculate average speed on track
          var velocitiy = distance/elapstime

          //add polyline to map
          linie.addTo(map);

          // center map to polyline
          map.fitBounds(linie.getBounds()); 

          //avespeed.toFixed(1)
          alert("Velocitiy: "+velocitiy.toFixed(1)+" km/h");
        };

    </script>
  </body>
</html>

Answer 1

就像你说的，你把样式加早了。将您的代码更改为：

//styling function for polyline, depending on velocitiy of track     
function restylemap(velocitiy) {  // <-------- NEW
        if(velocitiy <= 4) {
              return{color: "red"}
            }
          else if (velocitiy > 4 && velocitiy <= 20) {return 
            {color:"green"}
            }
          else {return {color:"grey"}}
};

    //create polyline from coordinates and style according to function "restylemap"
          var linie = L.polyline(latlngs);  // <-------- NEW
          
          //calculate total distance of polyline
          var lengthInMeters = linie.measuredDistance();
          
          //remove non numeric chars ("km") from string 
          var distance = lengthInMeters.replace(/[^\d.-]/g, ''); 
          
          //calculate time between first and last timestamp
          var elapstime = (sum(time) / 1000 / 60 / 60);
          
          //Calculate average speed on track
          var velocitiy = distance/elapstime

          // Change line color
          linie.setStyle(restylemap(velocitiy)); // <-------- NEW

          //add polyline to map
          linie.addTo(map);

传单中基于颜色折线的 geojson 属性

color polyline based geojson property in leaflet

if-statement

colors

geojson

leaflet