影像对比，地名查询，图层管理界面修改

Surpriseplus

2023-09-04 1355c04087927dfed32827d23609e2b04a8cabea

影像对比，地名查询，图层管理界面修改

 src/assets/js/Map/menuTool.js

@@ -324,6 +324,9 @@
  },
  thematicTools(res) {
    switch (res.id) {
      case "t1":
        store.state.setLayerManager = !store.state.setLayerManager;
        break;
      case "t2":
        this.createSimpleGraphic("rectangle", "square");
        break;
@@ -430,6 +433,7 @@
    window.rightViewer.scene.skyAtmosphere.show = false;
    const compass = document.getElementsByClassName("bottom_btn")[0];
    compass.style.right = "calc(50% + 70px)";
    compass.style.positions = "absolute";
    store.state.doubleMap = true;
    setTimeout(() => {
      window.functionGetLayer({

 src/assets/js/Map/olMap.js

@@ -196,7 +196,27 @@
    });
    if (this.map) {
      this.map.addLayer(this.Layer);
      var that = this;
      window.olMap = this.map;
      window.layer = this.Layer
      setTimeout(() => {
        that.getLayersExtent();
      }, 1000)
      // this.Layer.getSource().on('addfeature', function () {
      //   this.map.getView().fit(this.Layer.getSource().getExtent());
      // });


    }
  },
  getLayersExtent() {
    // 缩放至图层范围

    this.map.getView().fit(this.Layer.renderer_.renderedExtent_);



  }

};
export default olMap;

 src/assets/js/Map/rightServer.js

@@ -353,5 +353,53 @@
        let img_layer = window.rightViewer.imageryLayers.addImageryProvider(layer);
        this.layerList.push({ id: res.id, layerData: img_layer, type: "wmts" });
    },
    addGeoServerMmsLayers(layer, url) {
        var that = this
        var getFeatureInfoFormat = new SmartEarth.Cesium.GetFeatureInfoFormat("html", null, function (html) {
            that.getFeatureInfo(html)
        });
        let wmslayer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
            url: url,
            layers: layer.toString(),
            getFeatureInfoParameters: { info_format: 'text/html' },
            enablePickFeatures: true,
            getFeatureInfoFormats: [getFeatureInfoFormat],
            parameters: {
                transparent: true,
                format: "image/png",
                srs: "EPSG:104903",
                styles: "",
            },
            tileWidth: 512,
            tileHeight: 512,
        });
        wmslayer.name = `Wms_Layer_geo`;
        let img_layer = window.rightViewer.imageryLayers.addImageryProvider(wmslayer);
        this.layerList.push({ id: 1001011, layerData: img_layer, type: "wmts" });
    },

    delLayerAll() {
        this.layerList.forEach((e, i) => {
            switch (e.type) {
                case "wmts":
                    window.rightViewer.imageryLayers.remove(e.layerData);
                    break;
                case "tms":
                    window.rightViewer.imageryLayers.remove(e.layerData);
                    break;
                case "dem":
                    window.rightViewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(
                        {}
                    );
                    break;
                case "tileset":
                    window.rightViewer.scene.primitives.remove(e.layerData)
                    break;
            }
            this.layerList.splice(i, 1);
        });

    },

};
export default rightServer;

 src/components/mouseMove.vue

