javascript - OpenStreetMap 在地图上添加标签

Question

我正在开发一个带有 openstreetmap 和 OpenLayers 的 webapp。我所做的是使用 JavaScript 在地图上渲染一条带有一些给定点的线，如下面的屏幕截图：

现在我想做的是在线上方显示一个标签，如下所示：

我不确定我是如何可以通过 JavaScript 实现这一点，我找不到任何有用的参考文档。以前有人做过，请分享一些经验。
谢谢！

Answer 1

尝试使用样式标签创建不透明（或零宽度）点。这是我基于Labeled Features Example的命题。（我现在无法测试它，所以要小心）。

首先：使用不可见点和一些参数创建新的矢量图层（因为样式设置可能会干扰当前图层的线条）：

var vectorLayer = new OpenLayers.Layer.Vector("Labeled points", {
    styleMap: new OpenLayers.StyleMap({'default':{
        // should be invisible, if not, set opaque
        strokeWidth: 0,
        pointRadius: 0,
        // label may have \n linebreaks
        label : "${label}",
        fontColor: "${fontColor}",
        fontSize: "12px",
        fontFamily: "Courier New, monospace",
        fontWeight: "bold",
        labelAlign: "${align}",
        labelXOffset: "${xOffset}",
        labelYOffset: "${yOffset}",
        labelOutlineColor: "white",
        labelOutlineWidth: 3
        }})
    });

第二：这是使用给定参数（${parameter}）创建特征的方法：

var newLabeledPoint = new OpenLayers.Geometry.Point(-101.04, 35.68);
var newLabeledFeature = new OpenLayers.Feature.Vector(newLabeledPoint );
    newLabeledFeature .attributes = {
        label: "Line 1",
        fontColor: 'blue',
        align: "cm",
        // positive value moves the label to the right
        xOffset: 50,
        // negative value moves the label down
        yOffset: -15
    };

最后：vectorLayer.addFeatures([newLabeledFeature]);。