commit

src/views/situation/index.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="container">
+      <div id="modeltooltip">左键单击确认</div>
       <el-row style="height:40px;">
         <div class="myHeader" >
           <el-button :type="(this.dimension==2?'success':'danger')" @click="dimensionswitch(2)" round>二维</el-button>
@@ -7,7 +8,7 @@
           <el-button :type="(this.dimension==5?'success':'danger')" @click="dimensionswitch(5)" round>一体化</el-button>
         </div>
       </el-row>
-      <el-row style="height:790px;width: 100%; display:flex;position: relative;">
+      <el-row id="map" style="height:790px;width: 100%; display:flex;position: relative;">
         <el-col style="height:100%;position: relative;" :span="this.leftwidth"  >
           <div class="main-layout" v-on:mouseover="changeActive('3D')">
             <div id="3DcesiumContainer" class="map"></div>
@@ -21,16 +22,16 @@
         <el-tabs type="border-card" v-model="activeName" tab-position="left" class="menu" :stretch="true" @tab-click="legendClick">
         <el-tab-pane name="first">
           <span slot="label">
-            <el-tooltip class="item" effect="dark" content="标绘" placement="left">
+            <el-modeltooltip class="item" effect="dark" content="标绘" placement="left">
               <i class="el-icon-wind-power"></i>
-            </el-tooltip>
+            </el-modeltooltip>
           </span>
         </el-tab-pane>
         <el-tab-pane name="second">
           <span slot="label">
-            <el-tooltip class="item" effect="dark" content="模型" placement="left">
+            <el-modeltooltip class="item" effect="dark" content="模型" placement="left">
               <i class="el-icon-receiving"></i>
-            </el-tooltip>
+            </el-modeltooltip>
           </span>
           <el-radio-group v-model="whosmodel" style="margin: 0 auto;" size="mini">
             <el-radio-button label="red">红方</el-radio-button>
@@ -97,9 +98,9 @@
         </el-tab-pane>
         <el-tab-pane name="third">
           <span slot="label">
-          <el-tooltip class="item" effect="dark" content="测量" placement="left">
+          <el-modeltooltip class="item" effect="dark" content="测量" placement="left">
             <i class="el-icon-discount"></i>
-          </el-tooltip>
+          </el-modeltooltip>
           </span>
         </el-tab-pane>
       </el-tabs>
@@ -482,6 +483,19 @@ export default ({
           this.modelType == null
         }else{
           this.modelType = modelType
+          var map = document.getElementById("map")
+          map.style.cursor= "crosshair"
+          document.addEventListener("mousemove", function(event) {
+            var modeltooltip = document.getElementById("modeltooltip");
+            modeltooltip.style.display = "block";
+            modeltooltip.style.left = event.clientX-180+"px";
+            modeltooltip.style.top = event.clientY-100+"px";
+          });
+
+          document.addEventListener("mouseout", function() {
+            var modeltooltip = document.getElementById("modeltooltip");
+            modeltooltip.style.display = "none";
+          });
         }
         
 
@@ -585,6 +599,7 @@ export default ({
 
 .active{
   border: 2px solid red !important;
+
 }
 
 .model .el-image {
@@ -595,4 +610,14 @@ export default ({
   border:1px solid #ddd;
   border-radius: 5px;
 }
+
+#modeltooltip {
+  position: absolute;
+  display: none;
+  padding: 5px;
+  color: #fff;
+  font-size: 20px;
+  pointer-events: none;
+  z-index: 999;
+}
   </style>