@@ -141,7 +141,7 @@
    // 当前高度
    let height = Viewer.camera.positionCartographic.height;
    heightlevel = getLevel(height);
    console.log(heightlevel);

    if (heightlevel == 6) {
      gridDel();
      grid(5);
@@ -178,7 +178,7 @@
  //     ])
  //   );
  // }
  // console.log(ps);

  // let polylineGeometry = new Cesium.PolylineGeometry({
  //   positions: ps,
  //   width: 5,
@@ -203,16 +203,6 @@
const grid = (degree) => {
  const entities = Viewer.entities;
  for (let longitude = -180; longitude <= 180; longitude += degree) {
    console.log(
      Cesium.Cartesian3.fromDegreesArray([
        longitude,
        -90,
        longitude,
        0,
        longitude,
        90,
      ])
    );
    let text = "";
    if (longitude === 0) {
      text = "0";
@@ -260,7 +250,7 @@
    if (lat === 0) {
      text = "";
    }
    // console.log(lat, "---lat");

    let obj = entities.add({
      position: Cesium.Cartesian3.fromDegrees(0, lat),
      polyline: {
@@ -291,7 +281,7 @@
    });
    entitiesObj.latLine.push(obj);
  }
  console.log(entitiesObj);

  // 抗锯齿
  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    //判断是否支持图像渲染像素化处理

 src/components/topBtn.vue

@@ -101,7 +101,7 @@
  } else {
    if (res.level == 1) {
      checkFlag.value = null;
      // console.log(res);

      if (res.name == "清除") {
        menuTool.clearALL(checkArr);
      }

 src/views/Map/mapView.vue

@@ -1,9 +1,7 @@
<template>
  <div
    id="cesiumContainer"
    class="cesiumContainer"
  >

  <div class="MapViewBox">
    <div id="cesiumContainer">
    </div>
  </div>
</template>

@@ -35,7 +33,7 @@
</script>

<style  lang="less" scoped>
.cesiumContainer {
.MapViewBox {
  width: 100%;
  height: 100%;
  margin: 0;

 src/views/baseMapSwitching/baseMapSwitching.vue

@@ -45,7 +45,6 @@
let list = ref([]);
const activceIndex = ref();
const setProjectionLayerChange = (res) => {
  console.log(res);
  let projection = {
    code: "",
    extent: [],

 src/views/export/exportMap.vue

@@ -139,7 +139,6 @@
  // window.Viewer.scene.render();
  const myCanvas = window.Viewer.scene.canvas;
  var res = canvas2image.convertToImage(myCanvas, "869", "783", "png");
  debugger;
  url.value = res.src;
};
onMounted((res) => {

 src/views/layer/attributeList.vue

@@ -304,7 +304,6 @@
      value: std[i],
    });
  }
  debugger;
  condOption.value = str;
  formSql.value.type = std[0];
};
@@ -323,7 +322,6 @@
watch(
  () => props.layerData,
  (nVal, oVal) => {
    // console.log("值发生了变更", nVal, oVal);
    startQueryData();
  },
  { deep: true }

 src/views/layer/doubleLayer.vue

@@ -148,10 +148,29 @@
  let isCheck = checked.checkedKeys.indexOf(data.id) > -1;
  // this.setVisiable(data, isCheck);

  let son = estreeRef.value.getCheckedNodes();
  let son = estreeRef.value.getCheckedNodes().reverse();
  rightServer.delLayerAll();

  var setGeoWms = [];
  var url = null;
  for (var i in son) {
    var layerArr = son[i];
    layerArr.checked = true;
    if (layerArr.category == 2 && layerArr.type == 3) {
      if (layerArr.tab != "moon:geo_mappable_unit") {
        setGeoWms.push(layerArr.tab);
        url = layerArr.url;
      }
    } else {
      rightServer.addTreeData(layerArr);
    }
  }
  if (setGeoWms.length > 0) {
    rightServer.addGeoServerMmsLayers(setGeoWms.reverse(), url);
  }

  store.commit("SET_CHECKLAYER", son);
  setVisiable(data, isCheck);
  //setVisiable(data, isCheck);

  // server.addLayer(layerArr, isCheck);
};
@@ -170,7 +189,7 @@
  }

  if (!treeNode.isAdd) {
    rightServer.addTreeData(treeNode);
    //rightServer.addTreeData(treeNode);
    return;
  }
};
@@ -191,7 +210,6 @@

  if (res == 2) {
    layerAttributeIsshow.value = true;
    debugger;
    store.state.tab = e;
  } else {
    if (!e.checked) {
@@ -270,13 +288,29 @@
      }
    });
    DefaultId.value = std;

    //添加默认选中图层
    layerListData.value = dt.result;
    defaultLayer(dt.result);

    var setGeoWms = [];
    var url = null;
    for (var i in dt.result) {
      var layer = dt.result[i];
      if (layer.category == 2 && layer.type == 3) {
        if (layer.tab != "moon:geo_mappable_unit") {
          setGeoWms.push(layer.tab);
          url = layer.url;
        }
      } else {
        rightServer.addTreeData(layer);
      }
    }
    if (setGeoWms.length > 0) {
      rightServer.addGeoServerMmsLayers(setGeoWms.reverse(), url);
    }

    nextTick(() => {
      let son = estreeRef.value.getCheckedNodes();

      store.commit("SET_CHECKLAYER", son);
    });
  }

 src/views/layer/layerDetail.vue

@@ -199,7 +199,7 @@
  //   let aa = stretchOptions[index];
  //   let value = aa.value;
  //   if (brand === value) {
  //     console.log(select.value.$el.children);

  //     select.value.$el.children[0].children[0].setAttribute(
  //       "style",
  //       "background:url(" +

 src/views/layer/layerManage.vue

@@ -108,7 +108,7 @@
import { ElMessage } from "element-plus";
const store = useStore(); // 该方法用于返回store 实例
const stretchValue = ref("");

const emits = defineEmits(["setCloseLayer"]);
let estreeRef = ref();
const setLayer = ref();
const transparence = ref(0);
@@ -126,7 +126,7 @@
const layerObjData = ref(null);
// 当前选中的节点 id
const selectedNodeId = ref(null as any); //做类型断言处理
const emits = defineEmits(["setCloseLayer"]);

//默认选中id
const DefaultId = ref([]);
//图层设置弹框
@@ -138,6 +138,7 @@
  layerSetIsshow.value = res;
};
const setCloseLayer = () => {
  store.state.setLayerManager = false;
  emits("setCloseLayer", false);
};
//选择图层
@@ -166,7 +167,6 @@
    }
  }
  if (setGeoWms.length > 0) {
    console.log(setGeoWms);
    server.addGeoServerMmsLayers(setGeoWms.reverse(), url);
  }
  store.commit("SET_CHECKLAYER", son);
