菜单修改

Surpriseplus

2023-06-06 b035823c711d43902a06838065598f4f805ab408

菜单修改

 package.json

@@ -10,6 +10,7 @@
    "publish": "vue-cli-service serve --mode production"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "amfe-flexible": "^2.2.1",
    "axios": "^1.3.4",
    "default-passive-events": "^2.0.0",

 public/CIMSDK/Assets/Textures/SkyBox/SkyBox.zip

Binary files differ

 public/CIMSDK/Assets/Textures/SkyBox/new.zip

Binary files differ

 public/CIMSDK/Assets/Textures/SkyBox/skyBox_mx.jpg

 public/CIMSDK/Assets/Textures/SkyBox/skyBox_my.jpg

 public/CIMSDK/Assets/Textures/SkyBox/skyBox_mz.jpg

 public/CIMSDK/Assets/Textures/SkyBox/skyBox_px.jpg

 src/assets/img/2D.png

 src/assets/img/3D.png

 src/assets/img/leftBtn/ÐÎ×´ 6 ¿½±´ 2.png

 src/assets/img/leftBtn/¾ØÐÎ 8 ¿½±´ 3.png

 src/assets/img/leftBtn/¼ýÍ·-×ó ¿½±´ 4.png

 src/assets/img/leftBtn/¼ýÍ·-×ó ¿½±´.png

 src/assets/js/Map/config.js

@@ -1,8 +1,15 @@

//配置文件地址
const config = {
    imgUrl: "Workers/image/earth.jpg",//椭球体初始化加载图片
    licenseServer: "http://183.162.245.49:18080",//license许可
    moonTms: "http://192.168.20.39:9055/gisserver/tmsserver/moondom",// æœˆçƒåˆ‡ç‰‡æœåŠ¡
    //椭球体初始化加载图片
    imgUrl: "Workers/image/earth.jpg",
    //license许可
    licenseServer: "http://183.162.245.49:18080",
    //tmsserver
    moonTms: "http://192.168.20.39:9055/gisserver/tmsserver/moondom",
    //Wmtsserver
    moonWmts: 'http://172.16.2.10:50001/sj_raster/v6/wmts/service/system/10000101/5?ak=mf72ff9295c740ec0f37e61433e8a3ad8d&srs=ESRI:104903',
    //地形
    moonTerrain: 'http://172.16.2.10:50001/sj_raster/v6/terrain_mesh/10002301/21',
}
export default config;

 src/assets/js/Map/index.js

@@ -23,10 +23,38 @@
        this.Viewer = this.earthCtrl._Viewer;
        window.earthCtrl = this.earthCtrl;
        window.Viewer = this.earthCtrl._Viewer;
        // //显示fps
        // sgworld._Viewer.scene.debugShowFramesPerSecond = false;
        //添加月球初始化切片服务

        Viewer.imageryLayers.removeAll();

        Viewer.scene.globe.showGroundAtmosphere = false;

        // var terrain = new SmartEarth.Cesium.CesiumTerrainProvider({
        //     url: config.moonTerrain,
        //     tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({
        //         ellipsoid: SmartEarth.Cesium.Ellipsoid.MOON,
        //     }),
        // });
        // Viewer.terrainProvider = terrain;
        // Viewer.scene.globe.terrainExaggeration = 5;
        // server.AddWmtesLayer(config.moonWmts);
        // var param = {
        //     name: labelName,
        //     id: earthCtrl.factory.createUUID(),
        //     text: "文字工具",
        //     font: '50pt monospace',
        //     outlineWidth: 2,
        //     fillColor: SmartEarth.Cesium.Color.RED,
        //     lon: 47.5087,
        //     lat: 23.6963,
        //     alt: 10
        // };
        // labelEntity = earthCtrl.factory.createLabel(param);
        server.AddTmsLayer(config.moonTms);

        // server.AddTmsLayer('http://localhost:8080/abc');

        // earthCtrl.camera.flyTo(47.5087, 23.6963, 300, 9.5, -45, 0.0, 5);

        // //添加鼠标左击事件
        // this.addMouseLeftClickEvents();
        // this.addMouseMouseMoveEvents();

 src/assets/js/Map/menuTool.js

