1.修复模型设置初始化bug；2.优化样式配置测试数据；3.清理不需要的文件；
This commit is contained in:
parent
8ac8cd5c5c
commit
b0d5c1ef58
|
|
@ -86,6 +86,10 @@ export function useConfigSetting(viewer) {
|
||||||
|
|
||||||
// 设置模型
|
// 设置模型
|
||||||
const setModel = async (options) => {
|
const setModel = async (options) => {
|
||||||
|
if (!options.modelList || options.modelList.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 3d模型参数
|
// 3d模型参数
|
||||||
const tilesetOption = {
|
const tilesetOption = {
|
||||||
maximumScreenSpaceError: 1, // 应对大疆一键生成的模型问题；如模型能正常显示但文件加载太过频繁，可增大数值
|
maximumScreenSpaceError: 1, // 应对大疆一键生成的模型问题；如模型能正常显示但文件加载太过频繁，可增大数值
|
||||||
|
|
|
||||||
|
|
@ -1,234 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-dialog v-model="dialogVisible" title="选择图标/图片" width="600px" @close="handleCancel">
|
|
||||||
<div class="image-library-content">
|
|
||||||
<!-- 上传本地图片 -->
|
|
||||||
<div class="upload-area">
|
|
||||||
<el-upload action="#" :auto-upload="false" :show-file-list="false" :on-change="handleFileChange"
|
|
||||||
accept="image/*">
|
|
||||||
<el-button type="primary">上传本地图片</el-button>
|
|
||||||
</el-upload>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 图标/图片列表 -->
|
|
||||||
<div class="item-list">
|
|
||||||
<div v-for="item in items" :key="item.id" :class="['item', { 'is-selected': selectedItem?.id === item.id }]"
|
|
||||||
@click="selectItem(item)">
|
|
||||||
<template v-if="item.type === 'system' && item.component">
|
|
||||||
<!-- Element Plus Icon -->
|
|
||||||
<el-icon :size="30">
|
|
||||||
<component :is="item.component" />
|
|
||||||
</el-icon>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.type === 'system' && item.display">
|
|
||||||
<!-- System Image URL -->
|
|
||||||
<img :src="item.display" alt="system image" class="item-image" />
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.type === 'local' && item.display">
|
|
||||||
<!-- Local Base64 Image -->
|
|
||||||
<img :src="item.display" alt="local image" class="item-image" />
|
|
||||||
</template>
|
|
||||||
<div v-else class="item-placeholder">无预览</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button @click="handleCancel">取消</el-button>
|
|
||||||
<el-button type="primary" @click="handleConfirm" :disabled="!selectedItem">
|
|
||||||
确定
|
|
||||||
</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, watch, onMounted } from 'vue';
|
|
||||||
import { ElDialog, ElButton, ElUpload, ElIcon, ElMessage } from 'element-plus';
|
|
||||||
// 导入 Element Plus Icons (按需导入或全局注册)
|
|
||||||
// 如果是全局注册，则不需要在这里导入
|
|
||||||
// 如果是按需导入，需要导入你用到的图标组件
|
|
||||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
|
||||||
|
|
||||||
// 定义 props
|
|
||||||
const props = defineProps({
|
|
||||||
visible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
initialValue: {
|
|
||||||
type: String, // 传入的当前选中图片的值 (URL 或 Base64)
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 定义 emits
|
|
||||||
const emit = defineEmits(['update:visible', 'confirm']);
|
|
||||||
|
|
||||||
// 弹窗可见性
|
|
||||||
const dialogVisible = ref(props.visible);
|
|
||||||
|
|
||||||
// 图标/图片列表数据
|
|
||||||
const items = ref([]);
|
|
||||||
|
|
||||||
// 当前选中的项
|
|
||||||
const selectedItem = ref(null);
|
|
||||||
|
|
||||||
// 默认系统图标和图片
|
|
||||||
const defaultSystemItems = [
|
|
||||||
// Element Plus Icons (示例)
|
|
||||||
{ id: 'icon-star', type: 'system', display: 'Star', value: 'ElIconStarFilled', component: 'ElIconStarFilled' },
|
|
||||||
{ id: 'icon-picture', type: 'system', display: 'Picture', value: 'ElIconPicture', component: 'ElIconPicture' },
|
|
||||||
{ id: 'icon-folder', type: 'system', display: 'Folder', value: 'ElIconFolder', component: 'ElIconFolder' },
|
|
||||||
{ id: 'icon-setting', type: 'system', display: 'Setting', value: 'ElIconSetting', component: 'ElIconSetting' },
|
|
||||||
{ id: 'icon-user', type: 'system', display: 'User', value: 'ElIconUser', component: 'ElIconUser' },
|
|
||||||
// System Images (示例 URLs)
|
|
||||||
{ id: 'img-placeholder-1', type: 'system', display: 'https://via.placeholder.com/50x50?text=Img1', value: 'https://via.placeholder.com/50x50?text=Img1' },
|
|
||||||
{ id: 'img-placeholder-2', type: 'system', display: 'https://via.placeholder.com/50x50?text=Img2', value: 'https://via.placeholder.com/50x50?text=Img2' },
|
|
||||||
];
|
|
||||||
|
|
||||||
// 加载默认系统项
|
|
||||||
// onMounted(() => {
|
|
||||||
// items.value = [...defaultSystemItems];
|
|
||||||
// });
|
|
||||||
|
|
||||||
// 监听 visible prop 变化，同步弹窗状态并处理回显
|
|
||||||
// watch(() => props.visible, (newVal) => {
|
|
||||||
// dialogVisible.value = newVal;
|
|
||||||
// if (newVal) {
|
|
||||||
// // 弹窗打开时，根据 initialValue 查找并选中对应的项
|
|
||||||
// selectedItem.value = items.value.find(item => item.value === props.initialValue) || null;
|
|
||||||
// } else {
|
|
||||||
// // 弹窗关闭时，重置选中状态
|
|
||||||
// selectedItem.value = null;
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
// 处理文件上传变化
|
|
||||||
const handleFileChange = (uploadFile) => {
|
|
||||||
const file = uploadFile.raw;
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
// 检查文件类型
|
|
||||||
if (!file.type.startsWith('image/')) {
|
|
||||||
ElMessage.error('只能上传图片文件!');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查文件大小 (可选)
|
|
||||||
// const isLt2M = file.size / 1024 / 1024 < 2;
|
|
||||||
// if (!isLt2M) {
|
|
||||||
// ElMessage.error('图片文件大小不能超过 2MB!');
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onloadend = () => {
|
|
||||||
const base64String = reader.result;
|
|
||||||
const newItem = {
|
|
||||||
id: `local-${Date.now()}-${Math.random().toString(16).slice(2)}`, // 确保唯一ID
|
|
||||||
type: 'local',
|
|
||||||
display: base64String, // Base64 用于显示
|
|
||||||
value: base64String // Base64 用于返回
|
|
||||||
};
|
|
||||||
items.value.push(newItem);
|
|
||||||
// 自动选中新上传的图片 (可选)
|
|
||||||
// selectedItem.value = newItem;
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选中一个项
|
|
||||||
const selectItem = (item) => {
|
|
||||||
selectedItem.value = item;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理确定按钮点击
|
|
||||||
const handleConfirm = () => {
|
|
||||||
if (selectedItem.value) {
|
|
||||||
// 返回选中项的 value (URL 或 Base64)
|
|
||||||
emit('confirm', selectedItem.value.value);
|
|
||||||
// 关闭弹窗
|
|
||||||
emit('update:visible', false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理取消按钮点击或弹窗关闭
|
|
||||||
const handleCancel = () => {
|
|
||||||
emit('update:visible', false);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 将 Element Plus Icons 暴露给模板使用 (如果按需导入)
|
|
||||||
// 如果是全局注册，则不需要这一步
|
|
||||||
const icons = ElementPlusIconsVue;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.image-library-content {
|
|
||||||
padding: 0 20px 20px 20px;
|
|
||||||
/* 调整内边距 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-area {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
text-align: right;
|
|
||||||
/* 让上传按钮靠右 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
/* 项之间的间距 */
|
|
||||||
max-height: 300px;
|
|
||||||
/* 限制列表高度并添加滚动条 */
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-right: 10px;
|
|
||||||
/* 为滚动条留出空间 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
width: 60px;
|
|
||||||
/* 项的固定宽度 */
|
|
||||||
height: 60px;
|
|
||||||
/* 项的固定高度 */
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.3s;
|
|
||||||
overflow: hidden;
|
|
||||||
/* 防止图片溢出 */
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:hover {
|
|
||||||
border-color: #409eff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item.is-selected {
|
|
||||||
border-color: #409eff;
|
|
||||||
box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-image {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
/* 保持图片比例 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-placeholder {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #909399;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 调整 Element Plus Icon 的样式 */
|
|
||||||
.item .el-icon {
|
|
||||||
font-size: 30px;
|
|
||||||
/* 确保图标大小合适 */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -314,8 +314,8 @@ let viewer = null
|
||||||
let entity = null
|
let entity = null
|
||||||
const defaultPoint = [102, 25]
|
const defaultPoint = [102, 25]
|
||||||
const defaultPosition = Cesium.Cartesian3.fromDegrees(...defaultPoint)
|
const defaultPosition = Cesium.Cartesian3.fromDegrees(...defaultPoint)
|
||||||
const defaultPolyline = Cesium.Cartesian3.fromDegreesArray([102.1, 24.9, 102.1, 25.1, 101.9, 24.9, 101.9, 25.2])
|
const defaultPolyline = Cesium.Cartesian3.fromDegreesArray([101.99, 25.01, 102.01, 25.01, 101.99, 24.99, 102.02, 24.99])
|
||||||
const defaultPolygon = Cesium.Cartesian3.fromDegreesArray([102.1, 24.9, 102.1, 25.1, 101.9, 25.1, 101.9, 24.9])
|
const defaultPolygon = Cesium.Cartesian3.fromDegreesArray([101.99, 25.01, 102.01, 25.01, 102.02, 24.99, 101.99, 24.99])
|
||||||
const mapOptions = {
|
const mapOptions = {
|
||||||
setView: {
|
setView: {
|
||||||
x: defaultPoint[0],
|
x: defaultPoint[0],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue