openlayers3で画像を使わずに矢印を描く

Question

Openlayers 3マップのベクターレイヤーに矢印を描くにはどうしたらいいですか？ 私はcanvaselementを使って矢印を作成しようとしましたが、ol3マップ上に描画する方法はわかりません。

Answer 1

キャンバス要素は必要ありません。矢印の例をOpenlayers siteから取得し、アイコンの代わりに2つのカスタムLineString要素を追加することができます。この例では、すでにラジアン単位の回転角度とコードを追加する必要があるイベントがあります。

がうまくいけば、次のスニペットは、トリックん：あなたはhttp://openlayers.org/en/latest/examples/line-arrows.htmlを

var source = new ol.source.Vector(); 
 

 
var styleFunction = function (feature) { 
 
    var geometry = feature.getGeometry(); 
 
    var styles = [ 
 
     // linestring 
 
     new ol.style.Style({ 
 
      stroke: new ol.style.Stroke({ 
 
       color: '#ffcc33', 
 
       width: 2 
 
      }) 
 
     }) 
 
    ]; 
 

 
    geometry.forEachSegment(function (start, end) { 
 
     var dx = end[0] - start[0]; 
 
     var dy = end[1] - start[1]; 
 
     var rotation = Math.atan2(dy, dx); 
 

 
     var lineStr1 = new ol.geom.LineString([end, [end[0] - 200000, end[1] + 200000]]); 
 
     lineStr1.rotate(rotation, end); 
 
     var lineStr2 = new ol.geom.LineString([end, [end[0] - 200000, end[1] - 200000]]); 
 
     lineStr2.rotate(rotation, end); 
 

 
     var stroke = new ol.style.Stroke({ 
 
      color: 'green', 
 
      width: 1 
 
     }); 
 

 
     styles.push(new ol.style.Style({ 
 
      geometry: lineStr1, 
 
      stroke: stroke 
 
     })); 
 
     styles.push(new ol.style.Style({ 
 
      geometry: lineStr2, 
 
      stroke: stroke 
 
     })); 
 
    }); 
 

 
    return styles; 
 
}; 
 

 
var map = new ol.Map({ 
 
    layers: [ 
 
     new ol.layer.Tile({ 
 
      source: new ol.source.OSM() 
 
     }), 
 
     new ol.layer.Vector({ 
 
      source: source, 
 
      style: styleFunction 
 
     }) 
 
    ], 
 
    target: 'map', 
 
    view: new ol.View({ 
 
     center: [0, 0], 
 
     zoom: 3 
 
    }) 
 
}); 
 

 
map.addInteraction(new ol.interaction.Draw({ 
 
    source: source, 
 
    type: ('LineString') 
 
}));

<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script> 
 
<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/> 
 
<div id="map" class="map" tabindex="0"></div>