Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.