Question

我遇到了从HERE Map API为等值线格式化JSON响应的问题。完整的HERE API JSON响应如下所示，包含一行的Lat / Long坐标，如下所示。

{
    "response": {
        "metaInfo": {
            "timestamp": "2017-03-03T23:40:34Z",
            "mapVersion": "8.30.68.151",
            "moduleVersion": "7.2.201709-111134",
            "interfaceVersion": "2.6.29"
        },
        "center": {
            "latitude": 34.603565,
            "longitude": -98.3959
        },
        "isoline": [
            {
                "range": 300,
                "component": [
                    {
                        "id": 0,
                        "shape": [
                            "34.6096802,-98.4147549",
                            "34.6096802,-98.4141541",
                            "34.6098518,-98.4136391",
                            "34.6101952,-98.4132957",
                            "34.6103668,-98.4127808",
                            "34.6101952,-98.4122658",
                            "34.6098518,-98.4119225",
                            "34.6098518,-98.4115791",
                            "34.6101952,-98.4112358",
                            "34.5998955,-98.4115791",
                            "34.6002388,-98.4126091",
                            "34.6005821,-98.4129524",
                            "34.6009254,-98.4139824",
                            "34.6019554,-98.4143257",
                            "34.6022987,-98.4153557",
....
                            "34.6081352,-98.4129524",
                            "34.6083069,-98.4134674",
                            "34.6083069,-98.4148407",
                            "34.6084785,-98.4153557",
                            "34.6089935,-98.4155273",
                            "34.6095085,-98.4154415",
                            "34.6096802,-98.415184",
                            "34.6096802,-98.4147549"
                        ]
                    }
                ]
            }
        ],
        "start": {
            "linkId": "+888249498",
            "mappedPosition": {
                "latitude": 34.6034836,
                "longitude": -98.3959009
            },
            "originalPosition": {
                "latitude": 34.603565,
                "longitude": -98.3959
            }
        }
    }
}

我将Leaflet中的等值线数据映射为多边形。我可以像这样手动完成，一切运作良好。

var polygon = L.polygon([
[34.6343994, -98.7664032],
[34.6357727, -98.76297],
[34.6385193, -98.7602234],
[34.6398926, -98.7561035],
[34.6385193, -98.7519836],
[34.6357727, -98.7492371],
[34.6357727, -98.7464905],
.....
[34.6302795, -98.7712097],
[34.6330261, -98.7718964],
[34.6343994, -98.7698364],
[34.6343994, -98.7664032]

]
            ).addTo(map);

我现在正在尝试自动化它，但无法将json输出转换为Leaflet的兼容格式。我可以进行API调用，捕获JSON响应，并使用以下代码提取纬度/经度坐标数组：

    function getJson(url) {
        return JSON.parse($.ajax({
            type: 'GET',
            data: '',
            url: url,
            dataType: 'json',
            global: false,
            async: false,
            success: function (data) {
                return data;
            }
        }).responseText);
    }

    var myJsonObj = getJson('https://isoline.route.cit.api.here.com/routing/7.2/calculateisoline.json?mode=fastest;car;traffic:disabled&jsonAttributes=1&rangetype=time&start=34.603565,-98.3959&app_id=id&app_code=codeg&range=1800');

var isoline = myJsonObj.response.isoline[0].component[0].shape;

变量isoline看起来像这样（一个lat / long坐标对的数组）但是我无法将它们放入Leaflet所需的数组数组中。

[
                                "34.6096802,-98.4147549",
                                "34.6096802,-98.4141541",
                                "34.6098518,-98.4136391",
                                "34.6101952,-98.4132957",
                                "34.6103668,-98.4127808",
                                "34.6101952,-98.4122658",
                                "34.6098518,-98.4119225",
                                "34.6098518,-98.4115791",
                                "34.6101952,-98.4112358",
                                "34.5998955,-98.4115791",
                                "34.6002388,-98.4126091",
                                "34.6005821,-98.4129524",
                                "34.6009254,-98.4139824",
                                "34.6019554,-98.4143257",
                                "34.6022987,-98.4153557",
    ....
                                "34.6081352,-98.4129524",
                                "34.6083069,-98.4134674",
                                "34.6083069,-98.4148407",
                                "34.6084785,-98.4153557",
                                "34.6089935,-98.4155273",
                                "34.6095085,-98.4154415",
                                "34.6096802,-98.415184",
                                "34.6096802,-98.4147549"
                            ]

感谢任何帮助重新格式化坐标看起来像这样

[
    [34.6343994, -98.7664032],
    [34.6357727, -98.76297],
    [34.6385193, -98.7602234],
    [34.6398926, -98.7561035],
    [34.6385193, -98.7519836],
    [34.6357727, -98.7492371],
    [34.6357727, -98.7464905],
    .....
    [34.6302795, -98.7712097],
    [34.6330261, -98.7718964],
    [34.6343994, -98.7698364],
    [34.6343994, -98.7664032]

    ]

可能有更好的方法将数据放入Leaflet，但是Polygon和Polyline是我能找到的唯一方法，它们需要数组数组中的坐标。

Answer 1

let polygonArray = [];

data.response.isoline.component.shape.forEach((elm) => {
  polygonArray.push(elm.split(','));
})

现在您的polygonArray可以接受传单

Answer 2

您需要迭代而不是每个元素和拆分，形成数组。

像这样，（ES6方式）

const newArray = array.map(a => a.split(',').map(Number));

或（非ES6方式）

var newArray = [];
array.forEach(function (a){ newArray.push(a.split(',').map(Number)); });

所以你的最终代码应该是这样的，

function getJson(url) {
  return JSON.parse($.ajax({
    type: 'GET',
    data: '',
    url: url,
    dataType: 'json',
    global: false,
    async: false,
    success: function (data) {
      return data;
    }
  }).responseText);
}

function parseJSONForPolygon(rawJsonArray) {
  var newArray = [];
  rawJsonArray.forEach(function (a) { newArray.push(a.split(',').map(Number)); });
  return newArray;
};

var myJsonObj = getJson('https://isoline.route.cit.api.here.com/routing/7.2/calculateisoline.json?mode=fastest;car;traffic:disabled&jsonAttributes=1&rangetype=time&start=34.603565,-98.3959&app_id=id&app_code=codeg&range=1800');

var isoline = parseJSONForPolygon(myJsonObj.response.isoline[0].component[0].shape);

.map(Number)功劳归功于 https://stackoverflow.com/a/15677905/923426

格式化HERE Map API JSON响应

2 个答案: