1

我有一个返回FeatureCollectionJSON 格式的 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)
});

我想将其转换为手动异步获取请求，作为其他内容的一部分（我正在显示路线并想做几个请求，每个路线一个，这样我就可以在计算时显示它们，避免很大的延迟）。

所以，我把上面的代码改成了下面的代码：

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看起来还不错，并且 features 变量似乎包含正确的对象，并且它们确实被添加到了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 回答