工具

linwe

2024-11-19 626086d6f2106df7ff161ea66fe5a8d8a6863319

工具

 src/assets/json/qyfw.json

@@ -136,7 +136,7 @@
      "properties": {
        "FID": 2,
        "Id": 0,
        "name": "江西东玕科技有限公司"
        "name": "江西东玶科技有限公司"
      }
    },
    {
@@ -716,7 +716,7 @@
      "properties": {
        "FID": 15,
        "Id": 0,
        "name": "吉水金城新材料加工有限公司"
        "name": "吉水金诚新材料加工有限公司"
      }
    },
    {
@@ -792,7 +792,7 @@
      "properties": {
        "FID": 17,
        "Id": 0,
        "name": "绿源污水处理厂"
        "name": "吉水县绿源污水处理厂"
      }
    }
  ]

 src/pages/layout/components/scomponents/layersControl.vue

@@ -466,7 +466,7 @@
          addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])

          function computeCircle (radius) {
          function computeCircle(radius) {
            var positions = []
            for (var i = 0; i < 360; i++) {
              var radians = DC.Math.toRadians(i)
@@ -509,7 +509,7 @@
  })
}

function findObjectById (data, id) {
function findObjectById(data, id) {
  // 遍历数据数组
  for (let i = 0; i < data.length; i++) {
    const item = data[i]
@@ -548,7 +548,7 @@

  console.log(checkIds, key)

  if (!checkIds.some(i => i == key)) {
  if (checkIds && !checkIds.some(i => i == key)) {
    return
  }


 src/pages/layout/components/scomponents/tool/curtain.vue

New file
@@ -0,0 +1,103 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 15:48:36
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 19:53:49
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\tool\location.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
    <public-box style="z-index: 100;">
        <template #name>
            <div class="name"><i class="fa fa-map-pin"></i>&nbsp;卷帘对比 &nbsp;</div>
        </template>

        <template #close>
            <div class="close cursor-p" @click="$emit('closeChild')"><i class="fa fa-close"></i></div>
        </template>

        <template #content>
            <div class="cur-btn">
                <div class="m-4">
                    <p>左侧图层</p>
                    <el-select class="transparent-bg" v-model="value1" placeholder="天地图">
                        <el-option v-for="item in components" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="m-4">
                    <p>右侧图层</p>
                    <el-select popper-class="transparent-bg" v-model="value2" collapse-tags placeholder="天地图">
                        <el-option v-for="item in components" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
        </template>
    </public-box>
</template>
  
<script setup>
const value1 = ref([])
const value2 = ref([])



onMounted(() => {
    window.$viewer.sceneSplit.enable = true
})

const flyTo = () => {
    // window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
}

onUnmounted(() => {
    window.$viewer.sceneSplit.enable = false
})

const components = [
    { label: '天地图', value: '1' },
    { label: '谷歌影像', value: '2' },
    { label: '谷歌矢量', value: '3' },
    { label: '高德影像', value: '4' },
]
</script>
  
<style lang="scss" scoped >
.cur-btn {
    margin: 10px 0;
    display: flex;

    // justify-content: center;
    // align-items: center;

    // &.el-select {
    //     width: 50px;
    // }
}

.m-4 {
    text-align: center;
    width: 200px;
}

.transparent-bg {
    background: transparent;

}

// 重新el——select样式
::v-deep .el-select__wrapper {
    background: transparent;

}

::v-deep .el-select-dropdown {
    // background: transparent;
    background-color: aqua;
}

::v-deep .el-select .el-select__placeholder {
    color: #fff;
}
</style>

 src/pages/layout/components/scomponents/tool/measure.vue

New file
@@ -0,0 +1,227 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 15:48:36
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 19:53:49
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\tool\location.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
    <public-box style="z-index: 100;">
        <template #name>
            <div class="name"><i class="fa fa-map-pin"></i>&nbsp;测量工具</div>
        </template>

        <template #close>
            <div class="close cursor-p" @click="$emit('closeChild')"><i class="fa fa-close"></i></div>
        </template>

        <template #content>

            <div>
                <div class="container-box">
                    <div v-for="(item, index) in buttonList" :key="index" class="item" @click="item.click">
                        <img class="icon_img" src="../../../../../assets/images/add.png" alt="" srcset="">
                        <div class="text">{{ item.label }}</div>
                    </div>
                </div>

                <div class="button-clear">
                    <button @click="deactivate">清空测量数据</button>
                </div>
            </div>



        </template>
    </public-box>
</template>
  
<script setup>
const longitude = ref(0)
const latitude = ref(0)
const height = ref(0)
let measure = reactive({})
onMounted(() => {
    measure = new DC.Measure(window.$viewer)
})

onUnmounted(() => {
    deactivate()
})
// 空间距离
function calcDistance() {
    measure.distance()
}
// 地面距离
function distanceSurface() {
    measure.distanceSurface()
}
// 平面面积
function calcArea(item) {
    console.log('calcArea********************************', item)
    measure.area()
}
// 地面面积
function areaSurface() {
    measure.areaSurface()
}
// 角度
function calcAngle() {
    measure.angle()
}
// 模型角度
function calcModelAngle() {
    measure.angle({
        clampToModel: true
    })
}
//   高度
function calcHeight() {
    measure.height()
}
//   模型高度
function calcModelHeight() {
    measure.height({
        clampToModel: true
    })
}
// 航向
function calcHeading() {
    measure.heading()
}
// 模型航向
function areaHeight() {
    measure.areaHeight()
}
// 三角测量

function calcTriangleHeight() {
    measure.triangleHeight()
}
// 模型三角测量
function calcModelTriangleHeight() {
    measure.triangleHeight({
        clampToModel: true
    })
}

// 清空
function deactivate() {
    console.log('deactivate********************************')
    measure.deactivate()
}

const buttonList = [
    {
        label: '空间距离',
        value: 'space',
        imges: '../../../../../assets/images/add.png',
        click: calcDistance
    },
    {
        label: '贴地距离',
        value: 'area',
        imges: '../../../../../assets/images/add.png',
        click: distanceSurface
    },
    {
        label: '剖面',
        value: 'volume',
        imges: '../../../../../assets/images/add.png'
    },
    {
        label: '水平面积',
        value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: calcArea
    },
    {
        label: '贴地面积', value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: areaSurface

    },
    {
        label: '角度',
        value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: calcAngle
    },
    {
        label: '高度差',
        value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: calcAngle
    },
    {
        label: '三角测量',
        value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: calcModelTriangleHeight
    },
    {
        label: '坐标测量',
        value: 'volume',
        imges: '../../../../../assets/images/add.png'
    },
]

const flyTo = () => {
    // window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
}
</script>
  
<style lang="scss" >
.container-box {
    width: 230px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 12px;
    /* 水平居中 */
}

.icon_img {
    width: 40px;
    height: 40px;
}

.item {
    flex: 1 0 33.33%;
    /* 每个项占 1/3 的宽度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    box-sizing: border-box;
    /* 确保 padding 和 border 不影响宽度 */
    padding: 10px;
    /* 可选：增加内边距 */
}

.button-clear {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.button-clear button {
    background-color: rgb(25, 0, 255);
    padding: 10px;
    border: none;
    color: #fff;
}

.container-box .text:hover {
    color: blue;
}

.text {
    color: pink;
}
</style>

 src/pages/layout/components/scomponents/toolList.vue

@@ -4,9 +4,9 @@
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-07 16:23:56
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\toolList.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
 * @Description:
 *
 * Copyright (c) 2024 by shuishen, All Rights Reserved.
-->
<template>
  <ul v-show="moreToolShow" class="tool-list-box">
@@ -27,6 +27,8 @@
  }
})
import location from './tool/location.vue'
import curtain from './tool/curtain.vue'
import measure from './tool/measure.vue'
import exportScene from './tool/exportScene.vue'
import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs'
const emit = defineEmits(['close'])
@@ -36,6 +38,7 @@
  {
    icon: 'fa fa-calculator',
    title: '图上量算',
    component: measure,
  },
  {
    icon: 'fa fa-bar-chart',
@@ -80,6 +83,7 @@
  {
    icon: 'fa fa-columns',
    title: '卷帘对比',
    component: curtain
  },
  {
    icon: 'fa fa-window-restore',
@@ -127,4 +131,4 @@
    margin-top: 0;
  }
}
</style>
</style>