@@ -3,8 +3,12 @@
    toolFlag: null,
    colorAll: {
    },
    menuTools(res) {
        this.clearTools();
    topTools(res) {
        this.clearTopTools();
        if (res.id == this.toolFlag) {
            this.toolFlag = null;
            return
        }
        this.toolFlag = res.id;
        switch (res.id) {
            case 'a2'://点漫游
@@ -25,23 +29,73 @@
            case 'b5'://垂直高度
                this.verticalHeight();
                break;
            case 'd4'://土方量计算
                this.Volumetric();
                break;
            case 'd5'://影像对比
                this.CurtainContrast();
                break;
            case 'g1'://坐标定位
                this.Coordposition();
                break;
        }
    },
    leftTools(res) {
        this.clearLeftTools()
        switch (res.id) {
            case 'l1':
                break;
            case 'l2':
                break;
            case 'l3'://在线制图
                this.setThematicMap();
                break;
            case 'l4':
                break;
            case 'l5':
                break;
            case 'l6':
                break;
        }
    },

    //在线制图
    setThematicMap() {
        // earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE2D;
        // var handle = new SmartEarth.Cesium.ScreenSpaceEventHandler(earthCtrl.viewer.scene.canvas);

    },

    //坐标定位
    Coordposition() {

    },
    //影像对比
    CurtainContrast() {
        this.toolMenu = earthCtrl.analysis.createCurtainContrast({ leftIndex: 0, rightIndex: 1 })
    },
    //土方量计算
    Volumetric() {
        const Volumetric = earthCtrl.analysis.createVolumetricMeasure({});
        Volumetric.startDrawing();
    },
    //垂直高度
    verticalHeight() {

        earthCtrl.measure.measureHeight(function (e) {
        })
    },
    //高程测量
    heightMeasure() {

    },
    //平面面积
    planeDistance() {

        earthCtrl.analysis.getPlaneArea(function (e) {
        })
    },
    //表面距离
    surfaceDistance() {

        earthCtrl.measure.lineLength(function (e) {
        })
    },
    //点漫游
    pointRoam() {
@@ -54,7 +108,7 @@
    },

    //清除方法
    clearTools() {
    clearTopTools() {
        if (this.toolFlag) {
            switch (this.toolFlag) {
                case 'a2':
@@ -69,12 +123,18 @@
                case 'b5':

                    break;
                case 'd5':
                    debugger
                    this.toolMenu.removeFromMap()
                    break;
            }
            this.toolFlag = null;
            // this.toolFlag = null;
            this.toolMenu = null;
        }
    },
    clearLeftTools() {

    },

}
export default menuTool;

 src/assets/js/Map/server.js

@@ -12,5 +12,21 @@
        });
        window.Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
    },
    AddWmtesLayer(url) {
        var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
            sourceType: "wmts",
            url: url,
            layer: "",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleCRS84Quad01",
            minimumLevel: 0,
            maximumLevel: 18,
            style: "",
            tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({
                ellipsoid: SmartEarth.Cesium.Ellipsoid.MOON,
            }),
        })
    },

}
export default server;

 src/components/bottomBtn.vue

@@ -1,6 +1,17 @@
<template>
  <div class="bottom_btn">

    <div
      v-show="mapFlag == '2D'"
      class="ChangeMap twoImg"
      @click="setMapImg('2D')"
    >
    </div>
    <div
      v-show="mapFlag != '2D'"
      class="ChangeMap threeImg"
      @click="setMapImg('3D')"
    >
    </div>
  </div>
</template>

@@ -13,31 +24,35 @@
  defineProps,
  defineEmits,
} from "vue";
const lng = ref(null);
const lat = ref(null);
const alt = ref(null);
const setMouseEvents = (res) => {};
onMounted(() => {
  window.addMouseEvents = setMouseEvents;
});
const mapFlag = ref("2D");

