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) => {
|
||||
if (!options.modelList || options.modelList.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 3d模型参数
|
||||
const tilesetOption = {
|
||||
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
|
||||
const defaultPoint = [102, 25]
|
||||
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 defaultPolygon = Cesium.Cartesian3.fromDegreesArray([102.1, 24.9, 102.1, 25.1, 101.9, 25.1, 101.9, 24.9])
|
||||
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([101.99, 25.01, 102.01, 25.01, 102.02, 24.99, 101.99, 24.99])
|
||||
const mapOptions = {
|
||||
setView: {
|
||||
x: defaultPoint[0],
|
||||
|
|
|
|||
Loading…
Reference in New Issue