@@ -311,7 +311,6 @@
      }
    }
    if (setGeoWms.length > 0) {
      console.log(setGeoWms);
      server.addGeoServerMmsLayers(setGeoWms.reverse(), url);
    }
    //;
@@ -350,6 +349,7 @@
  },
  { deep: true }
);

// getLayer();
onMounted(() => {
  window.setLayer = getLayer;

 src/views/layer/layerSet.vue

@@ -793,9 +793,7 @@
  data: Tree,
  checked: boolean,
  indeterminate: boolean
) => {
  console.log(data, checked, indeterminate);
};
) => {};
const onSubmit = () => {
  if (!checkedStaste) {
    return ElMessage.warning("请先点击选中相应图层");
@@ -808,9 +806,6 @@
  copyNode.nextSibling = { ...node.nextSibling };
  copyNode.parent = { ...node.parent };

  // console.log(1111111111111, copyNode.previousSibling);
  // console.log(2222222222222, copyNode.nextSibling);
  // console.log(3333333333333, copyNode.parent);
  if (Object.keys(copyNode.previousSibling).length !== 0) {
    // 删除原先的node
    treeRef.value.remove(node.data);
@@ -843,8 +838,6 @@

// 处理节点点击事件
function handleNodeClick(data: any) {
  console.log(data);

  if (data.id === selectedNodeId.value) {
    // 如果当前节点已经选中，则取消选中
    selectedNodeId.value = null;

 src/views/login.vue

@@ -64,9 +64,7 @@
            />
          </el-form-item>
          <el-form-item prop="verify">
            <div
              style="display: flex; justify-content: space-between; width: 100%"
            >
            <div style="display: flex; justify-content: space-between; width: 100%">
              <el-input
                placeholder="请输入验证码（忽略大小写）"
                v-model="ruleForm.verify"
@@ -80,8 +78,7 @@
              type="primary"
              class="nobr loginbtn btnbox"
              @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
            >登录</el-button>
          </el-form-item>
        </el-form>
      </div>
@@ -156,11 +153,10 @@

  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      setLogin();
    } else {
      emitter.emit("handleDraw", true);
      console.log("erro submit!");

      return false;
    }
  });

 src/views/menus.vue

@@ -48,10 +48,20 @@
      v-show="checkMenuFlag == 'l1'"
      style="position: relative; display: flex"
    >
      <layer-manage @setCloseLayer="setCloseLayer"> </layer-manage>

    </div>
    <div v-show="checkMenuFlag == 'l2'">
      <plotting> </plotting>
    <div
      style="position: relative; display: flex"
      v-show="store.state.setLayerManager"
    >
      <layer-manage @setCloseLayer="setCloseLayer"></layer-manage>
    </div>

    <div
      style="position: relative; display: flex"
      v-show="checkMenuFlag == 'l2'"
    >
      <plotting @setCloseplotting="setCloseplotting"> </plotting>
    </div>
    <div v-show="checkMenuFlag == 'l5'">
      <baseMapSwitching> </baseMapSwitching>
@@ -130,10 +140,8 @@
const setShowMapChange = (res) => {
  switch (res.id) {
    case "15":
      debugger;
      break;
    default:
      debugger;
      break;
  }
  // store.state.isShowMap = res;
@@ -143,7 +151,6 @@
    // fullScreen.value = !fullScreen.value;
    screen();
  }
  debugger;
  if (res.id == "l3") {
    thematicMapState.value = false;
    thematicMapBtnState.value = false;
@@ -157,8 +164,16 @@
    checkMenuFlag.value = res.id;
    menuTool.leftTools(res);
  }
  if (res.id == "l1") {
    store.state.setLayerManager = !store.state.setLayerManager;
  } else {
    store.state.setLayerManager = false;
  }
};
const setCloseLayer = (res) => {
  store.state.setLayerManager = false;
};
const setCloseplotting = (res) => {
  checkMenuFlag.value = null;
};
// 切换浏览器全屏
@@ -192,7 +207,6 @@
  if (!isFullScreen()) {
    if (!fullScreen.value) {
      fullScreen.value = !fullScreen.value;
      console.log(fullScreen.value);
    }
  }
});

 src/views/plotting/plotting.vue

