管道基础大数据平台系统开发-【前端】-新系統界面
src/components/mapsdk.vue
@@ -297,39 +297,40 @@
          </div>
        </el-card>
      </div>
      <div style="display: flex">
      <!--      <div style="display: flex;">-->
      <div
        class="changeTerrain"
        @click="changeTerrainLayer"
      >
        <div
          class="changeTerrain"
          @click="changeTerrainLayer"
        >
          <div
            title="地形切换"
            id="cenBg"
            class="mapTerrain"
          ></div>
        </div>
        <div
          @click="changeMenulayer"
          class="center CenDiv"
        >
          <div
            title="底图切换"
            id="cenBg"
            class="mapBaseMap"
          ></div>
        </div>
        <div
          @click="changeMapType"
          class="changeMapType"
        >
          <div
            title="2/3维切换"
            id="cenBg"
            :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
          ></div>
        </div>
          title="地形切换"
          id="cenBg"
          class="mapTerrain"
        ></div>
      </div>
      <!--      class="center CenDiv"-->
      <div
        @click="changeMenulayer"
        class="changeLayer"
      >
        <div
          title="底图切换"
          id="cenBg"
          class="mapBaseMap"
        ></div>
      </div>
      <div
        @click="changeMapType"
        class="changeMapType"
      >
        <div
          title="2/3维切换"
          id="cenBg"
          :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
        ></div>
      </div>
      <!--      </div>-->
      <!-- 坡度分析弹窗-->
      <div
        class="lengend"
@@ -571,11 +572,13 @@
          v-if="dialog.isJpg"
          class="pdfClass"
        >
          <img
            style="width:100%; height:100%;"
          <el-image
            style="width:100%; height:100%"
            :src="dialog.src"
            alt=""
          />
            :preview-src-list="[dialog.src]"
          >
          </el-image>
        </div>
      </el-dialog>
      <!--      <div-->
@@ -590,6 +593,7 @@
      <!--      </div>-->
    </div>
    <model-property ref='modelProperty'></model-property>
  </div>
</template>
@@ -597,7 +601,7 @@
import $ from "jquery";
import mapMenuTop from "./MapView/mapMenuTop.vue";
import mapSpaceTop from "./MapView/mapSpaceTop.vue";
import ModelProperty from '../views/Tools/ModelProperty.vue'
import {
  select_Comprehensive_ByPageAndCount,
  select_Comprehensive_SelectWktById,
@@ -611,6 +615,7 @@
  components: {
    mapMenuTop,
    mapSpaceTop,
    ModelProperty
  },
  data() {
@@ -761,13 +766,14 @@
              window.pickedColor = window.pickedFeature.color
              window.pickedFeature.color = Cesium.Color.RED.withAlpha(0.3);
              this.$store.state.catModel = true;
              this.$store.state.catModelInfo = {
              // this.$store.state.catModel = true;
              that.$store.state.catModelInfo = {
                id: pickedFeature.getProperty("id"),
                name: pickedFeature.getProperty("name"),
                layerId: pickedFeature.primitive.layerId,
                layerName: pickedFeature.primitive.id
              };
              that.$refs && that.$refs.modelProperty && that.$refs.modelProperty.open();
            }
          }
        }
@@ -1812,65 +1818,109 @@
.mapBaseMap {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/底图.png");
  //margin-left: 10px;
  background-image: url("../assets/img/basemap.png");
  //background-image: url("../assets/img/synthesis/底图.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.changeMapType {
  position: absolute;
  bottom: 1%;
  left: calc(1% + 150px);
  height: 40px;
  width: 60px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  // box-shadow: 3px 3px 6px #666;
  //border: 1px solid rgba(204, 204, 204, 0.76);
  border-radius: 5px;
  cursor: pointer;
}
//.changeMapType {
//  position: absolute;
//  bottom: 1%;
//  left: calc(1% + 150px);
//  height: 40px;
//  width: 60px;
//  z-index: 101;
//  display: flex;
//  justify-content: center;
//  align-items: center;
//  // box-shadow: 3px 3px 6px #666;
//  //border: 1px solid rgba(204, 204, 204, 0.76);
//  border-radius: 5px;
//
//  cursor: pointer;
//}
.changeTerrain {
  position: absolute;
  bottom: 1%;
  left: 1%;
  height: 40px;
  width: 60px;
  bottom: 84px;
  right: 46px;
  height: 30px;
  width: 30px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.changeLayer {
  position: absolute;
  bottom: 116px;
  right: 46px;
  height: 30px;
  width: 30px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.changeMapType {
  position: absolute;
  bottom: 52px;
  right: 46px;
  height: 30px;
  width: 30px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
//.changeTerrain {
//  position: absolute;
//  bottom: 1%;
//  left: 1%;
//  height: 40px;
//  width: 60px;
//  z-index: 101;
//  display: flex;
//  justify-content: center;
//  align-items: center;
//
//  border-radius: 5px;
//  cursor: pointer;
//}
.mapTypeTwo {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/3D.png");
  background-image: url("../assets/img/3D.png");
  //background-image: url("../assets/img/synthesis/3D.png");
  background-repeat: no-repeat;
  background-size: contain;
  //background-size: contain;
}
.mapTerrain {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/地形.png");
  //margin-left: 10px;
  //background-image: url("../assets/img/synthesis/地形.png");
  //background-image: url("../assets/img/synthesis/地形.png");
  background-image: url("../assets/img/terrain.png");
  background-repeat: no-repeat;
  background-size: contain;
  //background-size: contain;
}
.mapTypeThree {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/2D 拷贝 2.png");
  //margin-left: 10px;
  background-image: url("../assets/img/2D.png");
  background-repeat: no-repeat;
  background-size: contain;
  //background-size: contain;
}
.pdfClass {