3.3 1.自定义标签，退出后自动清除 2.自定义标签，转换二维码的数据格式ok，移动端对接二维码ok， 3.自定义标签点击移动到指定位置 ok 4....

liuyg

2022-03-04 a22aa1086eeef39a26cc161326ce09cd183185ea

 src/components/map/index.vue

@@ -1,17 +1,23 @@
/* eslint-disable camelcase */
<template>
    <div id="viewer-container" style="height: 100%; width: 100%;" @click="mapClick($event)">
  <div
    id="viewer-container"
    style="height: 100%; width: 100%"
    @click="mapClick($event)"
  >
        <video
            id="video"
            style="position: fixed;
                visibility: hidden;"
      style="position: fixed; visibility: hidden"
            muted
            autoplay
            loop
            crossorigin
            controls
        >
            <source src="http://dc.dvgis.cn/examples/data/demo.mp4" type="video/mp4" />
      <source
        src="http://dc.dvgis.cn/examples/data/demo.mp4"
        type="video/mp4"
      />
        </video>

        <div
@@ -28,7 +34,9 @@
            background: #2196f3ed;
            z-index: 11;
        "
        >智慧社区</div>
    >
      智慧校区
    </div>

        <dimension :areaLayer="areaLayer" />

@@ -46,190 +54,189 @@
    </div>
</template>
<script>

import { mapGetters } from 'vuex'
import mapPopup from './components/mapPopup.vue'
import campusBuildingSearch from './components/campusBuildingSearch.vue'
import dimension from './components/dimension.vue'
import { mapGetters } from "vuex";
import mapPopup from "./components/mapPopup.vue";
import campusBuildingSearch from "./components/campusBuildingSearch.vue";
import dimension from "./components/dimension.vue";

export default {
    name: 'mapBox',
  name: "mapBox",
    components: {
        mapPopup,
        campusBuildingSearch,
        dimension
    dimension,
    },
    data () {
        return {
            DC: null,
            areaLayer: null
        }
      areaLayer: null,
    };
    },
    watch: {
        searchPopupFlag: {
            immediate: true,
            handler (newVal, oldVal) {
                if (newVal == true) {
                    if (this.$route.path.indexOf('/pcLayout/default/service') != -1) {
                        this.$store.dispatch('delVisitedViews', this.$route)
                        this.$router.push('/pcLayout/default')
          if (this.$route.path.indexOf("/pcLayout/default/service") != -1) {
            this.$store.dispatch("delVisitedViews", this.$route);
            this.$router.push("/pcLayout/default");
                    }

                    if (this.$route.path.indexOf('/orgnav') != -1) {
                        this.$store.dispatch('delVisitedViews', this.$route)
                        this.$router.push('/pcLayout/default')
                        this.$store.commit('SET_ORGNAVBARTITLE', '')
                        this.$store.commit('SET_ORGNAVBARLIST', [])
                        this.$store.commit('SET_ORGNAVBARFLAG', false)
          if (this.$route.path.indexOf("/orgnav") != -1) {
            this.$store.dispatch("delVisitedViews", this.$route);
            this.$router.push("/pcLayout/default");
            this.$store.commit("SET_ORGNAVBARTITLE", "");
            this.$store.commit("SET_ORGNAVBARLIST", []);
            this.$store.commit("SET_ORGNAVBARFLAG", false);
                    }

                    if (this.orgNavBarFlag == true) {
                        this.$store.commit('SET_ORGNAVBARTITLE', '')
                        this.$store.commit('SET_ORGNAVBARLIST', [])
                        this.$store.commit('SET_ORGNAVBARFLAG', false)
            this.$store.commit("SET_ORGNAVBARTITLE", "");
            this.$store.commit("SET_ORGNAVBARLIST", []);
            this.$store.commit("SET_ORGNAVBARFLAG", false);
                    }

                    if (this.$route.path.indexOf('/arc') != -1) {
                        this.$store.dispatch('delVisitedViews', this.$route)
                        this.$router.push('/pcLayout/default')
                        this.$store.commit('SET_ARCNAVBARTITLE', '')
                        this.$store.commit('SET_ARCNAVBARCODE', '')
                        this.$store.commit('SET_ARCNAVBARFLAG', false)
          if (this.$route.path.indexOf("/arc") != -1) {
            this.$store.dispatch("delVisitedViews", this.$route);
            this.$router.push("/pcLayout/default");
            this.$store.commit("SET_ARCNAVBARTITLE", "");
            this.$store.commit("SET_ARCNAVBARCODE", "");
            this.$store.commit("SET_ARCNAVBARFLAG", false);
                    }

                    if (this.arcNavBarFlag == true) {
                        this.$store.commit('SET_ARCNAVBARTITLE', '')
                        this.$store.commit('SET_ARCNAVBARCODE', '')
                        this.$store.commit('SET_ARCNAVBARFLAG', false)
            this.$store.commit("SET_ARCNAVBARTITLE", "");
            this.$store.commit("SET_ARCNAVBARCODE", "");
            this.$store.commit("SET_ARCNAVBARFLAG", false);
                    }
                }
            }
      },
        },

        orgNavBarFlag: {
            immediate: true,
            handler (newVal, oldVal) {
                if (newVal == true) {
                    this.$store.commit('SET_SEARCHPOPUPFLAG', false)
          this.$store.commit("SET_SEARCHPOPUPFLAG", false);
                }
            }
      },
        },

        arcNavBarFlag: {
            immediate: true,
            handler (newVal, oldVal) {
                if (newVal == true) {
                    this.$store.commit('SET_SEARCHPOPUPFLAG', false)
          this.$store.commit("SET_SEARCHPOPUPFLAG", false);
                }
            }
        }
      },
    },
    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
      "viewer",
      "popupBgUrl",
      "pupupQRUrl",
            // 终点
            'terminus',
      "terminus",
            // 起点
            'startingPoint',
      "startingPoint",
            // 点信息
            'pointPosition',
      "pointPosition",
            // 点名称
            'stateName',
      "stateName",
            // 地址
            'siteName',
      "siteName",
            // 介绍
            'introduceText',
      "introduceText",
            // 全景地址
            'panoramaUrl',
      "panoramaUrl",
            // 详情弹框显示关闭
            'detailsPopup',
      "detailsPopup",
            // 全景弹框显示关闭
            'panoramaPopup',
            // 社区内导航的显示关闭
            'campusNavFlag',
            'orgNavBarFlag',
            'arcNavBarFlag',
            'searchPopupFlag'
        ])
      "panoramaPopup",
      // 校区内导航的显示关闭
      "campusNavFlag",
      "orgNavBarFlag",
      "arcNavBarFlag",
      "searchPopupFlag",
    ]),
    },
    mounted () {
        var that = this
    var that = this;

        let viewer
    let viewer;

        that.DC = global.DC
    that.DC = global.DC;

        function distanceSurface () {
            viewer.measure.distanceSurface()
      viewer.measure.distanceSurface();
        }

        function calcArea () {
            viewer.measure.area()
      viewer.measure.area();
        }

        function areaSurface () {
            viewer.measure.areaSurface()
      viewer.measure.areaSurface();
        }

        function calcAngle () {
            viewer.measure.angle()
      viewer.measure.angle();
        }

        function calcModelAngle () {
            viewer.measure.angle({
                clampToModel: true
            })
        clampToModel: true,
      });
        }

        function calcHeight () {
            viewer.measure.height()
      viewer.measure.height();
        }

        function calcModelHeight () {
            viewer.measure.height({
                clampToModel: true
            })
        clampToModel: true,
      });
        }

        function calcHeading () {
            viewer.measure.heading()
      viewer.measure.heading();
        }

        function areaHeight () {
            viewer.measure.areaHeight()
      viewer.measure.areaHeight();
        }

        function calcTriangleHeight () {
            viewer.measure.triangleHeight()
      viewer.measure.triangleHeight();
        }

        function calcModelTriangleHeight () {
            viewer.measure.triangleHeight({
                clampToModel: true
            })
        clampToModel: true,
      });
        }

        function deactivate () {
            viewer.measure.deactivate()
      viewer.measure.deactivate();
        }

        function initViewer () {
            viewer = new that.DC.Viewer('viewer-container', {
      viewer = new that.DC.Viewer("viewer-container", {
                contextOptions: {
                    webgl: {
                        stencil: true,
                        preserveDrawingBuffer: true
                    }
                }
            })
            preserveDrawingBuffer: true,
          },
        },
      });

            that.createdLayers(viewer)
      that.createdLayers(viewer);

            that.$store.commit('SET_VIEWER', viewer)
      that.$store.commit("SET_VIEWER", viewer);

            that.$refs.leftNav.initialize(viewer)
      that.$refs.leftNav.initialize(viewer);

            // const key = '0f7c1d161d7352116a21aacf0e9f44c1'
            // const vec = that.DC.ImageryLayerFactory.createTdtImageryLayer({
