Project scenario && Problem description ：

demand ： Got a line from the background geojson data , Now you need to draw it on the map and add arrows ;
Baidu （ Official website example ）： Get the picture below 1, Every inflection point has an arrow

But the demand is ： Here's the picture 2, Just need an arrow at the end , No arrow is needed in the middle

Cause analysis ：

Analyze the official website source code ：

So what I need to change here is the traversal , After modification, my code is as follows ：

 arrowFunction(feature){
    
        var geometry = feature.getGeometry();
        var styles = [
            new Style({
                        //  String style 
                stroke: new Stroke({
    
                    color: '#2EB745',      // Color 
                    width: 2			   // Line thickness 
                })
            })
        ];
   		console.log("geometry",geometry)
        //  Get the coordinates of the two ends of the last line segment , Generally speaking, the background returns geojson The data is sequential , Just take the last coordinate 
        //  After printing out here, I found that the easiest way to get it is to get flatCoordinates The last four digits of the attribute can , So intercept 
        let sta = geometry.flatCoordinates.slice(-4)
        
        let dx = sta[2] - sta[0];
        let dy = sta[3] - sta[1];
        let rotation = Math.atan2(dy, dx);      //  Get the angle of the line segment （ radian ）
           
	    styles.push(new Style({
            
	            geometry: new Point([sta[2],sta[3]]),
	            image: new Icon({
    
	                // src: 'data/arrow.png',
	                src:require("../assets/arrow.png"),
	                anchor: [0.75, 0.5],        //  Icon anchor 
	                rotateWithView: true,       //  Rotate with map view 
	                rotation: rotation         //  Because the angle is positive with clockwise rotation , So add a minus sign in front 
	            })
	        }));

        return styles;
    }

summary ：

Get access to styles Basically, there is no big problem if the sending method is changed to this , But when I was writing this thing, I still stepped on two pits , Let me share with you ：

One 、 hold arrowFunction When a method , To find the corresponding feature Parameters of the incoming ：

This is what I wrote at first ：（ error ）

    let styles=this.arrowFunction(features)
    let vectorLayer = new VectorLayer({
    
      id: name,
      visible: true,
      source: vectorSource,
      style: styles,
    });
    this.addLayer(vectorLayer);

Later, I found that nothing was right , After consulting colleagues, I learned , This feature You don't have to pass it , Put it in VectorLayer Object can be used directly , So the code is changed to ：（ correct ）

	let vectorLayer = new VectorLayer({
    
      id: name,
      visible: true,
      source: vectorSource,
      style: this.arrowFunction,
    });

    this.addLayer(vectorLayer);

Two 、 The image src problem ：

At the beginning, directly copy the code of the official website for use , stay new Icon Medium src Directly use the... On the official website src: 'data/arrow.png', And check the coordinate angle, there is no problem , But the arrow doesn't come out , Later, I found that I didn't find it arrow.png This picture resource , So we'd better download the pictures from the official website and put them locally , Then carry out the corresponding introduction （ Of course , It's OK to use local pictures directly , Note that the background is transparent png picture , It's better to keep the size consistent with the official website example ）.