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
        }})
    });

2 番目: 特定のパラメーター (${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]);.