[JavaScript知识库]Vue+Openlayer封装拾取坐标组件-LjOlPickCoordinate

点击地图，可复制点击处坐标

复制功能使用vue-clipboard2，参考：https://blog.csdn.net/qq_40323256/article/details/120082557

首先下载?复制文本组件vue-clipboard2

cnpm i -S vue-clipboard2

main.js中引入

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

基本使用：

<template>
  <div>
    <div id="map" style="width: 100vw; height: 100vh"></div>
    <LjOlPickCoordinate
      :map="map"
      style="position: fixed; top: 200px; left: 800px"
    ></LjOlPickCoordinate>
  </div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { OSM } from "ol/source";
import { Tile as TileLayer } from "ol/layer";
import LjOlPickCoordinate from "@/components/LjOlPickCoordinate/index.vue";

export default {
  components: { LjOlPickCoordinate },

  data() {
    return {
      map: {},
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104.29806, 30.5263],
          zoom: 18,
        }),
      });
    },
  },
};
</script>

LjOlPickCoordinate/index.vue:

<!--LjOlPickCoordinate-->
<template>
  <div>
    <div
      v-if="divCoordinate.showCoordinateDiv"
      :style="{ left: divCoordinate.left, top: divCoordinate.top }"
      style="position: fixed; color: white; font-size: 18px"
    >
      {{ divCoordinate.coordinateMouse }}
    </div>
    <el-tooltip
      class="item"
      effect="dark"
      :content="pickCoordinateTip"
      placement="right"
    >
      <LjButton type="primary" size="mini" @click="pickCoordinate()"
        ><i class="el-icon-map-location"
      /></LjButton>
    </el-tooltip>
  </div>
</template>

<script>
import LjButton from "@/components/LjButton/index.vue";
import { unByKey } from "ol/Observable"; //移除事件

export default {
  name: "LjOlPickCoordinate",
  components: { LjButton },
  props: {
    map: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isPickCoordinate: false, //是否拾取坐标
      event_pickCoordinate_click: {}, //拾取坐标事件 click
      pickCoordinateTip: "点击拾取坐标",
      event_pickCoordinate_pointermove: {}, //拾取坐标事件 pointermove

      divCoordinate: {
        showCoordinateDiv: false,
        left: "",
        top: "",
        coordinateMouse: [], //鼠标坐标
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {
    //拾取坐标
    pickCoordinate() {
      this.isPickCoordinate = !this.isPickCoordinate;
      if (this.isPickCoordinate) {
        this.pickCoordinateTip = "取消坐标拾取";

        this.event_pickCoordinate_click = this.map.on("click", async (e) => {
          let { text } = await this.$copyText(e.coordinate);
          this.$message.success(`坐标复制成功：${text}`);
        });

        this.event_pickCoordinate_pointermove = this.map.on(
          "pointermove",
          (e) => {
            document.getElementById("app").style.cursor = "crosshair";
            this.divCoordinate.coordinateMouse = e.coordinate;

            this.divCoordinate.showCoordinateDiv = true;
            this.divCoordinate.left = e.pixel[0] + 40 + "px";
            this.divCoordinate.top = e.pixel[1] - 50 + "px";
          }
        );
      } else {
        this.pickCoordinateTip = "点击拾取坐标";
        document.getElementById("app").style.cursor = "default";

        unByKey(this.event_pickCoordinate_click);
        unByKey(this.event_pickCoordinate_pointermove);

        this.divCoordinate.showCoordinateDiv = false;
      }
    },
  },
  watch: {},
};
</script>