javascript - 如何在传单 map 上画出几条风格各异的线条？

Question

我将这些行称为:

    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
            ]
        ]
    },

Answer 1

您的代码似乎符合您的预期: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);
}

演示:http://jsfiddle.net/ve2huzxw/183/