VUE + OPENLAYERS achieves real-time positioning function

Preface
1. Define label style
2. Simulating GeoJSON data
3. Create VerctorLayer
4. Build a map
5. Simulate real-time movement
Summarize

Preface

This series of articles introduces a simple real-time positioning example, which mainly includes:

The service backend is written in Java and simulates the generation of GeoJSON data.
The front-end display uses Vue + OpenLayers, which is responsible for periodically requesting GeoJSON data from the back-end service and displaying the location data in the form of tags.

The effect achieved:

insert image description here

1. Define label style

	var image = new CircleStyle({
	  radius: 5,
	  fill: new Fill({
	    color: "rgba(255, 0, 0, 1)"
	  }),
	  stroke: new Stroke({ color: "red", width: 1 })
	});
	
	var styles = {
	  Point: new Style({
	    image: image
	  })
	};
	
	var styleFunction = function(feature) {
	  return styles[feature.getGeometry().getType()];
	};

2. Simulating GeoJSON data

	var geojsonObject = {
	  type: "FeatureCollection",
	  features: [
	    {
	      type: "Feature",
	      geometry:
	        type: "Point",
	        coordinates: [0, 0]
	      }
	    }
	    //You can add more features here
	  ]
	};

3. Create VerctorLayer

	// Read GeoJSON and use it as the data source of vectorSource var vectorSource = new VectorSource({
	  features: new GeoJSON().readFeatures(geojsonObject)
	});
	
	var vectorLayer = new VectorLayer({
	  source: vectorSource,
	  style: styleFunction
	});

4. Build a map

      mounted() {
    this.map = new Map({
      layers:
        new TileLayer({
          source: new OSM()
        }),
        vectorLayer
      ],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
	
	//Set the scheduled task and call the mobile label method setInterval(this.translate, 500);
  },

5. Simulate real-time movement

	 methods: {
	    translate() {
	      //Traverse the labels and modify the coordinate positions vectorSource.forEachFeature(function(f) {
	        console.log("translate");
	        
	        //Randomly generate coordinate increments (not absolute values of coordinates here!!!)
	        var x = Math.random() * 1000000;
	        var y = Math.random() * 1000000;
	        f.getGeometry().translate(x, y);
	      });
	    }
	  }

Summarize

The above is a simple real-time positioning front-end example, which displays labels through simulated GeoJSON objects and simulates label position changes through scheduled tasks. The next article will use the Java server to provide location data and fully simulate a real-time positioning system.
Complete code that can be run directly in the vue project:

	<template>
	  <div>
	    <span>hi, map</span>
	    <div id="map" class="map"></div>
	  </div>
	</template>
	
	<script lang="ts">
	import "ol/ol.css";
	import GeoJSON from "ol/format/GeoJSON";
	import Map from "ol/Map";
	import View from "ol/View";
	import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
	import { OSM, Vector as VectorSource } from "ol/source";
	import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
	
	import Vue from "vue";
	
	var image = new CircleStyle({
	  radius: 5,
	  fill: new Fill({
	    color: "rgba(255, 0, 0, 1)"
	  }),
	  stroke: new Stroke({ color: "red", width: 1 })
	});
	
	var styles = {
	  Point: new Style({
	    image: image
	  })
	};
	
	var styleFunction = function(feature) {
	  return styles[feature.getGeometry().getType()];
	};
	
	var geojsonObject = {
	  type: "FeatureCollection",
	  features: [
	    {
	      type: "Feature",
	      geometry:
	        type: "Point",
	        coordinates: [0, 0]
	      }
	    }
	  ]
	};
	
	var vectorSource = new VectorSource({
	  features: new GeoJSON().readFeatures(geojsonObject)
	});
	
	var vectorLayer = new VectorLayer({
	  source: vectorSource,
	  style: styleFunction
	});
	
	export default Vue.extend({
	  data() {
	    return {
	      map: {}
	    };
	  },
	  mounted() {
	    this.map = new Map({
	      layers:
	        new TileLayer({
	          source: new OSM()
	        }),
	        vectorLayer
	      ],
	      target: "map",
	      view: new View({
	        center: [0, 0],
	        zoom: 2
	      })
	    });
	
	    setInterval(this.translate, 500);
	  },
	
	  methods: {
	    translate() {
	      vectorSource.forEachFeature(function(f) {
	        console.log("translate");
	        var x = Math.random() * 1000000;
	        var y = Math.random() * 1000000;
	        f.getGeometry().translate(x, y);
	      });
	    }
	  }
	});
	</script>
	<style>
	.map {
	  width: 100%;
	  height: 600px;
	}
	</style>

This is the end of this article about VUE + OPENLAYERS to achieve real-time positioning function. For more relevant VUE OPENLAYERS positioning content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue + OpenLayers Quick Start Tutorial
Vue+openlayers draws provincial and municipal boundaries
Openlayers draws administrative divisions in the Vue project
vue-openlayers realizes the map coordinates pop-up box effect
Tutorial on how to integrate openlayers with Vue to load geojson and implement a pop-up window
Vue+Openlayers custom track animation
Vue uses openlayers to implement moving point animation
Vue uses openlayers to load Tiandi Map and Amap

<<: Build Tomcat9 cluster through Nginx and realize session sharing

>>: Analysis of MySQL user management operation examples