first commit

fuchengshen

2022-07-09 3a25c05b5ab837714f30469cdcb1e2a77d8d7f6c

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
<template>
  <mars-pannel :visible="true" right="10" top="10">
    <div class="f-mb">
      <span>模型URL地址: </span> &nbsp;&nbsp;
      <a-checkbox v-model:checked="isProxy">使用代理</a-checkbox>
      <mars-input v-model:value="modelUrl"></mars-input>
    </div>
    <div class="f-mb">
      <a-space>
        <mars-button @click="onClickStartDarw">标绘</mars-button>
        <mars-button @click="clear">清除</mars-button>
        <mars-button @click="saveGeoJSON">保存</mars-button>
        <a-upload :multiple="false" name="file" accept="json,geojson" :showUploadList="false" @change="openGeoJSON" :beforeUpload="() => false">
          <mars-button> 打开... </mars-button>
        </a-upload>
      </a-space>
      <div class="f-pt">
        <a-space>
          <a-checkbox @change="chkTestTerrain" v-model:checked="isTestTerrain">深度检测</a-checkbox>
          <a-checkbox @change="onlyPickModelPosition" v-model:checked="isonlyModel">仅在3dtiles上标绘</a-checkbox>
          <a-checkbox @change="chkHasTerrain" v-model:checked="isHasTerrain">地形</a-checkbox>
        </a-space>
      </div>
    </div>
  </mars-pannel>
</template>
 
<script lang="ts" setup>
import { ref, markRaw } from "vue"
import { useWidget } from "@mars/widgets/common/store/widget"
import * as mapWork from "./map.js"
 
const { activate, disable, isActivate, updateWidget } = useWidget()
 
interface FileItem {
  uid: string
  name?: string
  status?: string
  response?: string
  url?: string
}
 
interface FileInfo {
  file: FileItem
  fileList: FileItem[]
}
 
const modelUrl = ref<string>("//data.mars3d.cn/gltf/mars/feiji.glb")
 
// 代理
const isProxy = ref<boolean>(false)
const onClickStartDarw = () => {
  mapWork.startDrawModel(modelUrl.value, isProxy.value)
}
 
// 地形
const isHasTerrain = ref<boolean>(true)
const chkHasTerrain = () => {
  mapWork.chkHasTerrain(isHasTerrain.value)
}
 
// 深度检测
const isTestTerrain = ref<boolean>(false)
const chkTestTerrain = () => {
  mapWork.chkTestTerrain(isTestTerrain.value)
}
 
// 仅在3dmodel上绘制
const isonlyModel = ref<boolean>(false)
const onlyPickModelPosition = () => {
  mapWork.onlyPickModelPosition(isonlyModel.value)
}
 
const clear = () => {
  mapWork.graphicLayer.clear()
}
 
// *****************************JSON文件***************************//
// const globalProperties = getCurrentInstance()!.appContext.config.globalProperties
 
// 打开JSON
const openGeoJSON = (info: FileInfo) => {
  mapWork.openGeoJSON(info.file)
}
// 点击保存GeoJSON
const saveGeoJSON = () => {
  mapWork.saveGeoJSON()
}
 
// *****************************属性面板***************************//
 
const showEditor = (e: any) => {
  if (!isActivate("graphic-editor")) {
    activate({
      name: "graphic-editor",
      data: { graphic: markRaw(e.graphic) }
    })
  }
}
mapWork.eventTarget.on("graphicEditor-start", async (e: any) => {
  showEditor(e)
})
// 编辑修改了模型
mapWork.eventTarget.on("graphicEditor-update", async (e: any) => {
  updateWidget("graphic-editor", {
    data: { graphic: markRaw(e.graphic) }
  })
  showEditor(e)
})
 
// 停止编辑修改模型
mapWork.eventTarget.on("graphicEditor-stop", async (e: any) => {
  setTimeout(() => {
    if (!mapWork.graphicLayer.isEditing) {
      disable("graphic-editor")
    }
  }, 100)
})
</script>