Target feature

by Vladimir Vershinin

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/style.css">
<script src="https://unpkg.com/[email protected]/dist/fakerator.min.js"></script>
<div id="app">
  <vl-map class="map" ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true" @postcompose="moveMarker">
    <vl-view ref="mapView" :zoom.sync="zoom" :center.sync="center"></vl-view>
    
    <vl-layer-tile id="osm">
      <vl-source-osm></vl-source-osm>
    </vl-layer-tile>
    
    <vl-feature id="position-feature" ref="positionMarker" :properties="{ start: Date.now(), duration: 2500 }">
      <template slot-scope="feature">
        <vl-geom-point :coordinates="[0, 0]"></vl-geom-point>
      </template>
    </vl-feature>
  </vl-map>
</div>

CSS

html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.layers {
  position: absolute;
  top: 10px;
  left: 50px;
  z-index: 1;
}

JavaScript

const fakerator = Fakerator();

new Vue({
  el: '#app',
  data() {
    return {
      zoom: 2,
      center: [0, 0],
      features: [],
      animating: true,
      speed: 10,
    }
  },
  mounted() {
    let img = new Image()
    img.addEventListener('load', () => {
    	this.markerStyle = new ol.style.Style({
        image: new ol.style.Icon({
          img: img,
          imgSize: [512, 512],
          scale: 0.1,
        }),
      })
    })
    img.src = 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png'
  },
  methods: {
    moveMarker(event) {
      var vectorContext = event.vectorContext;
      var frameState = event.frameState;
      var map = this.$refs.map.$map;

      if (!(map && this.markerStyle)) return
			
      if (this.animating) {
        var currentPoint = new ol.geom.Point(map.getView().getCenter());
        var feature = new ol.Feature(currentPoint);

        vectorContext.drawFeature(feature, this.markerStyle);
      }
      // tell OpenLayers to continue the postcompose animation
      map.render();
    },
  },
})