Ничья стрелка без использования изображения в openlayers3

Question

Как нарисовать стрелку над векторным слоем в Openlayers 3 map? Я попытался создать стрелку с помощью canvaselement, но не знаю, как нарисовать ее поверх карты ol3.

Answer 1

Прозрачный элемент не требуется. Вы можете взять пример стрелки из Openlayers site и добавить 2 пользовательских элемента LineString вместо значка. У вас уже есть пример угла поворота в радианах и события, где вы должны добавить свой код.

Надеюсь, следующий фрагмент делает трюк:

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>