VUE + OPENLAYERS實現(xiàn)實時定位功能

更新時間：2021年09月01日 17:09:15 作者：灰信網(wǎng)

本系列文章介紹一個簡單的實時定位示例，基于VUE + OPENLAYERS實現(xiàn)實時定位功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧

前言

本系列文章介紹一個簡單的實時定位示例，示例的組成主要包括：

服務(wù)后端，使用 Java 語言編寫，模擬生成 GeoJSON 數(shù)據(jù)。
前端展示，使用 Vue + OpenLayers ，負責(zé)定時向后端服務(wù)請求 GeoJSON 數(shù)據(jù)，并在以標(biāo)簽的形式展現(xiàn)定位數(shù)據(jù)。

實現(xiàn)的效果：

在這里插入圖片描述

一、定義標(biāo)簽樣式

	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()];
	};

二、模擬 GeoJSON 數(shù)據(jù)

	var geojsonObject = {
	  type: "FeatureCollection",
	  features: [
	    {
	      type: "Feature",
	      geometry: {
	        type: "Point",
	        coordinates: [0, 0]
	      }
	    }
	    //此處可以添加更多 feature
	  ]
	};

三、創(chuàng)建 VerctorLayer

	//讀取 GeoJSON， 將其作為 vectorSource 的數(shù)據(jù)源
	var vectorSource = new VectorSource({
	  features: new GeoJSON().readFeatures(geojsonObject)
	});
	
	var vectorLayer = new VectorLayer({
	  source: vectorSource,
	  style: styleFunction
	});

四、構(gòu)建地圖

      mounted() {
    this.map = new Map({
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        vectorLayer
      ],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
	
	//設(shè)置定時任務(wù)，調(diào)用移動標(biāo)簽方法
    setInterval(this.translate, 500);
  },

五、模擬實時移動

	 methods: {
	    translate() {
	      //遍歷標(biāo)簽， 修改坐標(biāo)位置
	      vectorSource.forEachFeature(function(f) {
	        console.log("translate");
	        
	        //隨機產(chǎn)生坐標(biāo)增量（此處不是坐標(biāo)絕對值!!!!）
	        var x = Math.random() * 1000000;
	        var y = Math.random() * 1000000;
	        f.getGeometry().translate(x, y);
	      });
	    }
	  }

總結(jié)

以上是一個簡單實時定位前端示例，通過模擬的 GeoJSON 對象展示標(biāo)簽，并通過定時任務(wù)模擬標(biāo)簽位置變化。下一篇將使用 Java 服務(wù)端提供位置數(shù)據(jù)，完整模擬一個實時定位系統(tǒng)。
可以在vue項目中直接運行的完整代碼：

	<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>

到此這篇關(guān)于VUE + OPENLAYERS實現(xiàn)實時定位功能的文章就介紹到這了,更多相關(guān)VUE OPENLAYERS 定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: