arcgis api 4.16 鼠标移动事件 获取当前经纬度

效果如下,实时监听经纬度:
在这里插入图片描述

// 2020.9.28 经纬度盒子 liyao
<template>
  <div class="lonlatBox">
    <div class="m-lr10">经度:{{(lonlat.ground.mapPoint.longitude).toFixed(7)}}</div>
    <div class="m-lr10">经度:{{(lonlat.ground.mapPoint.latitude).toFixed(7)}}</div>
  </div>
</template>

<script>
import mapConfig from "@/components/Map3D/mapConfig";
import { baseMapManagerCtrl } from "@/arcgisComponent/baseMAP/BaseMapManagerCtrl";
export default {
  data() {
    return {
      // 初始经纬度
      lonlat: {ground:{mapPoint:{longitude:116.00000,latitude:39.00000,}}}
    };
  },
  methods: {
    moseMoveTogetLonlat() {
      var that = this;
      var mapView = baseMapManagerCtrl.mapHash[mapConfig.mapId];
      mapView.on("pointer-move", getLonlat);
      function getLonlat(e) {
        mapView.hitTest(e).then(res => {
          // console.log("这是当前的鼠标位置", res);
          that.lonlat = res;
        });
      }
    }
  },
  mounted() {
    let that = this;
    //等地图加载完成后执行
    baseMapManagerCtrl.setFunCall(mapConfig.mapId).then(function() {
      that.moseMoveTogetLonlat();
    });
  }
};
</script>

<style lang="scss" scoped>
// 公共部分
.m-lr10 {
  margin: 0 10px;
}
.lonlatBox {
  z-index: 99;
  position: fixed;
  right: 15px;
  bottom: 5px;
  width: 255px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.774);
  color: black;
  font-size: 12px;
}
</style>
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页