在OpenLayers中绘制标记之间的线条

时间:2016-01-19 11:02:55

标签: php openlayers openstreetmap

map = new OpenLayers.Map("Map");
var maplin         = new OpenLayers.Layer.OSM();
map.addLayer(maplin);

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
$.each(myVariable, function(i,myVariable){


        var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( myVariable.lon,myVariable.lati ).transform(fromProjection, toProjection),

            {description:myVariable.description} ,
            {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );
        vectorLayer.addFeatures(feature);

        map.addLayer(vectorLayer);

        map.setCenter(feature, zoom);

    });

这是我用于显示地图上的位置的代码我使用ajax从数据库中获取位置 但现在我想在这些位置之间画线

1 个答案:

答案 0 :(得分:1)

注意:您的代码建议使用openlayer地图,并根据我在下面的代码示例。

以下是一个例子:

var lineLayer = new OpenLayers.Layer.Vector("Line Layer"); 

map.addLayer(lineLayer);                    
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));                                     
var points = new Array(
   new OpenLayers.Geometry.Point(lon1, lat1),
   new OpenLayers.Geometry.Point(lon2, lat2)
);

var line = new OpenLayers.Geometry.LineString(points);

var style = { 
  strokeColor: '#0000ff', 
  strokeOpacity: 0.5,
  strokeWidth: 5
};

var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
lineLayer.addFeatures([lineFeature]);

这里,map是你的地图对象, lon lat 是浮动值。