使用 webgl 绘制 LineString答案

【问题标题】：Draw LineString using webgl使用 webgl 绘制 LineString
【发布时间】：2017-01-23 18:50:41
【问题描述】：

如何在 Openlayers 3 地图上使用 WebGL 绘制 LineString？请指导。

我浏览了以下没有帮助的链接： http://openlayers.org/en/master/examples/icon-sprite-webgl.html http://openlayers.org/en/master/examples/symbol-atlas-webgl.html

【问题讨论】：

标签： webgl openlayers-3

【解决方案1】：

您可以轻松地将 Draw 交互添加到地图中，如一些 Openlayers 3 示例所示：

https://openlayers.org/en/latest/examples/draw-features.html

https://openlayers.org/en/latest/examples/draw-and-modify-features.html

https://openlayers.org/en/latest/examples/draw-freehand.html

您只需使用共享矢量源创建矢量层和绘制交互，并将它们添加到地图中：

var drawSource = new ol.source.Vector({wrapX: false});
var drawVector = new ol.layer.Vector({
    source: drawSource
});
var draw = new ol.interaction.Draw({
    source: drawSource,
    type: 'LineString'
});
drawVector.setMap(map);
map.addInteraction(draw);

你会在这个jsfiddle中找到一个例子

【讨论】：

但是 lcarus，这个 LineString 会在 CPU 或 GPU 中执行吗？我想要 Webgl 编码，因为这将确保在 GPU 而不是 CPU 中运行。
我没有指定这一点，因为它没有在您的问题中描述。如果您查看示例代码，所有功能、样式、源和图层都是以正常方式创建的，唯一改变的是 ol.renderer,Type，当我们创建地图时它被设置为 'webgl'。我们在交互中所做的基本上是添加一个具有正常特征的新矢量图层，就像我们在 Openlayer 3 站点示例中找到的东西一样。
对不起，实际上我只在标题中提到了“使用 webgl”。忘记在问题描述中提及了。
@user6730740 没关系。只是交互是像示例那样向地图添加功能。因此，如果另一层在 webgl 中呈现（正如它应该做的那样），我们的新 lineString 也会很好。但是，如果您想模仿示例功能，您可以在 ol.interaction.Draw 初始化中添加atlasManager: atlasManager。关于这个的性能，你应该使用基准来检查它。
我不希望将整个地图作为渲染器 -> webgl。你知道用下面的代码画线的方法吗： var canvas = document.createElement('canvas'); var gl = canvas.getContext("experimental-webgl"); …………