OpenLayersのラベルが機能しない

velvetytoast

私はopenlayersラベル機能を機能させることを試みており、次の例を作成しました。

<html>
<head>
  <title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
  <div style="width:100%; height:100%" id="map"></div>
  <script>
    var map = new OpenLayers.Map('map');
    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
    map.addLayer(wms);
    // Default polygon style
    var polygonStyle = 
    OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    polygonStyle.strokeColor = "#800000";
    polygonStyle.fillColor = "#800080";
    polygonStyle.fillOpacity = 0.2;
    polygonStyle.strokeWidth = 1;
    polygonStyle.label = "Label:${label}";
    polygonStyle.labelOutlineColor = "white";
    polygonStyle.labelOutlineWidth = 3;

    var smap = new OpenLayers.StyleMap({"default": polygonStyle});
    var veclayer = new OpenLayers.Layer.Vector("Survey Locations", {"styleMap": smap});
    map.addLayer(veclayer);

    var data = {"type":"Polygon","coordinates":[[
    [-2.07362131225228,52.0329916851734],
    [-2.07096056091493,52.0228522264397],
    [-2.05061868774548,52.0156687188299],
    [-2.04280809509186,52.0210036398637],
    [-2.02804521667506,52.0231163039992],
    [-2.01748804200037,52.0300345805213],
    [-2.01645807373352,52.0464545997404],
    [-2.02589944946666,52.0529998067114],
    [-2.04194978821027,52.0554276235705],
    [-2.06023172485491,52.0455044093648],
    [-2.07362131225228,52.0329916851734]]]};
    var gson = new OpenLayers.Format.GeoJSON();
    var GEO = gson.read(data, "Geometry");
    var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
    GEO = GEO.transform(EPSG4326, map.getProjectionObject());
    var locname="First label";
    var FEA = new OpenLayers.Feature.Vector(GEO, {"label":locname}, polygonStyle);
    veclayer.addFeatures([FEA]);
    map.zoomToExtent(GEO.getBounds(),false);
    data= {"type":"Polygon","coordinates":[[[-2.04514962074064,52.0403793945411],
    [-2.03057040393828,52.0403841112724],
    [-2.03057659173109,52.0493747022699],
    [-2.04515873420745,52.049369984023],
    [-2.04514962074064,52.0403793945411]]]}

    var GEO = gson.read(data, "Geometry");
    var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
    GEO = GEO.transform(EPSG4326, map.getProjectionObject());
    var locname="Second label";
    var FEA = new OpenLayers.Feature.Vector(GEO, {"label":locname}, polygonStyle);
    veclayer.addFeatures([FEA]);

  </script>
</body>
</html>

コードは機能しますが、ポリゴンのラベルは、変数を解釈してLabel：First labelなどを読み取るのではなく、Label：$ {Label}として表示されます。

これがより大きなアプリケーションに統合されると、最初のラベルは正しく解釈されませんが、2番目のラベルは正しく解釈されます。レイヤーの初期化の問題かもしれないと思いますが、これを乗り越える方法がわかりません。

どんな助けでもいただければ幸いです！

Qirjaziの人々

たとえば、機能を宣言した後、属性をオブジェクトとして追加しようとしましたか？

FEA.attributes = {label：locname}

以下の変更点を参照してください。

<html>
<head>
  <title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
  <div style="width:100%; height:100%" id="map"></div>
  <script>
    var map = new OpenLayers.Map('map');
    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
    map.addLayer(wms);
    // Default polygon style
    var polygonStyle = 
    OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    polygonStyle.strokeColor = "#800000";
    polygonStyle.fillColor = "#800080";
    polygonStyle.fillOpacity = 0.2;
    polygonStyle.strokeWidth = 1;
    polygonStyle.label = "Label:${label}";
    polygonStyle.labelOutlineColor = "white";
    polygonStyle.labelOutlineWidth = 3;

    var smap = new OpenLayers.StyleMap({"default": polygonStyle});
    var veclayer = new OpenLayers.Layer.Vector("Survey Locations", {"styleMap": smap});
    map.addLayer(veclayer);

    var data = {"type":"Polygon","coordinates":[[
    [-2.07362131225228,52.0329916851734],
    [-2.07096056091493,52.0228522264397],
    [-2.05061868774548,52.0156687188299],
    [-2.04280809509186,52.0210036398637],
    [-2.02804521667506,52.0231163039992],
    [-2.01748804200037,52.0300345805213],
    [-2.01645807373352,52.0464545997404],
    [-2.02589944946666,52.0529998067114],
    [-2.04194978821027,52.0554276235705],
    [-2.06023172485491,52.0455044093648],
    [-2.07362131225228,52.0329916851734]]]};
    var gson = new OpenLayers.Format.GeoJSON();
    var GEO = gson.read(data, "Geometry");
    var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
    GEO = GEO.transform(EPSG4326, map.getProjectionObject());
    var locname="First label";
    var FEA = new OpenLayers.Feature.Vector(GEO);
    FEA.attributes = {
    label:locname
    }
    veclayer.addFeatures([FEA]);
    map.zoomToExtent(GEO.getBounds(),false);
    data= {"type":"Polygon","coordinates":[[[-2.04514962074064,52.0403793945411],
    [-2.03057040393828,52.0403841112724],
    [-2.03057659173109,52.0493747022699],
    [-2.04515873420745,52.049369984023],
    [-2.04514962074064,52.0403793945411]]]}

    var GEO = gson.read(data, "Geometry");
    var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
    GEO = GEO.transform(EPSG4326, map.getProjectionObject());
    var locname="Second label";
    var FEA = new OpenLayers.Feature.Vector(GEO);
    FEA.attributes = {
        label: locname
    }
    veclayer.addFeatures([FEA]);

  </script>
</body>
</html>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-03-17

コメントを追加

サインイン

前の投稿：Hubotからシェルスクリプトを実行する方法

CollectionViewAutoResizeラベルが機能しない

OpenLayersのラベルが機能しない

OpenLayersのラベルが機能しない

STSでループプロセス「クラスパス通知の送信」のループを停止する方法

PictureBoxで画像のブレンドを無効にする

HTTPヘッダー 'SOAPAction'の値はサーバーによって認識されませんでした

レスポンシブウェブサイトの一番下にスティッキーなナビゲーションバーを作成するのに問題がある

セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか？

Ansibleで複数行のシェルスクリプトを実行する方法

Python / SciPyのピーク検出アルゴリズム

ZScalerと証明書の問題により、Dockerを使用できません

tkinterウィンドウを閉じてもPythonプログラムが終了しない

tf.nn_conv2dとtf.nn.depthwise_conv2dの違い

Crashlytics：コンパイラー生成とはどういう意味ですか？

BLOBストレージからデータを読み取り、Azure関数アプリを使用してデータにアクセスする方法

テキストフィールドの値に基づいて UIslider を移動します

amCharts 4で積み上げ棒グラフの輪郭を描く方法は？

MLでのデータ前処理の背後にある直感

Postmanを使用してファイル付きの（ネストされた）jsonオブジェクトを送信する

「埋め込みブラウザのOAuthログイン」を有効にしてコールバックURLを指定した後でも、Facebookのコールバックエラーが発生する

Officeアドインを使用してOutlookの連絡先のリストにプログラムでアクセスすることは可能ですか？

モジュラーJava Webアプリケーションを作成する最良の方法は何ですか

Chromeウェブアプリのウェブビューの高さの問題

ezdxf pythonパッケージを使用して既存のdxfファイルを変更するにはどうすればよいですか？