使用JavaScript在OpenLayers中绘制一条带有一条线的路径

时间:2010-04-29 08:56:20

标签: javascript map openlayers

我已经看到了如何绘制线条的示例here,但示例仅显示了如何使用鼠标进行操作,点击。

我想要做的是在给定经度和纬度坐标列表的情况下使用JavaScript手动绘制线

我无法处理上述链接中提供的来源的原因是因为他们只在该功能上调用activate,然后让用户指向并点击地图。

有没有人以编程方式在OpenLayers地图上绘制路径?

我想要做的就是:http://openspace.ordnancesurvey.co.uk/openspace/example4.html,但不使用OpenSpace。

3 个答案:

答案 0 :(得分:53)

您需要使用LineString对象

以下是一个例子:

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是您的地图对象,而lonlat是浮动值。

答案 1 :(得分:1)

通过javascript使用openlayers

this page is a classic example动画。

它使用过滤策略来定义在什么时刻显示的内容。

完整的javascript。

答案 2 :(得分:0)

我以前从未做过,但我知道OpenSteetMap可以做到。例如:

http://www.openstreetmap.org/?way=23649627

不知道完成代码会有多困难。