Let's bring together what we've learned by expanding our application to track our movement over time and display it on the map. Recall that we covered vector features in Chapters 6, Styling Vector Layers, and Chapter 5, Using Vector Layers. So, here's what we will do:
We need a vector feature to capture our track. Add the following at the beginning of the
<script>tag:var trackStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0,0,255,1.0)', width: 3, lineCap: 'round' }) }); var trackFeature = new ol.Feature({ geometry: new ol.geom.LineString([]) }); var trackLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [trackFeature] }), style: trackStyle });We'll need to add
trackLayerto the map, so add it to the array of layers where we create the map, as follows:var map = new ol.Map({ target: 'map', layers: [layer, trackLayer], view: view });And finally, we can update
trackFeatureas we move...