0

Web ページから JSON ファイルを読み取り、ファイルに含まれるルートを OpenLayers のマップ上に表示しようとしています。私に似た別の例を見つけました。 JavaScript を使用して URL から JSON をフェッチする方法は? 、しかし、私はそれを機能させることができませんでした。

たとえば、次のような URL 文字列を作成します。

http://router.project-osrm.org/viaroute?rebuild=1&loc=43.46711564169348,-3.880102031707764&loc=43.4669443349282,-3.862788677215576&output=json

この Web ページは、エンドポイントに到達するために従わなければならないすべてのポイントを含む JSON ファイルを返す必要があります。私はこの例で試したので、これが機能することを知っています:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Open Space Web-Map builder Code</title>
</head>
<body>
    <div class="header-content">
    [
    <a class="result-link" onClick="document.location.href='http://router.project-    osrm.org/viaroute?  rebuild=1&amp;loc=43.46711564169348,-3.880102031707764&amp;loc=43.4669443349282,-3.862788677215576&amp;output=json';">Generar ruta</a>
    ]
    </div>
</body>
</html>​

以下に示すように、JSON ファイルを返します。しかし、自分のページを使おうとするとうまくいきません。JSONファイルを読み取るこの関数があります：

function pintarRutaCamion() {
    capaRuta = new OpenLayers.Layer.Vector("capaRuta");
    var style_green = {
        strokeColor: "#00FF00",
        strokeOpacity: 1,
        strokeWidth: 6
    };
    var pointRuta = [];

    alert(rutaCompleta); //show the complete url
    JQ.getJSON(rutaCompleta, function(puntosRuta) {
        alert(puntosRuta.route_geometry.length); //show size of returned json file
        for (i = 0; i < puntosRuta.route_geometry.length; i++) {
            coordenadas = new OpenLayers.LonLat(puntosRuta.route_geometry[i][1], puntosRuta.route_geometry[i][0]).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            pointruta.push(coordenadas);
        }

    });

    //create a polyline feature from the array of points 
    var lineString = new OpenLayers.Geometry.LineString(pointRuta);
    var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);
    capaRuta.addFeatures([lineFeature]);
    //add it to the map 
    map.addLayer(capaRuta);
}​

JSON ファイルは次のようになります。

{"version": 0.3,
 "status": 0,
 "status_message": "Found route between points",
 "route_geometry": [[43.46716, -3.87987],[43.46668, -3.87963],[43.46706, -3.87761],[43.46593, -3.87740],[43.46571, -3.87552],[43.46559, -3.87515],[43.46553, -3.87512],[43.46549, -3.87504],[43.46548, -3.87496],[43.46550, -3.87487],[43.46554, -3.87482],[43.46558, -3.87433],[43.46533, -3.87210],[43.46535, -3.87185],[43.46546, -3.87128],[43.46592, -3.86911],[43.46598, -3.86859],[43.46593, -3.86824],[43.46589, -3.86818],[43.46587, -3.86808],[43.46588, -3.86800],[43.46581, -3.86780],[43.46560, -3.86761],[43.46545, -3.86756],[43.46526, -3.86756],[43.46517, -3.86760],[43.46511, -3.86760],[43.46502, -3.86753],[43.46498, -3.86743],[43.46497, -3.86734],[43.46499, -3.86718],[43.46510, -3.86711],[43.46521, -3.86696],[43.46530, -3.86675],[43.46547, -3.86606],[43.46569, -3.86504],[43.46639, -3.86166],[43.46716, -3.86194],[43.46698, -3.86278]],
 "route_instructions": [["10","",56,0,155,"56m","SE",203.5],["7","",167,1,242,"167m","E",281.06],["3","Calle Polvorín",126,2,182,"126m","S",189.18],["7","CA-231",185,3,131,"185m","E",262.42],["11-2","CA-231",536,10,350,"536m","E",277.7],["11-1","CA-231",82,20,52,"82m","E",250.51],["11-2","Calle del Somo",36,31,19,"36m","NE",310.15],["1","Calle de El Somo",426,33,236,"426m","E",285.81],["7","Calle de Antonio Nebrija",88,36,127,"88m","N",17.56],["7","Calle de Manuel Cacicedo",70,37,76,"70m","W",103.84],["15","",0,38,0,"","N",0.0]],
 "route_summary": {"total_distance": 1890,
                   "total_time": 179,
                   "start_point": "",
                   "end_point": "Calle de Manuel Cacicedo"},
 "via_points": [],
 "hint_data": {"checksum": -1013584035,
               "locations": ["xqyjHgAAAACbAAAAzwAAABj5Tb5MZ9s_XFNCAG0U-v9", "WVr_FtzAKgAzAQAAaAAAAK5H_5Np-ec_SlNCABob-v9"]},
 "transactionId": "OSRM Routing Engine JSON Descriptor (v0.3)"}

しかし、その機能の中に入ることは不可能です。何が起こるかわかりません。URL文字列に他の例のように書いてみdocument.location.href=ましたが、これも失敗します。これが機能しない理由を誰でも提案できますか?

4

1 に答える 1

0

URLは次のようになります。

http://router.project-osrm.org/viaroute?rebuild=1&loc=43.46711564169348,-3.880102031707764&loc=43.4669443349282,-3.862788677215576&output=json

また、jsonp コールバックをサポートしていないようですので、Cross-Origin Resource Sharing のため、 $.getJSON で直接リクエストすることはできません。

この問題を回避するには、プロキシを使用する必要があります。たとえば、YQLを使用できます。

ここにあなたのURLの例があります

于 2012-04-28T10:04:43.680 に答える