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
<template>
  <mars-pannel :visible="true" right="10" bottom="40">
    <a-space>
      <mars-button @click="onClickCenterAtTerrain">定位至山区</mars-button>
      <mars-button @click="onClickCenterAtModel">定位至模型</mars-button>
    </a-space>
  </mars-pannel>
</template>
 
<script>
/**
 * 公共组件:快捷定位
 * @copyright 火星科技 mars3d.cn
 * @author 木遥 2022-01-01
 */
import { defineComponent, ref } from "vue"
 
export default defineComponent({
  setup() {
    // mapWork是map.js内定义的所有对象, 在项目中使用时可以改为import方式使用:  import * as mapWork from './map.js'
    const mapWork = window.mapWork
    const mars3d = mapWork.mars3d
    const Cesium = mapWork.Cesium
 
    // let modelTest
    //  定位至山区
    const onClickCenterAtTerrain = () => {
      mapWork.map.setCameraView({ lat: 30.859414, lng: 116.28709, alt: 8617, heading: 18, pitch: -28 })
    }
 
    // 定位至模型
    let modelTest
    const onClickCenterAtModel = () => {
      const map = mapWork.map
      if (!modelTest) {
        modelTest = new mars3d.layer.TilesetLayer({
          url: "//data.mars3d.cn/3dtiles/qx-simiao/tileset.json",
          position: { alt: 80.6 },
          maximumScreenSpaceError: 1,
          maximumMemoryUsage: 1024,
          flyTo: true
        })
        map.addLayer(modelTest)
      }
      map.setCameraView({ lat: 33.587396, lng: 119.03181, alt: 588, heading: 0, pitch: -45 })
    }
 
    return {
      onClickCenterAtTerrain,
      onClickCenterAtModel
    }
  }
})
</script>
<style lang="less" scoped>
.localBtn {
  top: auto;
  bottom: 40px;
  right: 10px;
}
</style>