if-statement - 传单中基于颜色折线的geojson属性
问题描述
我正在尝试根据某些条件设置(颜色)我的传单折线(显示轨迹的 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>
解决方案
就像您说的那样,您将样式添加到早期。将您的代码更改为:
//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);
推荐阅读
- json - 如何使用arduino pro mini连续读取gps数据
- c - 如何让多个子进程暂停,直到发送信号
- unix - 如何在 Unix 的哪个文件夹中找到“错误”这个词?
- jquery - 如何在引导日期选择器中启用过去的日期
- mysql - 在不使用 IN 运算符的情况下将一组值传递给 WHERE 子句
- python - Python:通过命令提示符解析嵌套的数字列表
- ruby-on-rails - 如何在rails中使用多模型,一个控制器
- javascript - HTML动态表格不显示下拉按钮
- javascript - 在 webpack 中使用导入内联单个 javascript 文件
- system-verilog - 编译同名的verilog包