我将这些行称为:
loadMapLayer(lines1);
loadMapLayer(lines2);
routesLayerGroup = L.layerGroup(routesMap).addTo(map);
以及这些函数:
function loadMapLayer(routesServer) {
for (var i = 0; i < routesServer.length; i++) {
if (routesServer[i].properties["type"] == "old") {
addRoute(routesServer[i], astar_style);
}
if (routesServer[i].properties["type"] == "new") {
addRoute(routesServer[i], bidi_style);
}
}
}
function addRoute(route, style) {
routeMap = L.geoJson(route, {
style: style
})
routesMap.push(routeMap);
}
var astar_style = {
"color": "red",
"weight": 5,
"opacity": 0.65
};
var bidi_style = {
"color": "yellow",
"weight": 5,
"opacity": 0.65
};
我调试并看到调用了 addRoute(routesServer[i], astar_style); 和 addRoute(routesServer[i], bidi_style);，但是在我的 map 上，所有的路线都是黄色的。我该如何解决这个问题？
我已将 lines1 和 lines2 分散到不同的起点，但它们都是黄色而不是红色。
看图:
更新:
我看到我的 json 不适合传单对象。 route.properties["type"] 返回 undefined。
为什么会解析失败？
var lines2= [
{
"type": "LineString",
"stroke": "true",
"properties": {
"type": "new",
"alt_id": 0
},
"coordinates": [
[
-0.19260167,
51.60275078
],
[
-0.18776697865776057,
51.51378379618606
],
[
-0.1868361042991638,
51.51386350952752
],
[
-0.18610120486834886,
51.513949508589846
],
[
-0.1860126676721192,
51.5139587109798
],
[
-0.18503012435859684,
51.51407686278982
],
[
-0.1844715979628327,
51.512811327510235
],
[
-0.18438086668647774,
51.51260842537383
],
[
-0.18421945,
51.51219938
],
[
-0.18371567893492108,
51.51073654980558
],
[
-0.18367635639669866,
51.51051275309526
],
[
-0.18278586300375,
51.510576187561
],
[
-0.18001538515091456,
51.51099998178699
],
[
-0.17978213237246937,
51.511036465619824
],
[
-0.17754539181132,
51.511350689722
],
[
-0.17667213783413,
51.511469143954
],
[
-0.17605905,
51.5116603
],
[
-0.17599639,
51.51194254
],
[
-0.17595176,
51.5121633
],
[
-0.17576338,
51.51264908
],
[
-0.17526760982170084,
51.5127504306477
],
[
-0.17448749264235414,
51.512204418972296
],
[
-0.17366204281806927,
51.51184552510889
],
[
-0.17229427780151832,
51.51200799788328
],
[
-0.16879990859832764,
51.51236051966681
],
[
-0.1676648163893128,
51.51245737406541
],
[
-0.1680470167036,
51.513849950881
],
[
-0.16816666875569,
51.513895844874
],
[
-0.16806539030114,
51.513971712699
],
[
-0.16809616949711467,
51.514138665582394
],
[
-0.1670313325182289,
51.514318938428715
],
[
-0.16644342299303297,
51.51441707946363
],
[
-0.16557087028261,
51.515078135345
],
[
-0.1648144873404,
51.515515453665
],
[
-0.1645753,
51.51564283
],
[
-0.16412506782526948,
51.51588568011996
],
[
-0.16395137600442822,
51.51595497980128
],
[
-0.16371551862975017,
51.51601826243177
],
[
-0.16363422357553456,
51.51604007459718
],
[
-0.16248937,
51.51625975
],
[
-0.1618248006248185,
51.51636682729078
],
[
-0.16144195106065864,
51.516433011832596
],
[
-0.16079458,
51.51653877
],
[
-0.16049632,
51.51658803
],
[
-0.16013511,
51.51664799
],
[
-0.15952000080734252,
51.516760840000025
],
[
-0.15903941,
51.51683111
],
[
-0.15857268,
51.51690964
],
[
-0.15818745419376345,
51.51697458112003
],
[
-0.15752605,
51.51708608
],
[
-0.15710946680072266,
51.51715610050016
],
[
-0.15539842,
51.51744437
],
[
-0.1547544976616,
51.517548545154
],
[
-0.15355205591518,
51.517754494854
],
[
-0.15284529383976753,
51.51787800540975
]
]
},
最佳答案
您的代码似乎符合您的预期:http://jsfiddle.net/ve2huzxw/181/
请注意，您还可以简化代码。 L.geoJson factory可以直接管理 GeoJSON 对象的 routesServer 数组，并接收一个 style 函数，该函数将 feature 作为单个参数。
function loadMapLayer(routesServer) {
routeMap = L.geoJson(routesServer, {
style: function(route) {
return route.properties["type"] == "old" ?
astar_style : bidi_style;
}
})
routesMap.push(routeMap);
}
关于javascript - 如何在传单 map 上画出几条风格各异的线条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35774274/