feat:添加地图工具栏

src/views/components/tools/controls/control.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="mapsControl">
+    <div class="changeMap" @mouseenter="handelEnter" @mouseleave="handelLeave">
+        <div  class="map1" v-if="one"  :class="[activeNum ==0? 'map1':activeNum ==1? 'map2':activeNum ==2? 'map3':'map4']" >
+          <p class="maptext">{{maptext[activeNum]}}</p>
+        </div>
+        <div @click="changeMap(0)" class="map1" v-if="!one">
+          <p class="maptext">三维地图</p>
+        </div>
+        <div @click="changeMap(1)" class="map2" v-if="!one">
+          <p class="maptext">卫星地图</p>
+        </div>
+        <div @click="changeMap(2)" class="map3" v-if="!one">
+          <p class="maptext">常规地图</p>
+        </div>
+        <div @click="changeMap(3)" class="map4" v-if="!one">
+          <p class="maptext">二维地图</p>
+        </div>
+    </div>
+    <div class="ct">
+      <div >12</div>
+      <div @click="addMap">+</div>
+      <div @click="countMap">-</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as mars3d from 'mars3d'
+export default {
+  data() {
+    return {
+      activeNum: 0,
+      zoom: 4,
+      one: true,
+      maptext: ['三维地图','卫星地图','常规地图','二维地图'],
+      gg:null,
+      font:null,
+    }
+  },
+  methods: {
+    addMap() {
+      window.map.zoomIn(12, true);
+      this.zoom++;
+    },
+    countMap() {
+     window.map.zoomOut(12, true)
+      if (this.zoom == 1) {
+        this.zoom = 1;
+      } else {
+        this.zoom--;
+      }
+    },
+    changeMap(num) {
+      console.log(num);
+      this.activeNum = num;
+       if (num == 1) {
+        if (this.gg || this.font) {
+            window.map.removeLayer(this.gg)
+            window.map.removeLayer(this.font)
+        }
+        this.gg = new mars3d.layer.GaodeLayer({
+            name: "天地图",
+            type: "gaode",
+            layer: "img_d",
+            show: true,
+        });
+        this.font = new mars3d.layer.GaodeLayer({
+            name: "天地图",
+            type: "gaode",
+            layer: "img_z",
+            show: true,
+        });
+
+        window.map.addLayer(this.gg);
+        window.map.addLayer(this.font)
+    } else if (num == 2) {
+        if (this.gg || this.font) {
+            window.map.removeLayer(this.gg)
+            window.map.removeLayer(this.font)
+        }
+        this.gg = new mars3d.layer.BaiduLayer({
+            name: "百度",
+            type: "baidu",
+            layer: "vec",
+            show: true,
+        });
+
+        window.map.addLayer(this.gg);
+    } else if (num == 3) {
+        if (this.gg || this.font) {
+            window.map.removeLayer(this.gg)
+            window.map.removeLayer(this.font)
+        }
+
+        this.gg = new mars3d.layer.TdtLayer({
+            name: "天地图",
+            type: "tdt",
+            layer: "ter_d",
+            key: ['1b513fbb0a2b0878eb660b44790d6c3a'],
+            show: true,
+        });
+        this.font = new mars3d.layer.TdtLayer({
+            name: "天地图",
+            type: "tdt",
+            layer: "img_z",
+            key: ['1b513fbb0a2b0878eb660b44790d6c3a'],
+            show: true,
+        });
+        window.map.addLayer(this.gg);
+        window.map.addLayer(this.font)
+    } else {
+        if (this.gg || this.font) {
+            window.map.removeLayer(this.gg)
+            window.map.removeLayer(this.font)
+        }
+    }
+    },
+    handelLeave() {
+      this.one = true;
+    },
+    handelEnter() {
+      this.one = false;
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+.maptext {
+  width: 100%;
+  text-align: center;
+  background: #fff;
+}
+.map1 {
+  background: url("@/assets/image/common/map1.png");
+}
+.map2 {
+  background: url("@/assets/image/common/map2.png");
+}
+.map3 {
+  background: url("@/assets/image/common/map3.png");
+}
+.map4 {
+  background: url("@/assets/image/common/map4.png");
+}
+.map1,
+.map2,
+.map3,
+.map4 {
+  width: px-to-rem(99);
+  height: px-to-rem(74);
+  border: px-to-rem(1) solid #ccc;
+  border-radius: px-to-rem(5);
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: end;
+  background-size: cover;
+  background-repeat: no-repeat;
+  font-size: px-to-rem(12);
+  overflow: hidden;
+  margin-top: px-to-rem(5);
+  margin-left: px-to-rem(2);
+}
+
+.changeMap {
+  width: px-to-rem(105);
+  height: px-to-rem(84);
+  background: #fff;
+  transition: all 0.5s;
+  overflow: hidden;
+  display: block;
+  justify-content: space-around;
+  align-items: center;
+}
+.son {
+  width: px-to-rem(550) !important;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.changeMap:hover {
+  width: px-to-rem(410);
+}
+.changeMap:hover + .son{
+  width: px-to-rem(440) !important;
+  background: #000;
+}
+.mapsControl {
+  display: flex;
+  position: absolute;
+  bottom: px-to-rem(30);
+  right: 4.2rem;
+  z-index: 41;
+}
+.ct {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  margin-left: px-to-rem(10);
+  div {
+    width: px-to-rem(42);
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: px-to-rem(14);
+    cursor: pointer;
+    padding: px-to-rem(3) px-to-rem(0);
+  }
+  .size {
+    font-size: px-to-rem(16);
+  }
+}
+</style>

src/views/components/tools/index.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <div class="tools-container">
+            <img src="@/assets/image/common/tools.png" alt="" @click="toOpenTools">
+            <div class="tools-menu" :class="{isHide:!toolsShow}">
+                <div class="tool" @click="toChangeMap" :class="{active:isMapActive}"><i class="iconfont icon-tongyong-gongjuxiang-ditukongzhi " style="font-size: 40px;"></i></div>
+                <div class="tool" :class="{active:isClActive}" @click="toCl"><i class="iconfont icon-icon_xiaogongju_20_s "  style="font-size: 20px;"></i></div>
+            </div>
+        </div>
+        <Controls v-if="isMapActive"/>
+    </div>
+</template>
+
+<script>
+import Controls from './controls/control.vue'
+export default {
+    name:"MapTools",
+    data(){
+        return{
+            toolsShow:false,
+            isMapActive:false,
+            isClActive:false
+        }
+    },
+    components:{
+        Controls
+    },
+    methods:{
+        toOpenTools(){
+            this.toolsShow = !this.toolsShow
+        },
+        toChangeMap(){
+            this.isMapActive = !this.isMapActive
+        },
+        toCl(){
+            this.isClActive = !this.isClActive
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.tools-container{
+    position: absolute;
+    top: px-to-rem(45);
+    right: 4.2rem;
+    z-index: 41;
+    img{
+        width: px-to-rem(40);
+        height: px-to-rem(40);
+    }
+    .tools-menu{
+        background: #172536;
+        border-radius: px-to-rem(4);
+        padding-bottom: px-to-rem(10);
+        width: px-to-rem(40);
+        .tool{
+            text-align: center;
+            color: #fff;
+        }
+        .tool.active{
+            color: #4f9fff;
+        }
+    }
+    .isHide{
+        display: none;
+    }
+}
+</style>

src/views/index.vue

@@ -9,6 +9,7 @@
           <keep-alive>
             <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
           </keep-alive>
+          <MapTools/>
           <LayerListPanel v-if="mapLoaded"></LayerListPanel>
           <SandMonitorLeft v-if="mainMenu === 'sandMonitor'"></SandMonitorLeft>
           <SandMonitorRight v-if="mainMenu === 'sandMonitor'"></SandMonitorRight>
@@ -30,6 +31,7 @@
 
 <script>
 import MainMap from '@/views/components/map'
+import MapTools from '@/views/components/tools'
 import LayerListPanel from '@/views/components/layerList'
 import SandMonitorLeft from './sand-monitor/left.vue'
 import SandMonitorRight from './sand-monitor/right.vue'
@@ -48,6 +50,7 @@ export default {
   name: 'MainView',
   components: {
     MainMap,
+    MapTools,
     LayerListPanel,
     SandMonitorLeft,
     SandMonitorRight,