Vue+Openlayer实现实时定位

今天药忘吃喽~ 2022-09-09 10:56 186阅读 0赞

参考：[https://blog.csdn.net/weixin\_39340061/article/details/108196570][https_blog.csdn.net_weixin_39340061_article_details_108196570]

# 效果图： #

![20210831164011308.png][]

# 实现代码： #

<template>
      <div id="map" style="width: 100vw; height: 100vh"></div>
    </template>
    	
    <script>
    import "ol/ol.css";
    import GeoJSON from "ol/format/GeoJSON";
    import Map from "ol/Map";
    import View from "ol/View";
    import { Circle, Fill, Stroke, Style, Icon, Point } from "ol/style";
    import { OSM, Vector as VectorSource } from "ol/source";
    import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
    
    export default {
      data() {
        return {
          map: {},
          geojsonData: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [0, 0],
                },
              },
            ],
          },
          pointLayer: {},
        };
      },
      mounted() {
        this.initMap();
      },
    
      methods: {
        initMap() {
          this.pointLayer = new VectorLayer({
            source: new VectorSource({
              features: new GeoJSON().readFeatures(this.geojsonData),
            }),
            style: new Style({
              image: new Circle({
                radius: 5,
                fill: new Fill({
                  color: "rgba(255, 0, 0, 1)",
                }),
                stroke: new Stroke({ color: "red", width: 1 }),
              }),
              // image: new Icon({
              //   src: "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/position.png",
              // }),
            }),
          });
          this.map = new Map({
            layers: [
              new TileLayer({
                source: new OSM(),
              }),
              this.pointLayer,
            ],
            target: "map",
            view: new View({
              center: [0, 0],
              zoom: 2,
            }),
          });
    
          setInterval(this.translate, 500);
        },
        translate() {
          this.pointLayer.getSource().forEachFeature((feature) => {
            let x = Math.random() * 1000000;
            let y = Math.random() * 1000000;
            feature.getGeometry().translate(x, y);
          });
        },
      },
    };
    </script>

[https_blog.csdn.net_weixin_39340061_article_details_108196570]: https://blog.csdn.net/weixin_39340061/article/details/108196570
[20210831164011308.png]: /images/20220829/d0acf3eb031540c49598d5a1c64bf8ec.png