web-dev-qa-db-ja.com

openlayersでポイントをスタイリングする方法4

OpenLayers4のベクターソースでポイントのスタイルを設定しようとしています。

私はスタイルを定義しました：

var pStyle = new ol.style.Style({
          stroke: new ol.style.Stroke({
          width: 6, color: [255, 0, 0, 1]
          })
});

レイヤー定義にスタイルを追加しました

var pLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [p]
        }),
        style: pStyle
});

スタイル定義にコメントを付けると、ポイントがマップに表示されるので、コードの残りの部分は問題ないと思います。しかし、地図上にポイントを赤で表示することができません。

フィドル： https://codepen.io/fundef/pen/VXKYjP

どこが間違っているのですか？

javascriptstylesopenlayerspoint
4
und

fillとstrokeを使用する場合

    var myStyle = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({color: 'black'}),
        stroke: new ol.style.Stroke({
          color: [255,0,0], width: 2
        })
      })
    })
9
line88

そのためにol.style.iconを使用できます。

これは例です：

<script>

iconFeature.setStyle(new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          color: '#8959A8',
          crossOrigin: 'anonymous',
          src: 'https://openlayers.org/en/v4.6.4/examples/data/dot.png'
        }))
      }));

<script>
0
rebg85