格式 HERE 映射 API JSON 响应

Question

我在格式化等值线的 HERE 地图 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 响应，并使用以下代码提取 lat/long 坐标数组：

    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;

变量等值线看起来像这样（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

You need to iterate over each element and split, forming an array.

像这样，（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) 归功于

格式 HERE 映射 API JSON 响应

Format HERE Map API JSON Response

api

json

here-api