如何在传单地图上绘制具有不同样式的几行？

Question

我将这些行称为：

<div ng-repeat="APIDetails in OauthSwaggerData.paths['/key']"> 

和这些功能：

    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);和lines1传播到不同的起点，但它们都是黄色而不是红色。

见图：

更新

我看到我不适合传单对象的json。 lines2会返回route.properties["type"]。

为什么解析失败？

undefined

Answer 1

您的代码似乎符合您的期望：http://jsfiddle.net/ve2huzxw/181/

请注意，您还可以简化代码。 L.geoJson factory可以直接管理您的routesServer GeoJSON对象数组，并接收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/