VUE + OPENLAYERS实现实时定位功能_vue.js

来源:脚本之家  责任编辑:小易  

前言

本系列文章介绍一个简单的实时定位示例,示例的组成主要包括:

服务后端,使用 Java 语言编写,模拟生成 GeoJSON 数据。 前端展示,使用 Vue + OpenLayers ,负责定时向后端服务请求 GeoJSON 数据,并在以标签的形式展现定位数据。

实现的效果:

在这里插入图片描述

一、定义标签样式

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

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

三、创建 VerctorLayer

	//读取 GeoJSON, 将其作为 vectorSource 的数据源
	var vectorSource = new VectorSource({
	  features: new GeoJSON().readFeatures(geojsonObject)
	});
	
	var vectorLayer = new VectorLayer({
	  source: vectorSource,
	  style: styleFunction
	});

四、构建地图

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

总结

以上是一个简单实时定位前端示例,通过模拟的 GeoJSON 对象展示标签,并通过定时任务模拟标签位置变化。下一篇将使用 Java 服务端提供位置数据,完整模拟一个实时定位系统。
可以在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>

到此这篇关于VUE + OPENLAYERS实现实时定位功能的文章就介绍到这了,更多相关VUE OPENLAYERS 定位内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:vue+openlayers绘制省市边界线vue项目中openlayers绘制行政区划vue-openlayers实现地图坐标弹框效果vue集成openlayers加载geojson并实现点击弹窗教程Vue+Openlayers自定义轨迹动画vue使用openlayers实现移动点动画vue+高德地图实现地图搜索及点击定位操作vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)vue中实现高德定位功能

  • 本文相关:
  • vue.js特性scoped slots的浅析
  • vue事件修饰符和按键修饰符用法总结
  • 轻松理解vue的双向数据绑定问题
  • 详解vue+elementui build打包部署后字体图标丢失问题
  • vue2.0 实现单选互斥的方法
  • vue2 前端实现 静态二级省市联动选择select的示例
  • require.js+vue开发微信上传图片组件
  • vue实现树形菜单效果
  • vue2.0权限树组件实现代码
  • django简单的前后端分离的数据传输实例 axios
  • vue有几种编写方式
  • 2010秋季OP那个旋转塔的场景可以纯AE制作么。。
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库vue+openlayers绘制省市边界线vue项目中openlayers绘制行政区划vue-openlayers实现地图坐标弹框效果vue集成openlayers加载geojson并实现点击弹窗教程vue+openlayers自定义轨迹动画vue使用openlayers实现移动点动画vue+高德地图实现地图搜索及点击定位操作vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)vue中实现高德定位功能vue.js特性scoped slots的浅析vue事件修饰符和按键修饰符用法总结轻松理解vue的双向数据绑定问题详解vue+elementui build打包部署后字体图标丢失问题vue2.0 实现单选互斥的方法vue2 前端实现 静态二级省市联动选择select的示例require.js+vue开发微信上传图片组件vue实现树形菜单效果vue2.0权限树组件实现代码django简单的前后端分离的数据传输实例 axiosvue引用js文件的多种方式(推荐)详解vue 路由跳转四种方式 (带参vue项目刷新当前页面的三种方法vue之父子组件间通信实例讲解(prvue跳转页面的几种方法(推荐)vue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue实现文件上传功能简单理解vue中props属性element-ui中select组件绑定值改详解如何使用vue-cli脚手架搭建vue.js项目vue列表单项展开收缩功能之this.$refs的详vue 避免变量赋值后双向绑定的操作解决vue项目nginx部署到非根目录下刷新空基于vuex无法观察到值变化的解决方法搭建vscode+vue环境的详细教程ant design vue中表格指定格式渲染方式vue pages 多入口项目 + chainwebpack 全vue.js 表单校验插件详解vue-cli之webpack3构建全面提速优化
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved