ss-editor-vue3
v0.0.11
Published
This is a carla sim scene editor for ThreeJS
Readme
SSEditor 仿真场景编辑器
一个仿真场景编辑器的VUE3插件
1.安装
npm install ss-editor-vue3
# or
pnpm install ss-editor-vue32. 使用
导入
import SSEditor from "ss-editor-vue3";
import "ss-editor-vue3/dist/style.css";资源
将node/node_modules/ss-editor-vue3/dist/ss-editor 拷贝到 项目的public下组件
<SceneEditor/>| 属性 | 说明 | 类型 | 必须 |
|------------|---------------------------|-----------|----|
| option | 编辑器配置，配置格式见 option | Object | 否 |
| readonly | 设置编辑器是否为只读模式 | boolean | 否 |
| 事件 | 说明 | 回调值 |
|-----------|-----------------------------------------------------------------------------|----------------------|
| message | 编辑器发生的消息type 表示消息类型支持 success\|info\|warning\|errortext消息内容 | Object<type, text> |
| success | 场景加载成功时 | |
| error | 场景加载失败时 | msg 失败的原因 |
| 方法 | 说明 | 参数 | 返回值 |
|------------------|----------------------------------------------------------------------------------------------------------------|----------------------------|----------|
| setRoadNetwork | 设置场景路网，首次编辑/创建参数路网roadNetwork格式 车道方向-车道数例如'2-2'表示使用一个双向两车道的路网1表示单向 2表示双向，车道数支持2～6 | string | 无 | | Object | 无 |
| setValue | 设置场景编辑器值，用于已保存数据回显，二次编辑 | Object | 无 |
| getValue | 获取场景编辑器值，值可以直接作为仿真接口的字段，返回值格式说明见scene | 无 | Object |
| undo | 设置编辑器控制撤销/恢复操作编辑器默认未绑定快捷键，通过隐藏默认工具栏绑定次方法实现快捷键 | false撤销操作true恢复操作 | 无 |
// 格式说明
const option = {
// 是否开启撤销/恢复工具
undo: true,
// 是否开启天空渲染，默认不开启
sky: false,
// 初始缩放 值范围1～10， 1视角最远 10视角最近 默认为1
initZoom:5,
}const sceneValue = {
elements: {
// 路网描述
roadNetwork: [{
id: "1",
code: "Highway_Twoway_Fourlane_500m",
label: "双向四车道",
type: "2-4",
factory: "roadNetwork",
params: {
// 道路信息 key为道路id，value为道路中的车道id，连续的值表示连续车道
roads: {
"0": [
{
laneId: 1,
laneType: "drive"
}, {
laneId: 2,
laneType: "stop"
}
]
}
}
}],
// 车辆信息
vehicle: [{
id: "2b19c3cf81fc41f38c6c672a17846ab1",
code: "vehicle.mzone.suv",
label: "SUV",
type: "SUV",
factory: "vehicle",
params: {
// 所在位置（绝对位置）
position: {"x": 285.4231304641456, "y": 7.226915302447539, "z": 0},
// 车辆姿态 度
rotate: {"yaw": 179.7330343999863, "pitch": 0, "roll": 3.1805546814635168e-15},
// 世界位置（相对路网）
world: {"x": 30.795, "y": 7.206, "z": 0},
// 车辆所在道路信息
road: {
roadId: "0",
laneId: 1,
laneType: "driving"
}
}
}]
}
}示例代码
<script setup>
import SSEditor from "ss-editor";
import "ss-editor/dist/style.css";
// 代理
const {proxy} = getCurrentInstance();
// 编辑器组件
let editor = null;
// 只读模式
const readonly = ref(false);
// 默认配置
const option = {
undo: true,
sky: false,
initZoom: 5,
}
/**
* 当有消息提示时
* @param message
*/
const onMessage = (message) => alert(`${message.type} : ${message.text}`);
/**
* 加载成功
*/
const onSuccess = () => console.log("场景加载成功");
/**
* 加载失败
* @param msg
*/
const onError = msg => console.log("场景加载失败", msg);
/**
* 获取值
*/
const getValue = () => console.log(editor.getValue());
/**
* 重载
* @returns {*}
*/
const reload = () => editor.setValue(editor.getValue());
/**
* 撤销重做
* @param redo
* @returns {*}
*/
const undo = redo => editor.undo(redo);
/**
* 设置制度模式
* @returns {boolean}
*/
const setReadonly = () => readonly.value = !readonly.value;
// 挂载
onMounted(() => {
// 获取组件
editor = proxy.$refs["sceneEditorRef"];
// 模拟初始加载（创建时）
// editor.setRoadNetwork("2-2");
// 模拟初始加载（编辑时）
editor.setValue({
"elements": {
"roadNetwork": [{
"id": "1",
"code": "Highway_Twoway_Fourlane_500m",
"label": "双向四车道",
"type": "2-4",
"factory": "roadNetwork",
"params": {
"roads": {
"0": [{"laneId": -5, "laneType": "stop"}, {
"laneId": -4,
"laneType": "driving"
}, {"laneId": -3, "laneType": "driving"}, {"laneId": -2, "laneType": "driving"}, {
"laneId": -1,
"laneType": "driving"
}, {"laneId": 0, "laneType": "none"}, {"laneId": 1, "laneType": "stop"}, {
"laneId": 2,
"laneType": "stop"
}, {"laneId": 3, "laneType": "driving"}, {"laneId": 4, "laneType": "driving"}, {
"laneId": 5,
"laneType": "driving"
}, {"laneId": 6, "laneType": "driving"}, {"laneId": 7, "laneType": "stop"}]
}
}
}],
"vehicle": [{
"id": "2b19c3cf81fc41f38c6c672a17846ab1",
"code": "vehicle.mzone.suv",
"label": "SUV",
"type": "SUV",
"factory": "vehicle",
"params": {
"position": {"x": 285.4231304641456, "y": 7.226915302447539, "z": 0},
"rotate": {"yaw": 179.7330343999863, "pitch": 0, "roll": 3.1805546814635168e-15},
"world": {"x": 30.795, "y": 7.206, "z": 0},
"road": {"roadId": "0", "laneId": 4, "laneType": "driving"}
}
}, {
"id": "d7975e4b33bc4958a763666355660ff7",
"code": "vehicle.mzone.suv",
"label": "SUV",
"type": "SUV",
"factory": "vehicle",
"params": {
"position": {"x": 282.51947075590084, "y": 9.761556502041035, "z": 0.0166284091651972},
"rotate": {"yaw": -141.64554369211578, "pitch": -3.0503771223653757, "roll": 8.81909872114285},
"world": {"x": 27.872, "y": 9.752, "z": 0},
"road": {"roadId": "0", "laneId": 5, "laneType": "driving"}
}
}]
}
});
});
</script>
<template>
<div class="editor-wrapper">
<div class="tools">
<div class="title">场景编辑器示例</div>
<div class="buttons">
<div class="button" @click="setReadonly()">{{ readonly ? "只读" : "编辑" }}</div>
<div class="button" @click="undo(false)">撤销</div>
<div class="button" @click="undo(true)">重做</div>
<div class="button" @click="getValue">获取</div>
<div class="button" @click="reload">重载</div>
</div>
</div>
<div class="editor">
<SceneEditor ref="sceneEditorRef"
:option="option"
:readonly="readonly"
@message="onMessage"
@success="onSuccess"
@error="onError"/>
</div>
</div>
</template>
<style scoped lang="scss">
.editor-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
.tools {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
border-bottom: 1px solid #eeeeee;
z-index: 10;
user-select: none;
.title {
font-weight: bold;
color: #2E5482;
}
.buttons {
gap: 1rem;
display: flex;
.button {
padding: 6px 16px;
background: #0077ff;
color: #fff;
border-radius: 4px;
transition: all 0.2s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
&:hover {
opacity: .8;
}
}
}
}
.editor {
flex: auto;
min-height: 1px;
}
}
</style>