如何使用OpenLayer顯示折線

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>

輸出量

在此處輸入圖片說明

但是，當我使用谷歌地圖時，它不起作用，即只是向我顯示簡單的地圖。

<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>

輸出

在此處輸入圖片說明

為什么這不起作用，我該如何工作。 如果我直接使用Google Map API而不是openlayer，那么我可以獲得預期的結果。

Answer 1

Google地圖使用Mercator（EPSG：900913）坐標，但是您的幾何圖形處於未投影的地理坐標（EPSG：4326）中。 結果，該線將是赤道中的一個極小的點。

您應該將其轉換為Mercator（已經使用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 個解決方案

解決方案1
2 已采納 2014-06-04 18:31:01

如何使用OpenLayer顯示折線

問題描述

1 個解決方案

解決方案1 2 已采納 2014-06-04 18:31:01

解決方案1
2 已采納 2014-06-04 18:31:01