allNum

screen-demo/src/main.js

@@ -7,6 +7,7 @@ import 'element-ui/lib/theme-chalk/index.css';
 // sdk引入
 import sdk from "@ct/iframe-connect-sdk";
 import router from "./router";
+// window.CESIUM_BASE_URL = './cesium/Build/CesiumUnminified';
 
 Vue.config.productionTip = false
 // 挂载请求sdk

screen-demo/src/views/templateInstance.vue

@@ -168,7 +168,9 @@
         <progress :max="80" :value="96" class="progress"></progress>
       </div>
       <!-- echarts 图表容器 -->
+      <!-- 经纬度实时拾取 -->
     </div>
+      <p><b><span id="mouse-position"></span></b></p>
   </div>
 </template>
 
@@ -188,6 +190,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 CTMapOl from "@ct/ct_map_ol";
 export default {
@@ -236,6 +240,7 @@ export default {
       total: 0,
       timeX: [],
       list:[],
+      // activeMode: "satellite", // 默认地图图层类型
       activeMode: "satellite", // 默认地图图层类型
       modes: ["basic", "satellite", "3D"], // 可切换地图图层类型
       extraOptions: {}, // 地图实例化扩展参数
@@ -302,7 +307,7 @@ export default {
   methods: {
     loadOptions(node, resolve) {
       if (node.level > 2) return resolve([]); // Adjust the maximum level allowed for selection
-      if (!this.isLoading && node.data.id) {
+      if (!this.isLoading && node.data && node.data.id) {
         this.setValue(node)
         this.isLoading = true;
         setTimeout(() => {
@@ -1576,7 +1581,7 @@ export default {
       //   zoomto: true,
       //   strokeOpacity: 0.8,
       // }
-      //
+      // //
       // new CTMapOl.cesiumComponent.Polyline(options)
       // let _this = this;
       // CTMapOl.loadCesium({domId: 'map'}, (map) => {
@@ -1593,6 +1598,7 @@ export default {
       // // window.CESIUM_BASE_URL = '../../public/cesium/Build/CesiumUnminified';
       // // window.CESIUM_BASE_URL = '../../public/cesium/Build/Cesium';
       // window.CESIUM_BASE_URL = '../../public/Cesium2/Cesium';
+      // window.CESIUM_BASE_URL = '/cesium/Build/CesiumUnminified';
       // this.CesiumEventHandlerclick = CTMapOl.thrdime.cameracontrol.startpickcood(this.viewer, (e, f) => {
       //   console.log(e, f)
       //   let dom1 = document.getElementById("coodlon")
@@ -1603,6 +1609,43 @@ export default {
       //   let dom3 = document.getElementById("coodh")
       //   dom3.innerHTML = f.height
       // })
+      // 不要在 data 中定义 location 变量，无需响应式
+      // let _this = this;
+      // this.$nextTick(() => {
+      //   // alert(_this.map.map)
+      //     console.log("_this.map.map=", _this.map.map)
+      //   _this.map.map.on('mousemove', (e) => {
+      //     console.log("e=", e)
+      //     // console.log("f=", f)
+      //   })
+      //   _this.location = new CTMapOl.extend.ToolLocation(_this.map.map, {
+      //     onPick: coords => {
+      //       alert(coords[0])
+      //       // this.longitude = coords[0]
+      //       // this.latitude = coords[1]
+      //     }
+      //   })
+        // let latitude; // 纬度
+        const mousePositionControl = new MousePosition({
+          coordinateFormat: function(coordinate) {
+            // console.log("coordinate=", coordinate)
+            // console.log("coordinate h=", h)
+            return format(coordinate, '经度: {x} &nbsp;&nbsp;纬度: {y} &nbsp;&nbsp;海拔: 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; // 海拔
+        // alert("before call")
+        // console.log("_this.location=",_this.location)
+        // _this.location.pick();
+      // });
+
       // this.startpick()
 
       // 导航 路线规划
@@ -1722,6 +1765,7 @@ export default {
     switchMap(e) {
       this.mapType = e; // 地图图层类型
       this.activeMode = e; // 地图图层类型
+
     },
   },
 };