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

【问题标题】：Drawing a path with a line in OpenLayers using JavaScript使用 JavaScript 在 OpenLayers 中绘制一条带有线条的路径
【发布时间】：2011-02-13 17:22:02
【问题描述】：

我已经看到here 提供的关于如何画线的示例，但这些示例仅显示了如何使用鼠标通过单击来完成。

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

我无法使用上面链接中提供的源代码的原因是因为他们只是在该功能上调用activate，然后让用户指向并单击地图。

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

我想要做的正是这个：http://openspace.ordnancesurvey.co.uk/openspace/example4.html，但不使用 OpenSpace。

【问题讨论】：

标签： javascript map openlayers

【解决方案1】：

您需要使用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 是您的地图对象，lon 和 lat 是浮点值。

【讨论】：

我必须使用 new OpenLayers.Geometry.Point(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); 而不是 new OpenLayers.Geometry.Point(lon1, lat1)，因为我有 wsg84 坐标
好样品。 DrawFeature 实际上是不需要的，行“map.addControl(....DrawFeature...);”可以省略。

【解决方案2】：

this page is a classic example 的动画通过 javascript 使用 openlayers。

它使用过滤策略来定义在什么时间显示什么。

完整的 JavaScript 可用。

【讨论】：

【解决方案3】：

我以前从未自己做过，但我知道 OpenSteetMap 可以做到。例如：

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

不知道通过他们的代码工作会有多困难。

【讨论】：

是的，我确实看到了 OpenStreetMap 示例，但我正在尝试仅对 OpenLayers 进行此操作
好的。很抱歉不能帮你。