From c2620132e537104e0de17114fb824dd957b9dd2a Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 13 Dec 2021 17:29:55 +0800
Subject: [PATCH] +手机端
---
src/components/mobilemap/index.vue | 112 +++++++++++++++++++++++++++++++------------------------
1 files changed, 63 insertions(+), 49 deletions(-)
diff --git a/src/components/map/indexL.vue b/src/components/mobilemap/index.vue
similarity index 60%
rename from src/components/map/indexL.vue
rename to src/components/mobilemap/index.vue
index cbd4153..d6c01b2 100644
--- a/src/components/map/indexL.vue
+++ b/src/components/mobilemap/index.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>
--
Gitblit v1.9.3