Как показать полилинию с помощью OpenLayer

Используя следующий код, я получаю желаемый результат, т.е. получаю полилинию на заданной широте, долготе

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

Выход

введите здесь описание изображения

Но когда я использую карту Google, она не работает, т.е. просто показывает мне простую карту.

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

выход

введите здесь описание изображения

Почему это не работает, как я могу заставить это работать. Если вместо openlayer я напрямую использую Google Map API, я могу получить желаемый результат.


javascript html openlayers
person Sunny    schedule 04.06.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Карта Google использует координаты Меркатора (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]);

Обратите внимание, что эта линия будет проведена в Африку, но ваша карта будет приближена к Индии. Чтобы увидеть эту линию, вам нужно уменьшить масштаб карты по сравнению с первоначальным видом.

person user1702401    schedule 04.06.2014