经纬度实时拾取

screen-demo/src/views/templateInstance.vue

@@ -243,8 +243,8 @@ import { Style, Icon } from "ol/style";
 import VectorSource from "ol/source/Vector";
 import { Point } from "ol/geom";
 import * as echarts from "echarts";
-// import { format } from 'ol/coordinate'
-// import MousePosition from 'ol/control/MousePosition.js'
+import { format } from 'ol/coordinate'
+import MousePosition from 'ol/control/MousePosition.js'
 
 import CTMapOl from "@ct/ct_map_ol";
 export default {
@@ -1669,6 +1669,23 @@ export default {
       this.targetId = targetId;
       this.mapInstance = e?.map || e;
 
+      // let latitude; // 纬度
+      const mousePositionControl = new MousePosition({
+        coordinateFormat: function(coordinate) {
+          // console.log("coordinate=", coordinate)
+          // console.log("coordinate h=", h)
+          return format(coordinate, '经度: {x}   纬度: {y}   海拔: 0', 6)
+        },
+        projection: 'EPSG:4326', // 定义投影
+        className: 'bottom-mouse-position', // 控件的CSS类名
+        target: document.getElementById('mouse-position'), // 将控件渲染在该DOM元素中
+        undefinedHTML: ' '// 鼠标离开地图时，显示空格
+      })
+      // 添加控件到地图
+      this.map.map.addControl(mousePositionControl)
+      // let longitude; // 经度
+      // let altitude; // 海拔
+
       // 折线
       // let options = {
       //   path: [[116.43, 55.92, 100], [117.43, 55.92, 50], [106.43, 29.92, 100000],[128.43, 55.92, 100000]],