Me gustaría dibujar la flecha simple en OpenLayers.
Encontré algunos ejemplos aquí:
OpenLayer 4 dibuja flechas en el mapa https://openlayers.org/en/latest/examples/line-arrows.html Dibuja flechas sin usar ninguna imagen en openlayers3
e hizo algo de código:
var arrowInteraction = new ol.interaction.Draw({ type: 'LineString', source: vectorLayer.getSource(), geometryFunction: function(coordinates, geometry) { var geometry = coordinates.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; }Estoy recibiendo un error:
coordenadas.getGeometry no es una función
¿Qué puede estar mal aquí?
Mi código completo está aquí:
Esto podría ayudar: TypeError: no se pueden leer las propiedades de undefined (leyendo 'id')
Si lo entiendo bien, las funciones no se llaman sincronizadas.
En ese tutorial, lo atrapa con:
itemToForm = () => { if(this.item === undefined) {return} // The rest of the code }Pero también puedes atraparlo con
if(yourObjectOrValue === undefined) {// The rest of the code}