How to use VUE + OPENLAYERS to realize real-time positioning function

This article mainly explains "how to use VUE + OPENLAYERS to achieve real-time positioning function", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use VUE + OPENLAYERS to achieve real-time positioning function"!

Preface

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

The service backend, written in Java language, simulates and generates GeoJSON data.

The front-end display, using Vue + OpenLayers, is responsible for regularly requesting GeoJSON data from the back-end service and displaying the location data in the form of tags.

The effect achieved is:

Define the 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. Simulate GeoJSON data var geojsonObject = {type: "FeatureCollection", features: [{type: "Feature", geometry: {type: "Point", coordinates: [0 0]}} / / you can add more feature]} Create VerctorLayer / / read GeoJSON 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 the map mounted () {this.map = new Map ({layers: [new TileLayer ({source: new OSM ()}), vectorLayer], target: "map", view: new View ({center: [0,0], zoom: 2})}) / / set a scheduled task, call the mobile label method setInterval (this.translate, 500);}, simulate real-time mobile methods: {translate () {/ / traverse the tag, modify the coordinate position vectorSource.forEachFeature (function (f) {console.log ("translate")) / / generate coordinate increments randomly (here is not the absolute value of coordinates!) var x = Math.random () * 1000000; var y = Math.random () * 1000000; f.getGeometry () .translate (x, y);}} Summary

The above is a simple real-time positioning front-end example, which displays the tag through a simulated GeoJSON object and simulates the change of the tag position through a scheduled task. The next article will use the Java server to provide location data to fully simulate a real-time positioning system.

The complete code that can be run directly in the vue project:

Hi, map 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);});}); .map {width: 100%; height: 600px } at this point, I believe you have a deeper understanding of "how to use VUE + OPENLAYERS to achieve real-time positioning function". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!