场景管理

创建场景

创建个人场景或项目场景

/**
 * 创建新场景；项目id为空时为创建个人场景；项目id不为空时为创建项目场景
 * @param paramObj
 * @param paramObj.sceneName 场景名称
 * @param paramObj.project 项目id
 *  */
export async function createScene(paramObj: {
  sceneName: string
  project?: string
}) {
  const sceneId = newGUID()
  const datas = {
    sceneId: sceneId,
    dataJson: JSON.stringify(await gen_init_data(sceneId, paramObj.sceneName)),
    saveType: '1',
    ROOTPATH: location.origin,
    PAGEPATH: location.origin,
    projectId: paramObj.project
  }
  try {
    const res = await saveScene(datas)
    if (res.code !== 0) {
      throw new Error(res.msg)
    }
    console.log('创建场景成功')
  } catch (error: any) {
    console.log('创建场景失败:', error?.message ?? error?.msg ?? error)
  }
}
/**生成GUID */
function newGUID() {
  return generateGUID().replaceAll('-', '')
}
/**生成时间戳 */
function generateTimestamp() {
  const date = new Date()
  return date.toISOString()
}
/**生成初始dataJson */
async function gen_init_data(sceneId: string, sceneName: string) {
  const defaultSceneImg = await gen_default_scene_img(sceneId)
  const timeStamp = generateTimestamp()
  return {
    basicInfo: {
      sceneId: sceneId,
      title: sceneName,
      keyWord: '',
      coverImg: defaultSceneImg,
      logoImg: '',
      description: '',
      sceneStatus: '2',
      viewPoint: {},
      templateId: '1',
      tempcoverImg: defaultSceneImg,
      backstage: false
    },
    scene: {
      asset: {
        version: '1.0.0',
        date: timeStamp
      },
      scene: {
        properties: {
          minimumDisableDepthTestDistance: 0,
          shadows: false
        },
        imageryLayers: [
          {
            type: 'LSImageryProvider',
            name: {
              title: 'zkxt-img'
            },
            url: '../../../api/admin/tx/preview/v1.0.0/geovis/zkxt-img.lrc?token=9b00db78-ac97-4ead-9cb9-3bee718d024f',
            subdomains: ['', 0, 1, 2, 3],
            show: true
          },
          {
            type: 'LSImageryProvider',
            name: {
              title: 'skyLandImage'
            },
            url: '../../../api/admin/tx/preview/v1.0.0/tdt/tdtMarker.lrc?token=9b00db78-ac97-4ead-9cb9-3bee718d024f',
            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            show: true
          }
        ],
        terrainLayers: [],
        layers: [],
        pageLODLayers: [],
        datasources: [],
        date: timeStamp
      },
      VERSION: (LSGlobe as any)?.VERSION ?? '3.0.0.971',
      Tree: [
        {
          id: 'skyLandImage',
          name: '天地图道路标注',
          type: 1,
          isParent: false,
          dropInner: false,
          checked: true,
          icon: '../../../scene/manage/images/sceneset/tree/icon-imagery.png',
          level: 0,
          tId: 'treeLayer_1',
          parentTId: null,
          open: false,
          zAsync: true,
          isFirstNode: true,
          isLastNode: false,
          isAjaxing: false,
          pId: 0,
          checkedOld: true,
          nocheck: null,
          chkDisabled: false,
          halfCheck: false,
          check_Child_State: -1,
          check_Focus: false,
          isHover: false,
          editNameFlag: false
        },
        {
          id: 'zkxt-img',
          name: '中科星图全球影像',
          type: 1,
          isParent: false,
          dropInner: false,
          checked: true,
          icon: '../../../scene/manage/images/sceneset/tree/icon-imagery.png',
          level: 0,
          tId: 'treeLayer_2',
          parentTId: null,
          open: false,
          zAsync: true,
          isFirstNode: false,
          isLastNode: true,
          isAjaxing: false,
          pId: 0,
          checkedOld: true,
          nocheck: null,
          chkDisabled: false,
          halfCheck: false,
          check_Child_State: -1,
          check_Focus: false,
          isHover: false,
          editNameFlag: false
        }
      ]
    },
    fly: {
      sceneId: sceneId,
      lines: []
    },
    splitscreen: {
      sceneId: sceneId,
      screens: []
    },
    draw: {
      type: 'FeatureCollection',
      features: []
    },
    monomer: {
      type: 'FeatureCollection',
      features: []
    },
    push: {
      type: 'FeatureCollection',
      features: []
    },
    water: {
      type: 'FeatureCollection',
      features: []
    },
    clip: {
      type: 'FeatureCollection',
      features: []
    },
    drawDetail: {
      sceneId: sceneId,
      points: [],
      polylines: [],
      polygons: []
    },
    deleteObj: {
      sceneId: sceneId,
      images: [],
      videos: [],
      drawDetails: []
    }
  }
}
/**生成默认场景图片 */
async function gen_default_scene_img(sceneid: string) {
  const imgBase64 = await urlToBase64('') //图片url
  const fd = new FormData()
  fd.append('sceneId', sceneid)
  fd.append('imageBase64Code', imgBase64)
  const res = await uploadSceneTempImg(fd)
  return res.data
}
/**url转base64 */
async function urlToBase64(url: string): Promise<string> {
  try {
    const response = await fetch(url)
    const blob = await response.blob()
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onload = () => resolve(reader.result as string)
      reader.onerror = reject
      reader.readAsDataURL(blob)
    })
  } catch (error) {
    console.error('图片转base64失败:', error)
    throw error
  }
}
/**
 * 保存场景
 */
function saveScene(data: any) {
  return request({
    url: '/admin/api/scene/v1.0.0/saveScene',
    method: 'post',
    data
  })
}
/**场景上传base64图片
 * @param data sceneId:场景id,imageBase64Code:图片base64(只支持jpeg)
 */
export function uploadSceneTempImg(data: FormData) {
  return request({
    url: '/admin/api/scene/v1.0.0/uploadTempImg',
    method: 'post',
    data
  })
}
function generateGUID(): string {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = (Math.random() * 16) | 0
    const v = c === 'x' ? r : (r & 0x3) | 0x8
    return v.toString(16)
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242

场景列表

获取项目场景列表

function fetchProjectSceneList(params: {
  projectId: string //项目id
  current: number //当前页
  size: number //每页条数
  queryStartDate?: string //查询开始时间,格式YYYY-MM-DD
  queryEndDate?: string //查询结束时间,格式YYYY-MM-DD
  title?: string //场景名称
  createBy?: string //创建人
}) {
  return request({
    url: '/admin/api/scene/v1.0.0/pageList',
    method: 'get',
    params: {
      projectId: params.projectId,
      page: params.current,
      limit: params.size,
      queryStartDate: params.queryStartDate,
      queryEndDate: params.queryEndDate,
      title: params.title,
      createBy: params.createBy
    }
  })
}

获取个人场景/个人所有项目场景列表

function fetchUserSceneList(params: {
  // 1 个人场景 2个人所有项目场景
  queryType: '1' | '2'
  current: string
  size: string
}) {
  return request({
    url: '/admin/api/scene/v1.0.0/pageListByUser',
    method: 'get',
    params
  })
}

删除场景

/**
 * 删除场景
 * @param sceneId 场景id
 */
function deleteScene(sceneId: string) {
  return request({
    url: `/admin/api/scene/v1.0.0/deleteScene`,
    method: 'get',
    params: {
      sceneId
    }
  })
}

打开场景编辑/预览

场景编辑

function editScene(sceneId: string) {
  window.open(`/scene/manage/scenesetting.html?guid=${sceneId}`, '_blank')
}

场景预览

/**预览场景 */
previewScene('ffdf3747e27a4fa69056339ae7ec468a', getSceneTemplateList())

/**
 * 预览场景
 * @param sceneId 场景id
 * @param sceneTemplateListPromise 场景模板列表promise
 */
async function previewScene(
  sceneId: string,
  sceneTemplateListPromise: ReturnType<typeof getSceneTemplateList>
) {
  try {
    const [infoRes, res] = await Promise.all([
      getSceneInfo(sceneId),
      sceneTemplateListPromise
    ])
    const templateId = infoRes.data.templateId
    const list = res.data
    const templeteObj = list.find((e: any) => e.id === templateId)
    window.open(`${templeteObj.url}?guid=${sceneId}`, `_blank`)
  } catch (error) {
    console.error(error)
  }
}
/**
 * 获取场景信息
 * @param sceneId 场景id
 */
function getSceneInfo(sceneId: string) {
  return request({
    url: '/admin/api/scene/v1.0.0/getSceneInfo',
    method: 'get',
    params: {
      sceneId
    }
  })
}
/**
 * 获取场景模板列表
 */
function getSceneTemplateList() {
  return request({
    url: '/admin/api/sceneTemplate/v1.0.0/list',
    method: 'get'
  })
}

场景管理 ​

创建场景 ​

场景列表 ​

获取项目场景列表 ​

获取个人场景/个人所有项目场景列表 ​

删除场景 ​

推荐场景至首页 ​

打开场景编辑/预览 ​

场景编辑 ​

场景预览 ​