Vue + Openlayers 展示实时坐标点

小小并不小

于 2020-12-18 16:59:00 发布

阅读量1.5k

点赞数 4

分类专栏： Vue openlayers

本文链接：https://blog.youkuaiyun.com/c153284575/article/details/111384944

版权

本文通过示例代码展示了如何在Vue项目中结合OpenLayers库，动态展示实时更新的坐标点，为地理信息系统应用提供了一个基本的实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

<!--
 * @Description: 实时坐标点
 * @Author: Dragon
 * @Date: 2020-12-18 10:08:40
 * @LastEditTime: 2020-12-18 15:59:29
 * @LastEditors: Dragon
-->

<template>
  <div id="map"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { Image as ImageLayer, Vector as VectorLayer } from "ol/layer";
import { ImageStatic, Vector as VectorSource } from "ol/source";
import { getCenter } from "ol/extent";
import { Projection } from "ol/proj";

import { Point } from "ol/geom";
import { Icon, Style, Text, Fill, Stroke } from "ol/style";

// import { websocket }  from "./mixins";
import staticMap from "@/assets/map.png";
import img from "@/assets/tx-icon-1.png";

 
export default {
  data() {
    return {
      map: null, // 地图
      imgx: 0, // 当