|
|
@@ -0,0 +1,275 @@
|
|
|
+<template>
|
|
|
+ <div class="oblique-view">
|
|
|
+ <div
|
|
|
+ id="mars3dContainer"
|
|
|
+ class="mars3d-container"
|
|
|
+ />
|
|
|
+ <button
|
|
|
+ class="switch-pano"
|
|
|
+ @click="onClickSwitchPano"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/images/swkk/changjingdaolan.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <div>全景切换</div>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <router-view />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import "mars3d/dist/mars3d.css"
|
|
|
+import * as mars3d from "mars3d"
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...globalMapState([
|
|
|
+ 'panoData',
|
|
|
+ ]),
|
|
|
+ ...globalMapGetters([
|
|
|
+ 'catalogTopology',
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ async created() {
|
|
|
+ let panoData = await globalApi.fetchPanoData()
|
|
|
+ this.fixPanoData(panoData)
|
|
|
+ this.setPanoData(panoData)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$msgCenter.publish('show-loading')
|
|
|
+ this.initMap().then(
|
|
|
+ (map) => {
|
|
|
+ // 加载模型
|
|
|
+ this.loadModel(map)
|
|
|
+ // 加载标签
|
|
|
+ let graphicLayer = new mars3d.layer.GraphicLayer()
|
|
|
+ map.addLayer(graphicLayer)
|
|
|
+ this.drawLabel(graphicLayer)
|
|
|
+ map.setCameraView({
|
|
|
+ lat: 31.99314,
|
|
|
+ lng: 118.776577,
|
|
|
+ alt: 656,
|
|
|
+ heading: 350,
|
|
|
+ pitch: -43,
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$msgCenter.publish('hide-loading')
|
|
|
+ }, 3000)
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ console.log("地图初始化失败", error)
|
|
|
+ this.$msgCenter.publish('hide-loading')
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {},
|
|
|
+ methods: {
|
|
|
+ ...globalMapMutations([
|
|
|
+ 'setPanoData',
|
|
|
+ ]),
|
|
|
+
|
|
|
+ // todo: 干啥呢？有用吗？
|
|
|
+ fixPanoData(panoData) {
|
|
|
+ let tmp = []
|
|
|
+ panoData.scenes.forEach((item) => {
|
|
|
+ panoData.catalogs.forEach((sub) => {
|
|
|
+ if (item.category == sub.id) {
|
|
|
+ if (tmp.indexOf(sub) < 0) {
|
|
|
+ tmp.push(sub)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ tmp = globalUtils.unique(tmp)
|
|
|
+
|
|
|
+ panoData.catalogs = tmp
|
|
|
+ let rootmp = []
|
|
|
+ tmp.forEach((item) => {
|
|
|
+ panoData.catalogRoot.forEach((sub) => {
|
|
|
+ sub.children = globalUtils.unique(sub.children)
|
|
|
+
|
|
|
+ if (sub.children.indexOf(item.id) > -1) {
|
|
|
+ rootmp.push(sub)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ rootmp = globalUtils.unique(rootmp)
|
|
|
+
|
|
|
+ let sortArr = panoData.catalogRoot.map((item) => item.name)
|
|
|
+ rootmp.sort((a, b) => {
|
|
|
+ return sortArr.indexOf(a.name) - sortArr.indexOf(b.name)
|
|
|
+ })
|
|
|
+
|
|
|
+ panoData.catalogRoot = rootmp.map((item) => {
|
|
|
+ let temp = []
|
|
|
+ item.children = globalUtils.unique(item.children)
|
|
|
+ item.children.forEach((sub) => {
|
|
|
+ tmp.forEach((jj) => {
|
|
|
+ if (jj.id == sub) {
|
|
|
+ temp.push(sub)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ children: temp,
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ panoData.catalogs = tmp
|
|
|
+
|
|
|
+ let cid = "c_" + globalUtils.randomWord(true, 8, 8)
|
|
|
+
|
|
|
+ if (panoData.catalogRoot.length <= 0) {
|
|
|
+ panoData.catalogRoot.push({
|
|
|
+ id: "r_" + globalUtils.randomWord(true, 8, 8),
|
|
|
+ name: "全部场景",
|
|
|
+ children: [cid],
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ if (panoData.catalogs.length <= 0) {
|
|
|
+ panoData.catalogs.push({
|
|
|
+ id: cid,
|
|
|
+ name: "默认二级分组",
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ if (panoData.firstScene) {
|
|
|
+ panoData.firstScene = panoData.scenes.find(
|
|
|
+ (item) => item.sceneCode == panoData.firstScene.sceneCode
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 初始化地图
|
|
|
+ async initMap() {
|
|
|
+ // 读取 config.json 配置文件
|
|
|
+ const json = await mars3d.Util.fetchJson({ url: `${process.env.BASE_URL}oblique/config.json` })
|
|
|
+ console.log("读取 config.json 配置文件完成", json) // 打印测试信息
|
|
|
+ // 创建三维地球场景
|
|
|
+ const mapOptions = json.map3d
|
|
|
+ let map = new mars3d.Map("mars3dContainer", mapOptions)
|
|
|
+ // 打印测试信息
|
|
|
+ // console.log("mars3d的Map主对象构造完成", this.map);
|
|
|
+ // console.log("其中Cesium原生的Cesium.Viewer为", this.map.viewer);
|
|
|
+ return map
|
|
|
+ },
|
|
|
+ // 倾斜模型加载
|
|
|
+ loadModel(_map) {
|
|
|
+ const modelLayer = new mars3d.layer.TilesetLayer({
|
|
|
+ name: "雨花台模型",
|
|
|
+ url: "https://testgis.4dage.com/yuhuatai1021-qp/tileset.json",
|
|
|
+ maximumMemoryUsage: 2048,
|
|
|
+ position: { alt: -290 },
|
|
|
+ preloadFlightDestinations: true,
|
|
|
+ flyTo: false,
|
|
|
+ })
|
|
|
+ _map.addLayer(modelLayer)
|
|
|
+ },
|
|
|
+ drawLabel(_layer) {
|
|
|
+ const graphic = new mars3d.graphic.DivGraphic({
|
|
|
+ position: [118.775298, 31.999126, 80.5],
|
|
|
+ style: {
|
|
|
+ html: `<div
|
|
|
+ style="
|
|
|
+ width: 316px;
|
|
|
+ height: 174px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ cursor:pointer;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ margin-left: 25px;
|
|
|
+ width: 190px;
|
|
|
+ height: 70px;
|
|
|
+ line-height: 70px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 雨花台烈士纪念馆
|
|
|
+ </div>
|
|
|
+ <div><img src="${require('@/assets/images/oblique/spot-tag.png')}"/></div>
|
|
|
+ </div>`,
|
|
|
+ horizontalOrigin: mars3d.Cesium.HorizontalOrigin.CENTER,
|
|
|
+ verticalOrigin: mars3d.Cesium.VerticalOrigin.BOTTOM,
|
|
|
+ // distanceDisplayCondition: new mars3d.Cesium.DistanceDisplayCondition(0, 30000), // 按视距距离显示
|
|
|
+ // scaleByDistance: new mars3d.Cesium.NearFarScalar(100, 1, 1000, 0.5),
|
|
|
+ scale: 0.1,
|
|
|
+ clampToGround: false,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ graphic.on(mars3d.EventType.click, () => {
|
|
|
+ this.$router.push({ name: 'PanoView', params: { scene: this.catalogTopology[0].children[0].children[11] } })
|
|
|
+ })
|
|
|
+
|
|
|
+ _layer.addGraphic(graphic)
|
|
|
+ },
|
|
|
+ onClickSwitchPano() {
|
|
|
+ this.$router.push({ name: 'PanoListInOblique' })
|
|
|
+ }
|
|
|
+ }, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='less' scoped>
|
|
|
+.oblique-view {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 0;
|
|
|
+ #mars3dContainer {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ > button.switch-pano {
|
|
|
+ position: absolute;
|
|
|
+ top: 2.08rem;
|
|
|
+ right: 1.63rem;
|
|
|
+ width: 5rem;
|
|
|
+ z-index: 2;
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ margin-top: 0.17rem;
|
|
|
+ text-shadow: 0 0 0.1rem rgba(0,0,0,0.3);
|
|
|
+ color: #333333;
|
|
|
+ font-size: 1.17rem;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/deep/.mars3d-locationbar {
|
|
|
+ background-color: #000 !important;
|
|
|
+ z-index: 0 !important;
|
|
|
+}
|
|
|
+</style>
|
任一存
