OpenStreetMap 在地图上添加标签答案

【问题标题】：OpenStreetMap add tag on mapOpenStreetMap 在地图上添加标签
【发布时间】：2013-04-09 16:30:03
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript map openlayers openstreetmap

【解决方案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]);。

【讨论】：