Question

我有一个在JSON中返回FeatureCollection的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看起来没问题且功能变量似乎包含正确的对象，并且它们确实被添加到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"
}

Answer 1

原因是错误的投射。 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);

将OpenLayer矢量图层从自动更改为手动获取请求

1 个答案: