格式化 HERE Map API JSON 响应答案

【问题标题】：Format HERE Map API JSON Response格式化 HERE Map API JSON 响应
【发布时间】：2023-03-16 11:25:01
【问题描述】：

我在格式化来自 HERE 地图 API 的 JSON 响应以获取等值线时遇到问题。完整的 HERE API JSON 响应如下所示，其中包含一条线的纬度/经度坐标，如下所示。

{
    "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 看起来像这样（一个纬度/经度坐标对数组），但我无法根据 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 是我能找到的唯一方法，它们需要数组数组中的坐标。

【问题讨论】：

标签： json api here-api

【解决方案1】：

您需要迭代每个元素并拆分，形成一个数组。

这样，（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

【讨论】：

+1 谢谢！我发现我还需要从纬度/经度坐标中删除双引号。使用有什么问题：isoline = JSON.stringify(isoline).replace(/['"]+/g, '') 然后 JSON.parse 在添加到 Leaflet 之前？

【解决方案2】：

let polygonArray = [];

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

现在您的polygonArray 将被传单接受

【讨论】：