編集:問題はMapbox APIにないことが指摘されたため、質問を再フォーマットしました。
数日前の時点で、mapbox マッチング API を leaflet.js と組み合わせて使用するアプリケーションが、地球の反対側でポリラインの描画を開始しました。
本来あるべき道のように見えますが、リーフレットはそれを別の大陸に描きました。Mapbox マッチング API は、GEOJson 標準に従って次のような応答を返します。
{
"code": "Ok",
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": "e`s`YmyazuAg`@y]uo@ej@eQcOkFkEyCeCaYmUuFoMkWgOo[_ReGqDoGyDmVaPaU|RoDlDsa@z`@sTdSXJf@j@??Jr@Mp@ML[Z}@ZiAHgAK]MaJzJsUbWkSxRyHpHuLhLuFzFqDrDq[`\\oPrPyK|KmU|TuLzKyClCr@ZZf@Fj@Ij@e@b@zn@fZ}Zf]gCdKmHxQErC[jV",
"properties": {
"confidence": 0.45413768894813844,
"distance": 1366.4,
"duration": 243.3,
"matchedPoints": [
[13.658131, 45.532583],
[13.659851, 45.534127],
[13.661445, 45.535438],
[13.662397, 45.535398],
[13.663582, 45.534237],
[13.666378, 45.531441],
[13.666457, 45.529215]
],
"indices": [0, 1, 2, 3, 4, 5, 6]
}
}]
}
以下のコードを使用して leaflet.js でレイヤーを描画すると、間違った位置にポリラインが描画されます。
L.mapbox.mapmatching(geojson, options, function (error, layer) {
layer.addTo(map);
layer.setStyle({
color: '#3c8dbc',
weight: 4,
opacity: 0.8
});
//fit bounds to added layer
map.fitBounds(layer.getBounds());
結果は次のとおりです。
ポリライン自体はあるべき姿ですが、位置はそうではありません。問題は、Mapbox マッチング API が GEOJson 形式、つまり [経度、緯度] を返すのに対し、リーフレットは座標が [緯度、経度] の形式であることを期待していることだと推測します。
描画する前に応答の座標を手動で切り替える必要がありますか、それとも間違っていますか?
ありがとう。
編集 2: 問題は実際にはさまざまな形式にあるようです。詳細については、この投稿で見つけることができます 。返されたオブジェクトの座標の順序を変更するのは非常に面倒なので、これに対するエレガントなソリューションが大いに活用されます。