拾取效果修改，地下模型效果优化

Surpriseplus

2023-03-16 865fe880b2ee89fd7ac358fa48da5e9510864aa6

拾取效果修改，地下模型效果优化

 src/api/api.js

@@ -1069,6 +1069,12 @@
  return request.get('/dataQuery/selectByGid', { params: params });
}

//数据查询=>根据实体名查询表名
export function dataQuery_selectTabByEntity(params) {
  return request.get('/dataQuery/selectTabByEntity', { params: params });
}






 src/assets/js/drag.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,28 @@
import Vue from 'vue';
//使用Vue.directive()定义一个全局指令
//1.参数一：指令的名称，定义时指令前面不需要写v-
//2.参数二：是一个对象，该对象中有相关的操作函数
//3.在调用的时候必须写v-
const drag = Vue.directive('drag', {
    //1.指令绑定到元素上回立刻执行bind函数，只执行一次
    //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
    //3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
    bind: function (el) { },
    //inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
    inserted: function (el) {
        el.onmousedown = function (e) {
            var disx = e.pageX - el.offsetLeft;
            var disy = e.pageY - el.offsetTop;
            document.onmousemove = function (e) {
                el.style.left = e.pageX - disx + 'px';
                el.style.top = e.pageY - disy + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            }
        }
    },
    //当VNode更新的时候会执行updated，可以触发多次
    updated: function (el) { }
})
export default drag;

 src/components/mapsdk.vue

@@ -353,6 +353,7 @@
      <div
        class="propertiesPop"
        v-if="$store.state.propertiesFlag == '1'"
        v-drag
      >
        <el-card class="box-card">
          <div slot="header">

 src/main.js

@@ -19,7 +19,7 @@
import VueParticles from 'vue-particles'
import dataV from '@jiaminghi/data-view'
import directive from '@/directive/index.js' // directive

import drag from '@/assets/js/drag.js'
Vue.use(directive)
Vue.use(dataV)
Vue.use(VueParticles)

 src/views/Synthesis/LeftMenu.vue

@@ -17,6 +17,7 @@
    <queryinfo ref="queryinfo" />
    <terrainDig ref="terrainDig" />
    <modelAttach ref="modelAttach" />
    <undergroundModel ref="undergroundModel" />
    <input
      type="file"
      accept=".kml"
@@ -184,50 +185,6 @@
          </el-tab-pane>

        </el-tabs>
        <!-- <el-form :model="formInline">
          <el-form-item>
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input
                  size="small"
                  disabled
                  v-model="formInline.file"
                ></el-input>

                <input
                  name="file1"
                  type="file"
                  id="insertFile"
                  multiple="multiple"
                  style="display: none"
                  @change="insertFile( )"
                />
              </el-col>
              <el-col :span="4">
                <el-link
                  @click="getInsertFile( )"
                  :underline="false"
                  icon="el-icon-folder"
                > </el-link>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="setAttachInsert"
              size="mini"
              type="primary"
              plain
            >添加</el-button>
            <el-button
              type="danger"
              plain
              size="mini"
              @click="setAttachDel"
            >删除</el-button>
          </el-form-item>
        </el-form> -->
        <!--     @selection-change="handleAttatchChange" -->

      </div>
    </el-dialog>
