如何在OpenLayers 2的Google图层上叠加纬度/经度点?


13

我在OpenLayers的Google层顶部的纬度/经度中添加了矢量点。当我平移地图时,点正在移动。如果我将Google图层替换为WGS84中的图层,则不会发生这种情况。我怎样才能解决这个问题?

map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());

var gmap = new OpenLayers.Layer.Google(
            "Google Streets", 
            {numZoomLevels: 20}
           );
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

map.addLayers([gmap,pointLayer]);
map.setCenter(new OpenLayers.LonLat(16.373056, 48.208333), 5);

var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
pointLayer.addFeatures([pointFeature]);

我尝试遵循http://docs.openlayers.org/library/spherical_mercator.html,但没有成功。


我的问题与在同一页面上使用Jquery有关。如果我检索到所有对Jquery的引用,效果很好。

Answers:


11

您需要添加一些更改以获得所需的结果:

  1. 在您的Google图层中添加sphericalMercator:true属性,以便将矢量图层正确显示在您的Google基础图层之上(这是移动几何图形的原因)。
  2. 在您的Google图层中添加maxExtent属性,否则将无法正确设置地图的中心。下面显示的范围是墨卡托坐标中的世界范围。
  3. 正如user1795所说,您的点几何必须从4326重新投影到Web Mercator才能正确显示在地图上。
  4. 这也适用于setCenter LonLat,因此您也需要对其进行转换。

下面的工作代码:

            map = new OpenLayers.Map('map');
            map.addControl(new OpenLayers.Control.LayerSwitcher());

            var proj = new OpenLayers.Projection("EPSG:4326");

            var gmap = new OpenLayers.Layer.Google("Google Streets", {
                sphericalMercator: true,
                'maxExtent': new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
            });
            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

            map.addLayers([gmap, pointLayer]);
            var lonlat = new OpenLayers.LonLat(16.373056, 48.208333);
            lonlat.transform(proj, map.getProjectionObject());
            map.setCenter(lonlat, 5);

            var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
            point = point.transform(proj, map.getProjectionObject());
            //console.log(point);
            var pointFeature = new OpenLayers.Feature.Vector(point, null, null);
            pointLayer.addFeatures([pointFeature]);

效果很好!在转换方面,OpenLayers看起来并不是很直观。实际上是启用重新投影的“ spericalMercator”选项吗?
Underdark

1
同意它不是intuitive..the sphericalMercator选项增加了以下功能,它允许工作与其他预测数据- dev.openlayers.org/docs/files/OpenLayers/Layer/...
geographika

4

这是一个投影问题,您必须将点的投影转换为基础层的投影(此处为Google Map)。下面的代码应该工作

    map = new OpenLayers.Map('map');
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", 
        {numZoomLevels: 20}
    );
    var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

    map.addLayers([gmap,pointLayer]);
    map.setCenter(new OpenLayers.LonLat(16.373056, 48.208333), 5);

    var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
    point.transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
    var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
    pointLayer.addFeatures([pointFeature])

这是因为google map(球形墨卡托)的默认投影为900913,而4326中lonlat中的简单点的默认投影为。

请确保将点设置为(经度,纬度),而不是(经度,经度)。


添加转换会使该点在我的地图上消失。如果有所不同,我的OpenLayers版本是2.9.1。
Underdark

point.transform帮了我大忙!
Stefan

1

使用Google Maps JS API时,请谨慎使用版本。开发版本默认使用Google JS Maps API。检查页面:http : //code.google.com/apis/maps/documentation/javascript/basics.html#Versioning

Google Maps JS小组也修复了错误。查看http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

将来,请在问题中提及Google Maps API版本。v3.3在Openlayers上没有任何问题,大多数开发人员都使用过。


Senthil,您好:我不确定Google Maps JS API版本如何影响OpenLayers的问题。
Underdark

嗨,Underdark,我在Openlayers中使用v3.4时遇到了问题,然后专门使用3.3,并且在使用Google Maps干线版本时,随着开发的进行,结果是不可预测的。您是否尝试过版本控制?即使您使用的是openlayers,Google也会以此为基础映射api。
Senthil

0

我认为这是一个预测问题。

您是否尝试过报告地图平移时点的质心?您也许能够查看某物是否正在改变。

但是从我对您的代码的了解中,您可以将WGS84点添加到其他corordsys


顺便说一句,您是否尝试过查询您所拥有的地图的投影,以查看其实际设置为?

最后,对不起,但是如果您遇到投影问题,有一种方法可以改变您的观点:var a = new OpenLayers.LonLat(3,53).transform(ll,new OpenLayers.Projection('EPSG:900913')) ;
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.