+手机端

liuyg

2021-12-13 c2620132e537104e0de17114fb824dd957b9dd2a

 src/components/mobilemap/index.vue

File was renamed from src/components/map/indexL.vue
@@ -1,9 +1,10 @@
/* eslint-disable camelcase */
<template>
  <div id="viewer-container" style="height: 100%; width: 100%">
  <!-- mobile -->
  <div id="mobile-viewer-container">
    <div
      v-show="popupFlag"
      id="modelPopup"
      id="mobile-modelPopup"
      style="
        width: 366px;
        height: 240px;
@@ -11,34 +12,42 @@
        background-size: 100% 100%;
      "
    >
      <div class="header">
        <div class="logo">
      <div class="mobile-header">
        <div class="mobile-logo">
          <img src="/img/navicon/map.png" alt="" />
        </div>
        <div class="title">明德楼</div>
        <div class="close">
        <div class="mobile-title">明德楼</div>
        <div class="mobile-close">
          <img src="/img/navicon/close.png" alt="" />
        </div>
      </div>
      <div class="content">
        <div class="img"></div>
        <div class="meau"></div>
      <div class="mobile-content">
        <div class="mobile-img"></div>
        <div class="mobile-meau"></div>
      </div>
    </div>

    <div id="map_popup_content"></div>
    <div ref="mapContentContent" v-show="popupWindow" id="map_content_content">
      <div class="arc-bcg">
    <div id="mobile-map_popup_content"></div>
    <div
      ref="mobile-mapContentContent"
      v-show="popupWindow"
      id="mobile-map_content_content"
    >
      <div class="mobile-arc-bcg">
        <img src="/img/job/one.jpg" alt="" @click="once" />
      </div>
    </div>
    <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
    <mobileCortrol ref="mobileCortrol"></mobileCortrol>
    <mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom>
    <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  name: "mapBox",
  name: "mobilemapBox",
  data() {
    return {
      popupFlag: false,
@@ -46,7 +55,7 @@
    };
  },
  computed: {
    ...mapGetters(["viewer"]),
    ...mapGetters(["mviewer"]),
  },
  mounted() {
    var DC = global.DC;
@@ -114,7 +123,7 @@
    }

    function initViewer() {
      viewer = new DC.Viewer("viewer-container", {
      viewer = new DC.Viewer("mobile-viewer-container", {
        contextOptions: {
          webgl: {
            stencil: true,
@@ -122,14 +131,14 @@
          },
        },
      });

      console.log(DC, 45678);
      that.$refs.mobileLeftNav.initialize(viewer);
      // console.log(DC, 45678);

      const popup = viewer.popup;

      popup.hide();

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

      const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
@@ -139,32 +148,32 @@
        name: "影像",
      });

      // eslint-disable-next-line camelcase
      const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer",
      });
      viewer.addBaseLayer(baselayer_shaded, {
        iconUrl: "examples/images/icon/elec.png",
        name: "电子",
      });
      // // eslint-disable-next-line camelcase
      // const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
      //   url: "http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer",
      // });
      // viewer.addBaseLayer(baselayer_shaded, {
      //   iconUrl: "examples/images/icon/elec.png",
      //   name: "电子",
      // });

      // eslint-disable-next-line camelcase
      const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer",
      });
      viewer.addBaseLayer(baselayer_street, {
        iconUrl: "examples/images/icon/ter.png",
        name: "地形",
      });
      // // eslint-disable-next-line camelcase
      // const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({
      //   url: "http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer",
      // });
      // viewer.addBaseLayer(baselayer_street, {
      //   iconUrl: "examples/images/icon/ter.png",
      //   name: "地形",
      // });

      // eslint-disable-next-line camelcase
      const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
      });
      viewer.addBaseLayer(baselayer_ter, {
        iconUrl: "examples/images/icon/ter.png",
        name: "地形",
      });
      // // eslint-disable-next-line camelcase
      // const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({
      //   url: "http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
      // });
      // viewer.addBaseLayer(baselayer_ter, {
      //   iconUrl: "examples/images/icon/ter.png",
      //   name: "地形",
      // });

      const layer = new DC.TilesetLayer("layer");
      viewer.addLayer(layer);
@@ -199,14 +208,14 @@

        viewer.scene.globe.depthTestAgainstTerrain = false;

        console.log(document.getElementById("map_content_content"));
        // console.log(document.getElementById("mobile-map_content_content"));

        // 定制化窗体
        var divForms = new DC.divForms(viewer, {
          domId: "div1",
          title: "成教楼  ",
          className: "divForms-dom",
          content: document.getElementById("map_content_content"),
          content: document.getElementById("mobile-map_content_content"),
          position: [e.position],
        });

@@ -219,17 +228,17 @@
      //     new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
      // )

      viewer.compass.enable = true;
      viewer.zoomController.enable = true;
      viewer.locationBar.enable = true;
      viewer.distanceLegend.enable = true;
      viewer.compass.enable = false;
      viewer.zoomController.enable = false;
      viewer.locationBar.enable = false;
      viewer.distanceLegend.enable = false;
    }

    DC.ready(initViewer);
  },
  methods: {
    once() {
      // console.log(123);
      console.log(123);
      // console.log(global, 123456789);
    },
  },
@@ -237,4 +246,9 @@
</script>

<style lang='scss' scope>
#mobile-viewer-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>