@@ -5,7 +5,10 @@
  >
    <div class="plottingTitle">
      <div class="tileLeft">
        <div class="titleImg">
        <div
          class="titleImg"
          @click="setCloseplotting"
        >
          <ArrowLeft />
        </div>
        <div class="titleLable">标绘查询</div>
@@ -52,6 +55,7 @@
  defineProps,
  defineEmits,
} from "vue";
const emits = defineEmits(["setCloseplotting"]);
let list = ref([
  {
    name: "Path #9",
@@ -69,6 +73,9 @@
    icon: "m.png",
  },
]);
const setCloseplotting = () => {
  emits("setCloseplotting", false);
};
</script>

<style lang="less" scoped>
@@ -78,7 +85,7 @@
  background: rgba(7, 8, 14, 0.8);
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  z-index: 40;
  position: absolute;

  .plottingTitle {
    width: calc(100% - 27px);
    height: 42px;

 src/views/query/SpatialQuery.vue

@@ -349,14 +349,14 @@
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");

      if (multipleSelection.value.length <= 0) {
        ElMessage.error("请选择要下载的表");
      } else {
        setDownLoadFrom();
      }
    } else {
      console.log("erro submit!");
   
      return false;
    }
  });

 src/views/search/search.vue

@@ -7,20 +7,37 @@
        placeholder="请输入地名"
      >
        <template #suffix>
          <el-icon title="清除" @click="setSearchClose" class="el-input__icon">
          <el-icon
            title="清除"
            @click="setSearchClose"
            class="el-input__icon"
          >
            <Close />
          </el-icon>
        </template>
        <template #prefix>
          <el-icon @click="setSearchClick" title="查询" class="el-input__icon">
          <el-icon
            @click="setSearchClick"
            title="查询"
            class="el-input__icon"
          >
            <search />
          </el-icon>
        </template>
      </el-input>
    </div>
    <div v-if="searchFLag" class="search_content">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="查询结果" name="1">
    <div
      v-if="searchFLag"
      class="search_content"
    >
      <el-collapse
        v-model="activeNames"
        @change="handleChange"
      >
        <el-collapse-item
          title="查询结果"
          name="1"
        >
          <div class="search_content_text">总查询结果:{{ listData.count }}</div>
          <div class="search_content_text paging">
            总页数：{{ listData.page }}
@@ -109,12 +126,8 @@
  pageSize: 10,
});
const imageLabel = null;
const NumhandleChange = (value: number) => {
  console.log(value);
};
const handleChange = (val: string[]) => {
  console.log(val);
};
const NumhandleChange = (value: number) => {};
const handleChange = (val: string[]) => {};
const setPoitCannel = () => {
  imageLabel.deleteObject();
  imageLabel = null;
@@ -185,7 +198,7 @@
    filter: "name like '" + searchValue.value + "'",
    pageIndex: listData.value.pageIndex,
    pageSize: listData.value.pageSize,
    name: "lunarplacenane",
    name: "lunarplacename",
    hasGeom: 1,
  };
  const data = await dataQuery_selectByPage(obj);
@@ -221,6 +234,7 @@
  width: 243px;
  //   background: rgba(7, 8, 14, 0.8);
  border-radius: 4px;
  z-index: 40px;
  .el-collapse,
  /deep/ .el-collapse-item__wrap {
    border: 0;