@@ -351,44 +358,41 @@
            //     name: '地形'
            // })

            viewer.use(new that.DC.Measure())
      viewer.use(new that.DC.Measure());

            // viewer.flyToPosition(
            //     new that.DC.Position(117.08489820, 31.65413916, 1500, 0, -90, 45)
            // )

            viewer.compass.enable = true
            viewer.zoomController.enable = true
            viewer.locationBar.enable = true
            viewer.hawkeyeMap.enable = true
      viewer.compass.enable = true;
      viewer.zoomController.enable = true;
      viewer.locationBar.enable = true;
      viewer.hawkeyeMap.enable = true;
            viewer.hawkeyeMap.addBaseLayer(
                that.DC.ImageryLayerFactory.createAmapImageryLayer(
                    {
                        crs: 'WGS84'
                    }
                )
            )
        that.DC.ImageryLayerFactory.createAmapImageryLayer({
          crs: "WGS84",
        })
      );
            // viewer.distanceLegend.enable = true
        }

        that.DC.ready(initViewer)
    that.DC.ready(initViewer);
    },
    methods: {
        mapClick (e) {
            this.$refs.campusNavRoute.shortcutShow(e)
            this.$refs.campusBuildingSearch.shortcutShow(e)
      this.$refs.campusNavRoute.shortcutShow(e);
      this.$refs.campusBuildingSearch.shortcutShow(e);
        },

        createdLayers (viewer) {
            const layerGroup = new this.DC.LayerGroup('modelBox')
            viewer.addLayerGroup(layerGroup)
      const layerGroup = new this.DC.LayerGroup("modelBox");
      viewer.addLayerGroup(layerGroup);

            this.areaLayer = new this.DC.VectorLayer('areaLayer')
            layerGroup.addLayer(this.areaLayer)
        }
    }
}
      this.areaLayer = new this.DC.VectorLayer("areaLayer");
      layerGroup.addLayer(this.areaLayer);
    },
  },
};
</script>

<style lang='scss' scope>
</style>
<style lang="scss" scope></style>