Javascript 如何使用OpenLayer显示多段线_Javascript_Html_Openlayers

Javascript 如何使用OpenLayer显示多段线

javascript html openlayers

Javascript 如何使用OpenLayer显示多段线,javascript,html,openlayers,Javascript,Html,Openlayers,使用下面的代码，我得到了我想要的结果，也就是说，我得到了给定纬度、经度上的多段线 <html> <head> <title>OpenLayers Example</title> <script src="http://openlayers.org/api/OpenLayers.js"></script> </head> <body>

使用下面的代码，我得到了我想要的结果，也就是说，我得到了给定纬度、经度上的多段线

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


OpenLayers示例
var map=newopenlayers.map（'map'）；
var wms=new OpenLayers.Layer.wms（“OpenLayers wms”，
"http://vmap0.tiles.osgeo.org/wms/vmap0“，{层：'基本'}）；
var start_point=新的OpenLayers.Geometry.point（0,10）；
var start_point_1=新的OpenLayers.Geometry.point（0,15）；
var start_point_2=新的OpenLayers.Geometry.point（5,20）；
var end_point=新OpenLayers.Geometry.point（30,0）；
var end_point_1=新的OpenLayers.Geometry.point（40,0）；
var myTrip=[start_point，start_point_1，start_point_2，end_point，end_point_1]；
var vector=新的OpenLayers.Layer.vector（）；
addFeatures（[new OpenLayers.Feature.vector（new OpenLayers.Geometry.LineString（myTrip）））；
map.addLayers（[vector]）；
map.addLayers（[wms]）；
zoomToMaxExtent（）；

输出

但当我使用谷歌地图时，它不起作用，也就是说，它只是向我展示简单的地图

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


OpenLayers示例
var map=newopenlayers.map（'map'）；
var wms=new OpenLayers.Layer.Google(
“Google Streets”，//默认值
{numZoomLevels:20}
);
var lonlat=新OpenLayers.lonlat（73.589,19.54）.转换(
新OpenLayers.Projection（“EPSG:4326”），//从WGS 1984转换而来
新OpenLayers.Projection（“EPSG:900913”）//到球形墨卡托
);
var=7；
var start_point=新的OpenLayers.Geometry.point（0,10）；
var start_point_1=新的OpenLayers.Geometry.point（0,15）；
var start_point_2=新的OpenLayers.Geometry.point（5,20）；
var end_point=新OpenLayers.Geometry.point（30,0）；
var end_point_1=新的OpenLayers.Geometry.point（40,0）；
var myTrip=[start_point，start_point_1，start_point_2，end_point，end_point_1]；
var vector=新的OpenLayers.Layer.vector（）；
addFeatures（[new OpenLayers.Feature.vector（new OpenLayers.Geometry.LineString（myTrip）））；
map.addLayers（[vector]）；
地图添加层（wms）；
zoomToMaxExtent（）；
地图设置中心（lonlat，zoom）；

输出

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

Google Map使用墨卡托（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]);