1

FeatureCollectionJSON でa を返す Web サーバーがあります。以下のコードを使用してこれを取得していましたが、これは完全に機能します。

var vectorLayer = new OpenLayers.Layer.Vector('geoJSON', {
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: '<%= Url.Action("Vectors", "Maps") %>',
        format: new OpenLayers.Format.GeoJSON()
    }),
    styleMap: new OpenLayers.StyleMap(style)
});

これを別の一部として手動の async get リクエストに変換したい (ルートを表示していて、ルートごとに 1 つずつ、いくつかのリクエストを実行したいので、計算されたとおりに表示し、大きな遅延を回避できます)。

したがって、上記を以下のコードに変更しました。

OpenLayers.Request.GET({
    url: '<%= Url.Action("Vectors", "Maps") %>',
    async: true,
    success: function(e) {
        var features = new OpenLayers.Format.GeoJSON().read(e.responseText);
        vectorLayer.addFeatures(features);
    }
});

ただし、コールバックが呼び出されたにもかかわらずこれを実行するとe.responseText、正常に見え、機能変数に正しいオブジェクトが含まれているように見え、それらがに追加さvectorLayerれ、間違った場所に表示されます。原点のすぐそば。OSM の最大ズームでは、イギリス中に散らばっているはずなのに、互いにほとんど離れていません。

手動の GET に変更してから、間違った場所に表示される理由は何ですか?

現在のコード リストについては、以下を参照してください。

var map, layer;
map = new OpenLayers.Map(element.id);
baseLayer = new OpenLayers.Layer.OSM('Simple OSM Map');


var context = {
    getColor: function(feature) {
        return feature.attributes['Colour'];
    },
    getImageURL: function(feature) {
        return feature.attributes['ImageURL'];
    },
    getLabel: function(feature) {
        return feature.attributes['Label'];
    }
};

var template = {
    externalGraphic: '${getImageURL}',
    pointRadius: 5,
    strokeWidth: 3,
    strokeColor: "${getColor}"
};



var style = new OpenLayers.Style(template, { context: context });

/*var vectorLayer = new OpenLayers.Layer.Vector('geoJSON', {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: '<%= Url.Action("Vectors", "Maps") %>',
format: new OpenLayers.Format.GeoJSON()
}),
styleMap: new OpenLayers.StyleMap(style)
});*/

var vectorLayer = new OpenLayers.Layer.Vector('geoJSON');
vectorLayer.styleMap = new OpenLayers.StyleMap(style);

OpenLayers.Request.GET({
    url: '<%= Url.Action("Vectors", "Maps") %>',
    async: true,
    success: function(e) {
        var features = new OpenLayers.Format.GeoJSON().read(e.responseText);
        vectorLayer.addFeatures(features);
    }
});

map.addLayers([baseLayer, vectorLayer]);
map.setCenter(
    new OpenLayers.LonLat(-4, 55).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
    ), 6
);

返される JSON の例 (動作してから変更されていません):

{ "features" : [ { "geometry" : { "coordinates" : [ -0.72766602400000002,
                51.273638529999999
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/ByBox.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ [ -0.82559629999999995,
                  51.296390000000002
                ],
                [ -0.72766602400000002,
                  51.273638529999999
                ],
                [ -0.82559629999999995,
                  51.296390000000002
                ]
              ],
            "type" : "LineString"
          },
        "properties" : { "Colour" : "#{72:x2}{241:x2}{152:x2}",
            "ImageURL" : null
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -0.82559629999999995,
                51.296390000000002
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/Home.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -0.41132172900000002,
                50.821081319999998
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/ByBox.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ [ -0.47245280000000001,
                  50.817610000000002
                ],
                [ -0.41132172900000002,
                  50.821081319999998
                ],
                [ -0.47245280000000001,
                  50.817610000000002
                ]
              ],
            "type" : "LineString"
          },
        "properties" : { "Colour" : "#{206:x2}{155:x2}{66:x2}",
            "ImageURL" : null
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -0.47245280000000001,
                50.817610000000002
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/Home.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ 0.074993041999999996,
                51.270947649999997
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/ByBox.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ [ 0.075924359999999996,
                  51.268300000000004
                ],
                [ 0.074993041999999996,
                  51.270947649999997
                ],
                [ 0.075924359999999996,
                  51.268300000000004
                ]
              ],
            "type" : "LineString"
          },
        "properties" : { "Colour" : "#{99:x2}{146:x2}{254:x2}",
            "ImageURL" : null
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ 0.075924359999999996,
                51.268300000000004
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/Home.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -0.24428876999999999,
                51.583668719999999
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/ByBox.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ [ -0.251608,
                  51.580390000000001
                ],
                [ -0.24428876999999999,
                  51.583668719999999
                ],
                [ -0.251608,
                  51.580390000000001
                ]
              ],
            "type" : "LineString"
          },
        "properties" : { "Colour" : "#{188:x2}{122:x2}{221:x2}",
            "ImageURL" : null
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -0.251608,
                51.580390000000001
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/Home.png"
          },
        "type" : "Feature"
      },
      { "geometry" : { "coordinates" : [ -1.4948717600000001,
                53.68926664
              ],
            "type" : "Point"
          },
        "properties" : { "Colour" : "#ffffff",
            "ImageURL" : "/360Scheduling/Content/Images/ByBox.png"
          },
        "type" : "Feature"
      }
    ],
  "type" : "FeatureCollection"
}
4

1 に答える 1

2

その理由は、間違った投影です。JSON ファイルのポイントは EPSG:4326 プロジェクションですが、OpenStreetMap は EPS:900913 です。

データを自動的に取得すると、OpenLayers は、マップとは異なる投影法にある場合、明らかに座標を変換します。

フィーチャをマップに追加する前に、フィーチャを変換する必要があります。

var features = new OpenLayers.Format.GeoJSON().read(e.responseText);
var transformedFeatures = [];
for(var i= 0; i < features.length; i++){
  transformedFeatures.push(features[i].geometry.transform(
     new OpenLayers.Projection("EPSG:4326"),
     new OpenLayers.Projection("EPSG:900913")
  ));
}
vectorLayer.addFeatures(transformedFeatures);
于 2012-09-28T09:08:22.897 に答える