@@ -241,6 +198,7 @@
import queryinfo from "../Tools/queryinfo.vue";
import terrainDig from "../Tools/terrainDig.vue";
import modelAttach from "../Tools/ModelAttach.vue";
import undergroundModel from "../Tools/undergroundModel";
import $ from "jquery";
import { getToken } from "@/utils/auth";
import ImageWMS from "ol/source/ImageWMS";
@@ -255,7 +213,11 @@
  comprehensive_deletes,
  comprehensive_selectModelByPageAndCount,
  comprehensive_insertModel,
  comprehensive_updateModel, selectByBuffer
  comprehensive_updateModel, selectByBuffer,
  dataQuery_selectTabByEntity,
  inquiry_selectDomains,
  inquiry_selectFields,
  dataQuery_selectByGid,
} from '../../api/api.js'
import {
  OverviewMap,
@@ -268,7 +230,7 @@
import { geometry } from "@turf/turf";

export default {
  components: { mapinfo, maplayer, queryinfo, terrainDig, modelAttach },
  components: { mapinfo, maplayer, queryinfo, terrainDig, modelAttach, undergroundModel },
  data() {
    return {
      showTwoMenuFlag: false,
@@ -2202,8 +2164,11 @@
          this.$store.state.isNaviget = this.isNaviget;
          break;
        case "b9": //地下模式
          this.UndergroundMode = !this.UndergroundMode;
          window.sgworld.Analysis.UndergroundMode(this.UndergroundMode, 0.3);
          // this.UndergroundMode = !this.UndergroundMode;
          // window.sgworld.Analysis.UndergroundMode(this.UndergroundMode, 0.3);
          this.$refs &&
            this.$refs.undergroundModel &&
            this.$refs.undergroundModel.open("地下模式", null,);
          break;
      }
    },
@@ -2368,19 +2333,80 @@
          name: tab.replaceAll("_", "")
        }

        this.$refs &&
          this.$refs.queryinfo &&
          this.$refs.queryinfo.close("queryinfo");
        this.$store.state.mapPopBoxFlag = "4";
        const res = await dataQuery_selectTabByEntity({
          name: this.$store.state.pickoption.name
        })
        if (res.code != 200) {
          return;
        }
        var value = res.result.split('.')
        this.$store.state.propertiesName = {
          ns: value[0],
          enName: value[1],
          tabDesc: '拾取信息'
        }
        var name = this.$store.state.pickoption.name;
        const data = await inquiry_selectFields({ name: name })
        if (data.code != 200) {
          this.$message.error("列表调用失败")
        }
        const data1 = await inquiry_selectDomains({ name: name })
        if (data1.code != 200) {
          this.$message.error("列表调用失败")
        }
        this.optionx = []
        this.attributeData = []
        var valadata = data.result
        var laydomain = data1.result
        for (var i in valadata) {
          if (valadata[i].showtype == 1) {
            if (
              valadata[i].domainNa != null &&
              valadata[i].domainNa != undefined
            ) {
              for (var j in laydomain) {
                if (laydomain[j].domName == valadata[i].domainNa) {
                  valadata[i].domainNa = laydomain[j].codeDesc
                }
              }
            }
            this.optionx.push(valadata[i])
            this.attributeData.push(valadata[i])
          }
        }

        this.$refs &&
          this.$refs.queryinfo &&
          this.$refs.queryinfo.open("拾取分析", null,);
        this.getTableData()
      }
    },
    async getTableData() {
      this.tableData = []
      const data = await dataQuery_selectByGid(this.$store.state.pickoption)
      if (data.code != 200) {
        return
      }
      var valste = data.result


      for (var j in this.optionx) {
        if (
          this.optionx[j].domainNa != null &&
          this.optionx[j].domainNa != undefined
        ) {

          valste[this.optionx[j].field] = this.optionx[j].domainNa
        }
      }
      var arr = {}
      for (var i = (this.attributeData.length - 1); i >= 0; i--) {
        var vla = this.attributeData[i]
        arr[vla.alias] = valste[vla.field]
      }
      arr['eventid'] = valste.eventid
      this.$store.state.propertiesInfo = arr;

      this.$store.state.propertiesFlag = '1'

    },


    showModelAttach() {
      if (this.$store.state.attachModel) {

 src/views/Tools/undergroundModel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,139 @@
<template>
  <Popup
    ref="pop"
    :title="form.title"
    left="calc(100% - 330px)"
  >
    <div class="undergroundModel">
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
      >
        <el-form-item class="nolabel-form-item">
          <el-form-item
            class="inline-form-item"
            label="地下模式"
          >
            <el-switch
              v-model="form.open"
              @change="openChange"
            > </el-switch>
          </el-form-item>
          <el-form-item
            class="inline-form-item"
            label="地下格网"
          >
            <el-switch
              v-model="form.grid"
              @change="gridChange"
            > </el-switch>
          </el-form-item>
        </el-form-item>
        <el-form-item label="透明度">
          <el-slider
            v-model="form.alpha"
            :min="0"
            :max="100"
            @change="alphaChange"
          ></el-slider>
        </el-form-item>
        <el-form-item
          label="格网深度"
          v-if="form.grid"
        >
          <el-slider
            v-model="form.depth"
            :min="0"
            :max="300"
            @change="depthChange"
          ></el-slider>
        </el-form-item>
      </el-form>
    </div>
  </Popup>
</template>
<script>
import Popup from "./Popup.vue";
let UndergroundMode;
export default {
  name: "undergroundModel",
  components: {
    Popup,
  },
  data() {
    return {
      form: {
        title: "地下模式",
        open: false,
        grid: false,
        alpha: 50,
        depth: 100,
      },
    };
  },
  methods: {
    // å…³é—­å¼¹çª—
    close() {
      this.$refs.pop.close();
    },
    // æ‰“开弹窗
    open() {
      this.$refs.pop.open();
    },
    // å¼€å…³å¼€å…³
    openChange() {
      let value = this.form.alpha / 100;
      if (this.form.open == 1) {
        // this.$notify({
        //   title: "地下模式",
        //   message: "地下模式已开启",
        //   type: "success",
        //   duration: "3000",
        // });
        UndergroundMode = window.sgworld.Analysis.UndergroundMode(true, value);
        UndergroundMode.grid = this.form.grid;
        UndergroundMode.depth = this.form.depth;
      } else {
        window.sgworld.Analysis.UndergroundMode(false, value);
        UndergroundMode = null;
        // this.$notify({
        //   title: "地下模式",
        //   message: "地下模式已关闭",
        //   duration: "3000",
        // });
      }
    },
    // å¼€å…³å¼€å…³
    gridChange() {
      UndergroundMode && (UndergroundMode.grid = this.form.grid);
      // if (this.form.grid) {
      //   this.$notify({
      //     title: "地下模式",
      //     message: "开启地下格网",
      //     type: "success",
      //     duration: "3000",
      //   });
      // } else {
      //   this.$notify({
      //     title: "地下模式",
      //     message: "关闭地下格网",
      //     duration: "3000",
      //   });
      // }
    },
    // æ»‘块儿值调整
    alphaChange() {
      let value = this.form.alpha / 100;
      UndergroundMode && (UndergroundMode.alpha = value);
    },
    // æ»‘块儿值调整
    depthChange() {
      let value = this.form.depth;
      UndergroundMode && (UndergroundMode.depth = value);
    },
  },
};
</script>
<style lang="less">
</style>