Question

使用下面的代码我得到了我想要的结果，即我在给定的纬度，经度上得到折线

<html>
    <head>
      <title>OpenLayers Example</title>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
        </head>
        <body>
          <div style="width:100%; height:100%" id="map"></div>
          <script defer="defer" type="text/javascript">
            var map = new OpenLayers.Map('map');
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );



    var start_point = new OpenLayers.Geometry.Point(0,10);
    var start_point_1= new OpenLayers.Geometry.Point(0,15);
    var start_point_2= new OpenLayers.Geometry.Point(5,20);
    var end_point = new OpenLayers.Geometry.Point(30,0);
    var end_point_1 = new OpenLayers.Geometry.Point(40,0);

    var myTrip =[start_point, start_point_1, start_point_2 , end_point, end_point_1];
    var vector = new OpenLayers.Layer.Vector();
    vector.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(myTrip ))]);
    map.addLayers([vector]);


            map.addLayers([wms]);
            map.zoomToMaxExtent();
          </script>

    </body>
    </html>

输出

enter image description here

但是当我使用谷歌地图时，它不起作用，即它只是向我展示了简单的地图。

<html>
<head>
  <title>OpenLayers Example</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {numZoomLevels: 20}
            );

      var lonlat = new OpenLayers.LonLat(73.589,19.54).transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
          );

        var zoom = 7;



var start_point = new OpenLayers.Geometry.Point(0,10);
var start_point_1= new OpenLayers.Geometry.Point(0,15);
var start_point_2= new OpenLayers.Geometry.Point(5,20);
var end_point = new OpenLayers.Geometry.Point(30,0);
var end_point_1 = new OpenLayers.Geometry.Point(40,0);

var myTrip =[start_point, start_point_1, start_point_2 , end_point, end_point_1];
var vector = new OpenLayers.Layer.Vector();
vector.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(myTrip ))]);
map.addLayers([vector]);


        map.addLayer(wms);
        map.zoomToMaxExtent();
        map.setCenter(lonlat, zoom);
      </script>

</body>
</html>

输出

enter image description here

为什么这不起作用，我怎样才能做到这一点。如果不使用openlayer而直接使用Google Map API，我可以获得所需的结果。

Answer 1

Google地图使用墨卡托（EPSG：900913）坐标，但您的几何图形位于未投影的地理坐标中（EPSG：4326）。结果，该线在赤道上将是极小的点。

你应该将它转换为墨卡托（同样的事情已经完成了lonlat变量）：

var myTrip =[start_point, start_point_1, start_point_2 , end_point, end_point_1];
var vector = new OpenLayers.Layer.Vector();
var geom = new OpenLayers.Geometry.LineString(myTrip);
geom = geom.transform(
    new OpenLayers.Projection("EPSG:4326"),
    new OpenLayers.Projection("EPSG:900913")
);
vector.addFeatures([new OpenLayers.Feature.Vector(geom)]);
map.addLayers([vector]);

请注意，此线串将放置到非洲，但您的地图将缩放到印度。要查看该行，您必须从初始视图缩小地图。

如何使用OpenLayer显示折线

1 个答案: