Vue+Openlayer封装拾取坐标组件-LjOlPickCoordinate

不念不忘少年蓝@ 2022-09-10 02:28 114阅读 0赞

> 点击地图，可复制点击处坐标
> 
> 复制功能使用vue-clipboard2，参考：[https://blog.csdn.net/qq\_40323256/article/details/120082557][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)

# 基本使用： #

![20210903170602417.png][]![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16][]![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

<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: ##

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

[https_blog.csdn.net_qq_40323256_article_details_120082557]: https://blog.csdn.net/qq_40323256/article/details/120082557
[20210903170602417.png]: https://img-blog.csdnimg.cn/20210903170602417.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210903170613465.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAfueWhg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/fd1b5d63cd464838a9ce918b29087f0b.png