const setMapImg = (res) => {
  if (res == "2D") {
    mapFlag.value = "3D";
    earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE2D;
  } else if (res == "3D") {
    mapFlag.value = "2D";
    earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE3D;
  }
};
onMounted(() => {});
</script>
<style lang="less" scoped>
.bottom_btn {
  position: absolute;
  bottom: 15px;
  left: 75px;
  display: flex;
  .btn_box {
    margin-right: 10px;
    background-size: 100% 100%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      color: #fff;
    }
  bottom: 68px;
  right: 70px;

  .ChangeMap {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .twoImg {
    background: url("../assets/img/2D.png") no-repeat;
  }
  .threeImg {
    background: url("../assets/img/3D.png") no-repeat;
  }
}
</style>

 src/components/menus.vue

@@ -46,6 +46,7 @@
  defineEmits,
} from "vue";
import menuData from "@/assets/js/Map/menuData";
import menuTool from "@/assets/js/Map/menuTool";
const menuOptions = ref([]);
const checkMenuFlag = ref("");
const setMenuClick = (res) => {
@@ -53,6 +54,7 @@
    checkMenuFlag.value = null;
  } else {
    checkMenuFlag.value = res.id;
    menuTool.leftTools(res);
  }
};
onMounted(() => {

 src/components/topBtn.vue

@@ -77,7 +77,7 @@
      checkFlag.value = res.id;
    }
    menuFlag.value = null;
    menuTool.menuTools(res);
    menuTool.topTools(res);
  }
};
onMounted(() => {

 src/main.ts

@@ -5,6 +5,7 @@
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "default-passive-events";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
//base css样式
import "./assets/css/global.css";
//自适应
@@ -12,7 +13,11 @@
//粒子特效
import VueParticles from "vue-particles";
import Drag from "./utils/drag";
createApp(App)
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app
  .use(ElementPlus)
  .use(store)
  .use(router)

 src/views/Index.vue

@@ -4,12 +4,11 @@
      id="cesiumContainer"
      style="width: 100%; height: 100%; position: absolute;"
    ></div>

    <menus></menus>
    <bottom-btn></bottom-btn>
    <top-btn></top-btn>
    <layer-manage>

    </layer-manage>
    <layer-manage> </layer-manage>
  </div>
</template>


 src/views/layer/layerManage.vue

@@ -4,9 +4,49 @@
    class="layerBox"
  >
    <div class="layerTitle">

      <div class="tileLeft">
        <div class="titleImg">
          <ArrowLeft />
        </div>
        <div class="titleLable">
          å›¾å±‚管理
        </div>
      </div>
      <div class="titleImg">
        <Setting />
      </div>
    </div>

    <div>
      <div
        class="contentBox"
        v-for="(item,i) in menuOption"
      >
        <div class="contentTile">
          <div class="contentLeft">
            <div class="contentImg"></div>
            <div class="contentLabel">{{ item.name }}</div>
          </div>
          <div class="contentRight">
            <div class="contentCheck"><el-checkbox
                @change="handlCheckAllChange(item)"
                v-model="item.checkedAll"
              >全部选中</el-checkbox></div>
            <div>
              <div
                @click="handlIsShow(item,1)"
                v-show="item.isShow"
                class="contentUP"
              ></div>
              <div
                @click="handlIsShow(item,2)"
                v-show="!item.isShow"
                class="contentDown"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

@@ -19,6 +59,20 @@
  defineProps,
  defineEmits,
} from "vue";
const menuOption = [
  {
    name: "测试",
    isShow: true,
    checkedAll: false,
  },
  {
    name: "测试1",
    isShow: true,
    checkedAll: true,
  },
];
const handlCheckAllChange = (res) => {};
const handlIsShow = (res, boolean) => {};
</script>

<style lang="less" scoped>
@@ -30,8 +84,82 @@
  height: 680px;
  background: rgba(7, 8, 14, 0.8);
  .layerTitle {
    width: calc(100% - 27px);
    height: 42px;
    background: #0e151f;
    box-shadow: 0px 0px 6px 0px #080c13,
      0px 14px 16px 0px rgba(38, 47, 71, 0.68);
    display: flex;
    justify-content: space-between;
    padding-left: 7px;
    padding-right: 20px;
    color: white;
    .tileLeft {
      height: 100%;
      display: flex;
      align-items: center;

      .titleLable {
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .titleImg {
      width: 20px;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
  .contentBox {
    margin-top: 3px;
  }
  .contentTile {
    width: 100%;
    height: 42px;
    background: #0d131d;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .contentLeft {
      display: flex;
      justify-content: center;
      align-items: center;
      .contentImg {
        width: 22px;
        height: 22px;
        background: url("../../assets/img/leftBtn/矩形 8 æ‹·è´ 3.png") no-repeat;
        margin-left: 16px;
      }
      .contentLabel {
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #ffffff;
        margin-left: 7px;
      }
    }
    .contentRight {
      margin-right: 32px;
      display: flex;
      align-items: center;
      .contentCheck {
        margin-right: 12px;
      }
      .contentUP {
        width: 18px;
        height: 11px;
        background: url("../../assets/img/leftBtn/箭头-å·¦ æ‹·è´.png");
      }
      .contentDown {
        width: 18px;
        height: 11px;
        background: url("../../assets/img/leftBtn/箭头-å·¦ æ‹·è´ 4.png");
      }
    }
  }
}
</style>