VUE + OPENLAYERSがリアルタイムポジショニング機能を実現

	var image = 新しいCircleStyle({
	  半径: 5,
	  塗りつぶし: 新しい塗りつぶし({
	    色: "rgba(255, 0, 0, 1)"
	  }）、
	  ストローク: 新しいストローク({ 色: "赤", 幅: 1 })
	});
	
	var スタイル = {
	  ポイント: 新しいスタイル({
	    画像: 画像
	  })
	};
	
	var styleFunction = function(feature) {
	  スタイル[feature.getGeometry().getType()]を返します。
	};

	var geojsonObject = {
	  タイプ: "FeatureCollection",
	  特徴： [
	    {
	      タイプ: "機能",
	      ジオメトリ:
	        タイプ: "ポイント"、
	        座標: [0, 0]
	      }
	    }
	    //ここにさらに機能を追加できます
	  ]
	};

	// GeoJSON を読み取り、vectorSource のデータソースとして使用します var vectorSource = new VectorSource({
	  機能: 新しい GeoJSON().readFeatures(geojsonObject)
	});
	
	var ベクトルレイヤー = 新しいベクトルレイヤー({
	  ソース: vectorSource、
	  スタイル: スタイル関数
	});

      マウント() {
    this.map = 新しいマップ({
      レイヤー:
        新しいタイルレイヤー({
          ソース: 新しい OSM()
        }）、
        ベクトルレイヤー
      ]、
      ターゲット: "マップ"、
      ビュー: 新しいビュー({
        中心: [0, 0],
        ズーム: 2
      })
    });
	
	//スケジュールされたタスクを設定し、モバイル ラベル メソッドを呼び出します setInterval(this.translate, 500);
  },

	 メソッド: {
	    翻訳する（） {
	      //ラベルをトラバースして座標位置を変更するvectorSource.forEachFeature(function(f) {
	        console.log("翻訳");
	        
	        //座標の増分をランダムに生成します（ここでは座標の絶対値ではありません!!!）
	        var x = Math.random() * 1000000;
	        var y = Math.random() * 1000000;
	        f.getGeometry().translate(x, y);
	      });
	    }
	  }

	<テンプレート>
	  <div>
	    <span>こんにちは、マップ</span>
	    <div id="map" class="map"></div>
	  </div>
	</テンプレート>
	
	<script lang="ts">
	"ol/ol.css"をインポートします。
	「ol/format/GeoJSON」からGeoJSONをインポートします。
	「ol/Map」からマップをインポートします。
	「ol/View」からViewをインポートします。
	"ol/style" から { Circle を CircleStyle、Fill、Stroke、Style としてインポートします。
	"ol/source" から { OSM、Vector を VectorSource としてインポートします。
	"ol/layer" から { Tile を TileLayer として、Vector を VectorLayer として } をインポートします。
	
	「vue」からVueをインポートします。
	
	var image = 新しいCircleStyle({
	  半径: 5,
	  塗りつぶし: 新しい塗りつぶし({
	    色: "rgba(255, 0, 0, 1)"
	  }）、
	  ストローク: 新しいストローク({ 色: "赤", 幅: 1 })
	});
	
	var スタイル = {
	  ポイント: 新しいスタイル({
	    画像: 画像
	  })
	};
	
	var styleFunction = function(feature) {
	  スタイル[feature.getGeometry().getType()]を返します。
	};
	
	var geojsonObject = {
	  タイプ: "FeatureCollection",
	  特徴： [
	    {
	      タイプ: "機能",
	      ジオメトリ:
	        タイプ: "ポイント"、
	        座標: [0, 0]
	      }
	    }
	  ]
	};
	
	var ベクトルソース = 新しい ベクトルソース({
	  機能: 新しい GeoJSON().readFeatures(geojsonObject)
	});
	
	var ベクトルレイヤー = 新しいベクトルレイヤー({
	  ソース: vectorSource、
	  スタイル: スタイル関数
	});
	
	デフォルトのエクスポート Vue.extend({
	  データ（） {
	    戻る {
	      マップ: {}
	    };
	  },
	  マウント() {
	    this.map = 新しいマップ({
	      レイヤー:
	        新しいタイルレイヤー({
	          ソース: 新しい OSM()
	        }）、
	        ベクトルレイヤー
	      ]、
	      ターゲット: "マップ"、
	      ビュー: 新しいビュー({
	        中心: [0, 0],
	        ズーム: 2
	      })
	    });
	
	    間隔を 500 に設定します。
	  },
	
	  メソッド: {
	    翻訳する（） {
	      ベクトルソース.forEachFeature(関数(f) {
	        console.log("翻訳");
	        var x = Math.random() * 1000000;
	        var y = Math.random() * 1000000;
	        f.getGeometry().translate(x, y);
	      });
	    }
	  }
	});
	</スクリプト>
	<スタイル>
	.map {
	  幅: 100%;
	  高さ: 600px;
	}
	</スタイル>