移动端

lixuliang

2024-05-08 f5233339920a59103d53e8efadc6f3f5d0b64f31

移动端

 src/components/common.vue

@@ -1,48 +1,48 @@
<script>
import axios from "axios";
let username = window.sessionStorage.getItem("username"); //用户名
let password = window.sessionStorage.getItem("password"); //密码
let minviewheight = window.sessionStorage.getItem("minviewheight"); //最低视角高度
let smartearthtoken = window.sessionStorage.getItem("smartearthtoken"); //token
let trafficserve = window.sessionStorage.getItem("trafficserve"); //实时路况服务
let poiserve = window.sessionStorage.getItem("poiserve"); //poi查询服务
let space_query = window.sessionStorage.getItem("space_query"); //空间查询服务
// let username = window.sessionStorage.getItem("username"); //用户名
// let password = window.sessionStorage.getItem("password"); //密码
// let minviewheight = window.sessionStorage.getItem("minviewheight"); //最低视角高度
// let smartearthtoken = window.sessionStorage.getItem("smartearthtoken"); //token
// let trafficserve = window.sessionStorage.getItem("trafficserve"); //实时路况服务
// let poiserve = window.sessionStorage.getItem("poiserve"); //poi查询服务
// let space_query = window.sessionStorage.getItem("space_query"); //空间查询服务

export default {
  username,
  password,
  minviewheight,
  smartearthtoken,
  trafficserve,
  poiserve,
  // username,
  // password,
  // minviewheight,
  // smartearthtoken,
  // trafficserve,
  // poiserve,
  //"poi_search": "https://restapi.amap.com/v3/place/polygon",
  space_query,
  // space_query,
  async getServeData() {
    await axios.get("./static/config.json").then(
      (response) => {
        let data = response.data;
        this.username = data && data.username;
        window.sessionStorage.setItem("username", this.username);
        // this.username = data && data.username;
        // window.sessionStorage.setItem("username", this.username);

        this.password = data && data.password;
        window.sessionStorage.setItem("password", this.password);
        // this.password = data && data.password;
        // window.sessionStorage.setItem("password", this.password);

        this.minviewheight = data && data.min_view_height;
        window.sessionStorage.setItem("minviewheight", this.minviewheight);
        // this.minviewheight = data && data.min_view_height;
        // window.sessionStorage.setItem("minviewheight", this.minviewheight);

        this.smartearthtoken = data && data.token;
        window.sessionStorage.setItem("smartearthtoken", this.smartearthtoken);
        // this.smartearthtoken = data && data.token;
        // window.sessionStorage.setItem("smartearthtoken", this.smartearthtoken);

        this.trafficserve = data && data.traffic;
        window.sessionStorage.setItem("trafficserve", this.trafficserve);
        // this.trafficserve = data && data.traffic;
        // window.sessionStorage.setItem("trafficserve", this.trafficserve);

        this.poiserve = data && data.poi_search;
        this.poiserve2 = data && data.poi_search2;
        window.sessionStorage.setItem("poiserve", this.poiserve);
        window.sessionStorage.setItem("poiserve2", this.poiserve2);

        this.space_query = data && data.space_query;
        window.sessionStorage.setItem("space_query", this.space_query);
        // this.space_query = data && data.space_query;
        // window.sessionStorage.setItem("space_query", this.space_query);

        /**获取gisBaseUrl */
        window.gisBaseUrl = data && data.gis_base_url;
@@ -53,14 +53,14 @@
    );
  },
  getToken(callback) {
    let token = window.sessionStorage.getItem("smartearthtoken");
    if (token) {
      callback(token);
    } else {
      this.getServeData(() => {
        callback(this.smartearthtoken);
      });
    }
    // let token = window.sessionStorage.getItem("smartearthtoken");
    // if (token) {
    //   callback(token);
    // } else {
    //   this.getServeData(() => {
    //     callback(this.smartearthtoken);
    //   });
    // }
  },
};
</script>

 src/components/leftMenu/sousuo.vue

@@ -5,7 +5,10 @@
      <span
        @click="ssjmxs"
        style="float: left; height: 100%; width: 80%; overflow: hidden"
        ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
        ><i
          class="el-icon-search"
          style="padding: 0px 15px 0px 20px; font-size: 0.15rem"
        ></i
        >{{ syssval }}</span
      >
      <span
@@ -25,13 +28,9 @@
          right: -3px;
        "
      >
        <img
          src="@/assets/img/navigation/addf.png"
          style="width: 20px"
          @click.stop="AddFavorite"
        />
        <!-- <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="AddFavorite" /> -->
      </span>
      <span
      <!-- <span
        v-show="syssval == '请输入关键词搜索地图'"
        style="float: right; height: 100%; width: 10%"
      >
@@ -40,17 +39,13 @@
          style="width: 20px"
          @click.stop="showAddFavorite"
        />
      </span>
      </span> -->
    </div>
    <!-- æœç´¢ç•Œé¢ -->
    <div class="ssjm" v-show="ssjm">
      <!-- æœç´¢ç•Œé¢é¡¶éƒ¨ -->
      <div class="menutop">
        <div class="menutitle">搜索</div>
        <div class="menuback" @click="cancless">关闭</div>
      </div>
    <div class="ssjm" v-if="ssjm">
      <!-- æœç´¢æ¡† -->
      <div style="margin: 0.1rem 0">
      <div class="search-container">
        <div class="back" @click="cancless"></div>
        <el-input
          placeholder="输入关键字搜索地图"
          autofocus
@@ -66,11 +61,7 @@
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
          <el-button slot="append" @click="search">搜索</el-button>
        </el-input>
      </div>
      <!-- ç»“果显示 -->
@@ -82,17 +73,12 @@
            :key="index"
            @click="flyTo(item)"
          >
            <div style="margin: 0.05rem 0">
              <i class="el-icon-map-location"></i>{{ item.name }}
          <div class="poiName" style="margin: 0.05rem 0">
              <img src="@/assets/img/navigation/location.png" alt="" />
              <span>{{ item.name }}</span>
            </div>
            <div style="font-size: 0.12rem; color: black">
              <!-- <span>地址:{{ item.address ? item.address : "暂无详细地址" }}</span><br />
              <span>电话:{{ item.telphone ? item.telphone : "暂无联系方式" }}</span> -->
              <!-- <span>区域:{{ item.area ? item.area : "暂无区域信息" }}</span> -->
              <!-- <br /> -->
              <span
                >地址:{{ item.address ? item.address : "暂无详细地址" }}</span
              >
            <div class="addressBox">
              <span>{{ item.address ? item.address : "暂无详细地址" }}</span>
            </div>
          </div>
        </div>
@@ -104,25 +90,19 @@
  </div>
</template>
<style scoped>
/* æœç´¢æŒ‰é’®çš„样式 */
.iszd {
  position: absolute;
  left: 0.2rem;
  top: 0.3rem;
}

/* æœç´¢æ¡†çš„样式 */
.ssk {
  position: absolute;
  /* text-align: center; */
  left: 2.5%;
  bottom: 0.2rem;
  top: 0.15rem;
  width: 95%;
  border: 1px solid white;
  height: 0.4rem;
  line-height: 0.4rem;
  background: #fff;
  border-radius: 0.2rem;
  border-radius: 0.14rem;
  color: black;
  font-size: 0.14rem;
}
@@ -135,31 +115,109 @@
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f3f3f3;
  z-index: 99;
  z-index: 1099;
}
.search-container {
  /* background-color: #fff; */
  background-color: #fff;
  display: flex;
  height: 52px;
  align-items: center;
}
.back {
  background: url("~@/assets/img/search/back.png") center center no-repeat;
  background-size: 10px 17px;
  height: 40px;
  width: 50px;
}

.el-input {
  width: 85%;
  background-color: #eee;
  border-radius: 13px;
}
.el-input /deep/ .el-input-group__append,
.el-input /deep/ .el-input-group__prepend {
  background-color: transparent;
  border: none;
}

.el-input /deep/ .el-input__inner {
  border: none;
  font-weight: 500;
  font-size: 0.14rem;
  color: #3e3d3d;
}
.el-select {
  width: 80px;
  width: 0.8rem;
  position: relative;
  font-size: 0.14rem;
}
.el-select:after {
  content: "";
  position: absolute;
  right: 0;
  height: 24px;
  border-left: 1px solid #dcdcdc;
  top: 50%;
  transform: translateY(-50%);
}
.el-input /deep/ .el-input-group__append {
  width: 50px;
  padding-right: 25px;
}
.el-input /deep/ .el-input-group__append .el-button {
  font-size: 0.14rem;
  color: #ffffff;
  background: #2477ff;
  border-radius: 13px;
  padding: 10px;
}

/* æ¯æ¡æœç´¢ç»“æžœ */
.everyinfo {
  color: #409eff;
  padding: 0.05rem;
  font-size: 0.16rem;
  border-bottom: 1px solid lightgray;
.el-scrollbar .hover {
  background: none;
}

/* 
  æœç´¢ç»“æžœ 
*/
.ssjg {
  overflow-x: hidden;
  overflow-y: scroll;
  /* max-height: 4rem; */
  max-height: 80vh;
  max-height: calc(98vh - 50px);
  background: white;
  padding: 0.2rem;
  border-radius: 0.05rem;
}

.ssjg .everyinfo {
  color: #409eff;
  padding: 0.05rem;
  font-size: 0.16rem;
  border-bottom: 1px solid lightgray;
}
.ssjg .poiName {
  display: flex;
  align-items: center;
  height: 20px;
}
.ssjg .poiName img {
  width: 20px;
}
.ssjg .poiName span {
  margin-left: 7px;
  line-height: 20px;
}
.ssjg .addressBox {
  margin-left: 27px;
  margin-top: 5px;
  color: #000;
  font-weight: 500;
  font-size: 13px;
}
.ssjg::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
@@ -184,7 +242,6 @@
}
</style>


<script>
let timers = null;
import axios from "axios";
@@ -206,7 +263,7 @@
      showList: false,
      total: 0,
      poiList: [],
      select: "全部",
      select: "POI",
      options: [
        {
          label: "全部",

 src/components/leftMenu/sousuo2.vue

@@ -83,12 +83,6 @@
  </div>
</template>
<style scoped>
/* æœç´¢æŒ‰é’®çš„样式 */
.iszd {
  position: absolute;
  left: 0.2rem;
  top: 0.3rem;
}

/* æœç´¢æ¡†çš„样式 */
.ssk {
@@ -116,7 +110,7 @@
  top: 0;
  left: 0;
  background-color: #f3f3f3;
  z-index: 99;
  z-index: 1099;
}
.search-container {
  /* background-color: #fff; */

 src/components/poplayer/history.vue

@@ -1,27 +1,26 @@
<template>
  <div class="historyBox">
    <div class="leftBox">
      <div id="mapContainer" class="mapLeft"></div>
      <!-- <div class="colseBtn">
        <img class="searchBtn" src="@/assets/closeinput1.png" />
      </div> -->
      <div class="listBox">
        <ul>
          <li
            v-for="(item, index) in arr"
            :key="index"
            @click="changeLeftMap(item, index)"
            :class="{ active: currentIndex1 == index }"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    <div id="mapContainer" class="mapLeft"></div>
    <div class="closeWrapper" @click="close(false)">
      <img class="colseBtn" src="@/assets/closeinput1.png" />
    </div>
    <div class="listBox">
      <ul>
        <li
          v-for="(item, index) in arr"
          :key="index"
          @click="changeLeftMap(item, index)"
          :class="{ active: currentIndex1 == index }"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import store from "@/utils/store.js";
import mapType from "@/utils/maptype";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
@@ -109,6 +108,9 @@
      this.tileLayer1.setSource(this.mapList.find((e) => e.id == item).value);
      this.currentIndex1 = index;
    },
    close(val) {
      store.setHistoryShow(val);
    },
    // changeRightMap(item, index) {
    //   this.tileLayer2.setSource(this.mapList.find((e) => e.id == item).value);
    //   this.currentIndex2 = index;
@@ -128,56 +130,55 @@
<style scoped>
.historyBox {
  position: absolute;
  z-index: 2;
  z-index: 20;
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-top: 0.43rem;
  height: calc(100% - 0.43rem);
  display: flex;
}
.colseBtn {
  position: absolute;
  top: 10vh;
  left: 0;
}
.leftBox {
  position: relative;
  width: 100%;
}
.rightBox {
  position: relative;
  width: 50%;
}
.listBox {
  position: absolute;
  right: 20px;
  bottom: 10px;
  background-color: #373737;
}
.listBox li {
  padding: 2px;
  border: 1px solid #000;
  color: white;
}
.listBox li:hover {
  background-color: #00e1ff;
}
.mapLeft {
  width: 100% !important;
  float: left;
  position: absolute;
  height: 100%;
  background-color: #fff;
}
.mapRight {
  width: 100% !important;
  float: right;
.closeWrapper {
  position: absolute;
  height: 100%;
  background-color: #fff;
  top: 20px;
  right: 9px;
}
.active {
  background-color: #4590d7;
.colseBtn {
  width: 0.4rem;
  /* height: 40px; */
}

.listBox {
  position: absolute;
  right: 10px;
  bottom: 18px;
  width: 48px;
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21);
  border-radius: 13px;
}
.listBox ul {
  margin-top: 3px;
}
.listBox li {
  font-weight: bold;
  font-size: 0.12rem;
  line-height: 0.25rem;
  color: #1c222f;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
}
.listBox li:last-child {
  border: none;
}
.listBox li:hover {
  color: #127dff;
}

.listBox .active {
  color: #127dff;
}
</style>

 src/components/poplayer/history2.vue

@@ -1,7 +1,7 @@
<template>
  <div class="historyBox">
    <div class="colseBtn">
      <img class="searchBtn" @click="close" src="@/assets/closeinput1.png" />
    <div class="closeWrapper">
      <img class="colseBtn" @click="close" src="@/assets/closeinput1.png" />
    </div>
    <div class="listBox">
      <ul>
@@ -66,13 +66,13 @@
};
</script>
<style scoped>
.colseBtn {
.closeWrapper {
  position: absolute;
  top: 20px;
  right: 9px;
}

.searchBtn {
.colseBtn {
  width: 0.4rem;
  /* height: 40px; */
}
@@ -108,7 +108,6 @@
}

.listBox .active {
  /* background-color: #4590d7; */
  color: #127dff;
}
</style>

 src/components/rightMenu/bottom copy.vue

@@ -2,11 +2,16 @@
  <div class="bottom" id="bottom">
    <div class="mapTools" v-show="show">
      <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="flyBack" title="复位">
          <img src="../../../static/img/image/ddrf.png" />
        <el-button class="tool-rotate" @click="zoomIn" title="放大">
          <img src="../../../static/img/image/zoomIn.png" />
        </el-button>
      </div>
      <div class="mapTool">
       <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="zoomOut" title="缩小">
          <img src="../../../static/img/image/zoomOut.png" />
        </el-button>
      </div>
      <!-- <div class="mapTool">
        <el-button
          class="tool-trueNorth"
          v-show="test.zbzval"
@@ -15,8 +20,8 @@
        >
          <img src="../../../static/img/image/zbz.png" />
        </el-button>
      </div>
      <div class="mapTool">
      </div> -->
      <!-- <div class="mapTool">
        <el-button
          class="tool-fullScreen"
          v-show="test.qpval"
@@ -25,7 +30,7 @@
        >
          <img src="../../../static/img/image/qp.png" />
        </el-button>
      </div>
      </div> -->
    </div>
  </div>
</template>

 src/components/rightMenu/bottom.vue

@@ -1,27 +1,31 @@
<template>
  <div class="bottom" id="bottom">
    <div class="mapTools" v-show="show">
      <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="zoomIn" title="放大">
          <img src="../../../static/img/image/zoomIn.png" />
        </el-button>
  <div class="bottom" id="bottom" :style="customStyle" v-show="show">
    <div class="mapTool">
      <div class="tool-rotate" @click="flyBack" title="复位">
        <img src="@/assets/img/collection/recover.png" />
      </div>
       <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="zoomOut" title="缩小">
          <img src="../../../static/img/image/zoomOut.png" />
        </el-button>
    </div>
    <div class="mapTool2" v-show="test.fwval">
      <div class="tool-rotate" @click="zoomIn" title="放大">
        <img src="@/assets/img/collection/add.png" />
      </div>
      <!-- <div class="mapTool">
      <div class="border"></div>
      <div class="tool-rotate" @click="zoomOut" title="缩小">
        <img src="@/assets/img/collection/reduce.png" />
      </div>
    </div>
    <!-- <div class="mapTool">
        <el-button
          class="tool-trueNorth"
          v-show="test.zbzval"
          v-show="test.
          "
          @click="trueNorth"
          title="正北"
        >
          <img src="../../../static/img/image/zbz.png" />
        </el-button>
      </div> -->
      <!-- <div class="mapTool">
    <!-- <div class="mapTool">
        <el-button
          class="tool-fullScreen"
          v-show="test.qpval"
@@ -31,127 +35,60 @@
          <img src="../../../static/img/image/qp.png" />
        </el-button>
      </div> -->
    </div>
  </div>
</template>

<style scoped>
.bottom {
  position: absolute;
  bottom: 0.4rem;
  height: 0.76rem;
  right: 0.4rem;
}
.mapModeControl {
  position: absolute;
  right: 0.05rem;
  background: rgba(90, 90, 90, 0.5);
  bottom: 0.05rem;
  height: 0.76rem;
  width: 1.03rem;
  transition: all 1s;
}
.bottom .mapModeControl:hover {
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  width: 3.2rem;
}
.mapMode {
  display: inline-block;
}
.mapMode dl {
  width: 0.88rem;
  height: 0.6rem;
  border: 1px solid #494949;
  cursor: pointer;
  margin: 0.08rem;
}

.mapMode dl:hover {
  border-color: #0553b4;
}

.mapMode dl {
  position: relative;
}
#history {
  background: url(../../../static/img/1.png) no-repeat;
}
#mode-3d {
  background: url(../../../static/img/2.png) no-repeat;
}
#mode-2d {
  background: url(../../../static/img/4.png) no-repeat;
}
.mapMode dt {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  position: absolute;
  left: 0;
  bottom: 0px;
  font-size: 0.12rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  background: rgba(0, 0, 0, 0.5);
}
.mapModeActive {
  background: rgba(1, 37, 80, 0.5) !important;
}

.mapTools {
  position: absolute;
  /* bottom: 2rem; */
  bottom: 0.2rem;
  /* right: 0.1rem; */
}
.mapTool {
  margin: 0.1rem 0;
  width: 0.42rem;
  /* border-radius: 10px; */
  /* background: #ffffff; */
  /* margin-bottom: 8px; */
}
.mapTool .el-button {
  padding: 0 !important;
  font-size: 0.24rem;
  border: unset;
  float: unset;
  display: block;
  background: rgba(18, 126, 255, 1);
.mapTool .tool-rotate img {
  width: 100%;
}
.mapTool2 {
  width: 0.32rem;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mapTool2 .tool-rotate {
  height: 0.33rem;
  line-height: 0.33rem;
}

/* .button-group-vertical {
  text-align: center;
  position: relative;
} */
.fgx {
  position: absolute;
  width: 80%;
  height: 1px;
  height: 1px;
  border: 1px solid #dcdfe6;
  z-index: 999;
  margin: 0 10%;
.mapTool2 .tool-rotate img {
  width: 0.17rem;
}
/* .button-group-vertical .el-button-group > .el-button:first-child {
  border-top-right-radius: 0.04rem !important;
  border-bottom-left-radius: 0px !important;
}
.button-group-vertical .el-button-group > .el-button:last-child {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.04rem !important;
} */
.mapTool img {
  width: 24px;
  margin: 3px;
  /* height: 0.4rem; */

.border {
  width: 100%;
  height: 1px;
  border: 0.005rem solid #f3f3f3;
}
</style>
    
<script>
import Bus from "../../js/bus.js";
import store from "@/utils/store";

export default {
  props: ["test"],
  data() {
    return {
      customStyle: {
        position: "absolute",
        bottom: "0.4rem",
        right: "0.1rem",
      },
      state: store.layerPanel,
      show: true,
      parentdata: {
        fwval: false,
@@ -188,9 +125,29 @@
    };
  },
  mounted() {
    Bus.$on("myMsg", (myMsg) => {
      this.show = myMsg;
    });
    // Bus.$on("myMsg", (myMsg) => {
    //   this.show = myMsg;
    // });
  },
  watch: {
    "state.show": {
      handler(newVal) {
        if (newVal) {
          this.customStyle = {
            position: "absolute",
            top: "calc(0.75rem + 40px)",
            right: "0.1rem",
          };
        } else {
          this.customStyle = {
            position: "absolute",
            bottom: "0.4rem",
            right: "0.1rem",
          };
        }
      },
      immediate: true,
    },
  },
  methods: {
    modeClick(index, mode) {
@@ -198,20 +155,32 @@
      Viewer.scene.mode = mode;
    },
    flyBack() {
      const loading = this.$loading({
        lock: true,
        text: "镜头复位中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      // let p = sgworld.Navigate.getDegrees();
      // console.log("经纬度:", p);
      sgworld.Navigate.flyToPointsInterest({
        destination: new Cesium.Cartesian3.fromDegrees(
          this.camera.position[0],
          this.camera.position[1],
          this.camera.position[2]
        ),
        orientation: {
          heading: Cesium.Math.toRadians(this.camera.orientation.heading),
          pitch: Cesium.Math.toRadians(this.camera.orientation.pitch),
          roll: Cesium.Math.toRadians(this.camera.orientation.roll),
      sgworld.Navigate.flyToPointsInterest(
        {
          destination: new Cesium.Cartesian3.fromDegrees(
            this.camera.position[0],
            this.camera.position[1],
            this.camera.position[2]
          ),
          orientation: {
            heading: Cesium.Math.toRadians(this.camera.orientation.heading),
            pitch: Cesium.Math.toRadians(this.camera.orientation.pitch),
            roll: Cesium.Math.toRadians(this.camera.orientation.roll),
          },
        },
      });
        () => {
          loading.close();
        }
      );
    },
    fullScreen() {
      Viewer.fullscreenButton.viewModel.command(true);

 src/components/rightMenu/layerTree.vue

@@ -423,9 +423,9 @@
  mounted() {
    window.ProjectTree = this.$refs.tree;
    //获取token并请求加载图层数据
    common.getToken((token) => {
      this.SmartEarthToken = token;
    });
    // common.getToken((token) => {
    //   this.SmartEarthToken = token;
    // });

    this.$nextTick(() => {
      axios.get("./static/layers.json").then(

 src/components/rightMenu/layerTree2.vue

@@ -423,9 +423,9 @@
  mounted() {
    window.ProjectTree = this.$refs.tree;
    //获取token并请求加载图层数据
    common.getToken((token) => {
      this.SmartEarthToken = token;
    });
    // common.getToken((token) => {
    //   this.SmartEarthToken = token;
    // });

    this.$nextTick(() => {
      axios.get("./static/layers.json").then(

 src/components/rightNavigation/NavigationBar.vue

@@ -1,11 +1,12 @@
<template>
  <div class="navigationBar">
    <div class="menuBtn">
    <!-- <div class="menuBtn">
      <el-button class="right-menuBtn" @click="handleMenuListShow">
        <img src="@/assets/img/navigation/menuicon.png" />
      </el-button>
    </div>
    <div class="menuList" v-show="showMenuList.show">
    </div> -->
    <!-- <div class="menuList" v-show="showMenuList.show"> -->
    <div class="menuList" v-show="true">
      <ul>
        <li
          v-for="(value, key) in menuList"
@@ -18,7 +19,7 @@
              :src="showState[value.attr].show ? value.imgActive : value.img"
              :class="showState[value.attr].show ? 'Active' : 'noActive'"
            />
            <span>{{ value.name }}</span>
            <!-- <span>{{ value.name }}</span> -->
          </div>
        </li>
        <!-- <li @click="handleMenuClick(5)" @tap="handleMenuClick(5)" v-if="resetShowState.show">
@@ -55,13 +56,13 @@
          img: require("@/assets/img/navigation/tuc.png"),
          imgActive: require("@/assets/img/navigation/tucA.png"),
        },
        {
          id: "0002my",
          name: "漫游",
          attr: "roam",
          img: require("@/assets/img/navigation/my.png"),
          imgActive: require("@/assets/img/navigation/myA.png"),
        },
        // {
        //   id: "0002my",
        //   name: "漫游",
        //   attr: "roam",
        //   img: require("@/assets/img/navigation/my.png"),
        //   imgActive: require("@/assets/img/navigation/myA.png"),
        // },
        // {
        //     id: '0003tj',
        //     name: '统计',
@@ -69,13 +70,13 @@
        //     img: require("@/assets/img/navigation/tj.png"),
        //     imgActive: require("@/assets/img/navigation/tjA.png"),
        // },
        {
          id: "0004sc",
          name: "位置",
          attr: "location",
          img: require("@/assets/img/navigation/sc.png"),
          imgActive: require("@/assets/img/navigation/scA.png"),
        },
        // {
        //   id: "0004sc",
        //   name: "位置",
        //   attr: "location",
        //   img: require("@/assets/img/navigation/sc.png"),
        //   imgActive: require("@/assets/img/navigation/scA.png"),
        // },
        // {
        //     id: '0005sz',
        //     name: '设置',
@@ -120,7 +121,7 @@

    // ç‚¹å‡»å³ä¸Šè§’菜单项
    handleMenuClick(attr) {
      // debugger;
      console.log("点击右上角菜单项");
      // æ¸…除定点绕飞
      if (window.pointerFly) {
        window.pointerFly.end && window.pointerFly.end();
@@ -223,66 +224,55 @@
<style scoped>
.navigationBar {
  position: absolute;
  top: 0.55rem;
  right: 0.15rem;
  top: 0.75rem;
  right: 0.1rem;
  z-index: 10;
  /* width: 64px; */
}
.menuBtn .el-button {
  padding: 0 !important;
  font-size: 0.24rem;
  border: unset;
  float: unset;
  display: block;
.menuBtn {
  padding: 8px;
  background: rgba(18, 126, 255, 1);
  border-radius: 10px;
}
.menuBtn img {
  width: 24px;
  margin: 3px;
}
/* .menuBtn {
  margin-left: 25px;
  width: 22px;
  width: 20px;
  height: 20px;
  background-image: url("~@/assets/img/navigation/menuicon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
} */
}

.menuList {
  /* background-color: red; */
  /* padding: 0px 2px;
  position: absolute;
  width: 40px;
  margin-top: 0.1rem;
  right: -0.05rem;
  right: 0;
  background-color: white;
  border-radius: 10px;
  border-radius: 10px; */
}

.menuItem {
  width: 32px;
  width: 0.42rem;
  /* width: 32px;
  color: black;
  margin: 0px auto;
  margin-top: 10px;
  margin-bottom: 7px;
  /* padding-bottom: 7px; */
  border-bottom: 1px solid #e8e8e9;
  background-color: #bfa;
  text-align: center;
  cursor: pointer;
  /* border-bottom: 1px solid #e8e8e9; */
  /* pointer-events:none */
  cursor: pointer; */
}

li:last-child .menuItem {
  border: none;
}

img {
  width: 24px;
  /* height: 24px; */
  text-align: center;
.menuItem img {
  width: 100%;
  /* text-align: center; */
}

.menuItem span {
/* .menuItem span {
  display: block;
  text-align: center;
}
  margin-top: 2px;
} */
</style>

 src/components/sideMenu/layerMenu/layerPanel.vue

@@ -1,7 +1,7 @@
<template>
  <div class="layerPanel">
    <div class="mapMode">
      <div class="title" style="margin-top: 0px">地图模式</div>
      <div class="title">地图模式</div>
      <div class="container">
        <div
          class="layerItem"
@@ -33,32 +33,9 @@
        </div>
      </div>
    </div>
    <!-- <div class="areaType" style="margin-top: 10px">
      <div class="title">
        ä¸“题图层
        <span class="more" @click.stop="showLayerTree"
          >更多图层<i class="el-icon-arrow-right"></i
        ></span>
      </div>
      <div class="container">
        <div
          class="layerItem"
          :key="value1.id"
          v-for="(value1, index1) in areaTypeList"
          @click.stop="handleAreaClick(value1, index1)"
        >
          <img
            :src="value1.src"
            :class="{ active: curAreaTypeIndex == index1 }"
          />
          <span :class="{ spanActive: curAreaTypeIndex == index1 }">{{
            value1.name
          }}</span>
        </div>
      </div>
    </div> -->
    <div class="areaType" style="margin-top: 10px">
      <div class="title">

    <div class="areaType">
      <div class="title ZTtitle">
        ä¸“题应用
        <!-- ä¸æ˜¾ç¤ºæ›´å¤šå›¾å±‚ -->
        <span class="more" v-show="false" @click.stop="showLayerTree"
@@ -77,9 +54,6 @@
            ZTValue.name
          }}</span>
        </div>
      </div>
      <div class="title2"></div>
      <div class="container">
        <div
          class="layerItem"
          v-for="(funcValue, funcIndex) in FuncList"
@@ -94,7 +68,24 @@
            funcValue.name
          }}</span>
        </div>
        <!-- <div style="height: 0" class="layerItem" v-for="n in 3" :key="n"></div> -->
      </div>
      <!-- <div class="container">
        <div
          class="layerItem"
          v-for="(funcValue, funcIndex) in FuncList"
          :key="funcValue.id"
          @click.stop="handleFuncClick(funcIndex)"
        >
          <img
            :src="funcValue.src"
            :class="{ active: curFuncIndex == funcIndex }"
          />
          <span :class="{ spanActive: curFuncIndex == funcIndex }">{{
            funcValue.name
          }}</span>
        </div>
      </div> -->
    </div>

    <!-- <div class="yjsxt">
@@ -154,13 +145,13 @@
        },
      ],
      sMapModelList: [
        {
          id: "3Dcs",
          name: "3D城市",
          active: false,
          type: "san",
          src: require("@/assets/img/layer/3Dcs.png"),
        },
        // {
        //   id: "3Dcs",
        //   name: "3D城市",
        //   active: false,
        //   type: "san",
        //   src: require("@/assets/img/layer/3Dcs.png"),
        // },
        {
          id: "swmx",
          name: "三维模型",
@@ -618,67 +609,116 @@
  },
};
</script>

<style scoped>
.layerPanel {
  width: 100%;
  /* height: 396px; */
  position: absolute;
  bottom: 0px;
  align-items: center;
  padding: 0.1rem;
  background: white;
  z-index: 1000;
  padding-left: 0.25rem;
  /* padding: 0.1rem; */
  background: #ffffff;
  /* z-index: 1000; */
  /* padding-left: 0.25rem; */
  border-radius: 15px 15px 0px 0px;
}
.mapMode {
  width: 100%;
  margin-top: 24px;
  padding-left: 28px;
}

@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url("../../../../static/YouSheBiaoTiHei.ttf");
}
.title {
  height: 25px;
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 700;
  color: #181818;
  line-height: 25px;
  margin: 10px 0px 10px 0;
  width: 72px;
  height: 14px;
  font-family: "YouSheBiaoTiHei";
  font-weight: 400;
  font-size: 19px;
  color: #2e2e2e;
  line-height: 15px;
  margin-bottom: 18px;
}
.title2 {
  height: 15px;
}
.container {
.mapMode .container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
}

.layerItem {
  /* font-size: 14px; */
  font-family: Source Han Sans SC;
  font-family: "微软雅黑";
  font-weight: 400;
  margin-right: 30px;
  cursor: pointer;
  text-align: center;
}

.active {
  color: #4187ff;
  border: 2px solid #4187ff;
.mapMode .layerItem {
  width: 0.8rem;
  margin-right: 24px;
}
.mapMode img {
  display: block;
  width: 100%;
  border-radius: 11px;
  border: 1px dashed #127dff;
  margin-bottom: 11px;
}
span {
  font-family: "微软雅黑";
  font-size: 0.12rem;
  color: #6e6969;
  line-height: 12px;
}
.mapMode .active,
.areaType .active {
  color: #127dff;
  border: 2px solid #127dff;
  border-radius: 10px;
}

.spanActive {
  color: #4187ff;
  color: #127dff;
}
.areaType {
  width: 100%;
  margin-top: 30px;
}

img {
.areaType .ZTtitle {
  margin-left: 28px;
  margin-bottom: 3px;
}
.areaType .container {
  margin-top: 18px;
  padding: 0 4%;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
.areaType .layerItem {
  margin-bottom: 15px;
}

.areaType img {
  margin: 0 auto;
  /* background-color: green; */
  display: block;
  width: 60px;
  height: 40px;
  margin-bottom: 5px;
  width: 0.5rem;
  border-radius: 11px;
  box-shadow: 0 0 5px 5px rgb(196 222 236 / 30%);
  margin-bottom: 11px;
}

.more {
  float: right;
  margin-right: 20px;
  font-size: 0.12rem;
  color: #4187ff;
  color: #127dff;
  line-height: 25px;
  font-weight: 500;
  font-family: unset;

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -33,6 +33,7 @@
        </div>
      </div>
    </div>
    
    <div class="areaType">
      <div class="title ZTtitle">
        ä¸“题应用

 src/components/viewer.vue

@@ -4,15 +4,15 @@
    <div id="sdkContainer" @click="clicktoclose"></div>

    <!-- é¡µé¢æ ‡é¢˜ -->
    <div class="titleBg">
    <!-- <div class="titleBg">
      <img src="@/assets/img/title/title.png" />
    </div>
    </div> -->
    <!-- åŽ†å²å½±åƒ -->
    <my-history v-if="state.show"></my-history>
    <!-- åŽ†å²å½±åƒå…³é—­æŒ‰é’® -->
    <div class="colseBtn" v-if="state.show" @click="closeHistory(false)">
    <!-- <div class="colseBtn" v-if="state.show" @click="closeHistory(false)">
      <img class="searchBtn" src="@/assets/closeinput1.png" />
    </div>
    </div> -->
    <!-- å³ä¾§å¯¼èˆªæ¡† -->
    <my-navigation-bar></my-navigation-bar>
    <!-- æœç´¢æ¡† -->
@@ -24,7 +24,7 @@
    <!-- åŽŸå·¦ä¸‹èœå• -->
    <!-- <my-menu v-on:getshowsta="datafromchild" ref="menu"></my-menu> -->
    <!-- å·¦ä¸‹å¿«æ·åŒºåŸŸï¼ˆå¤ä½ã€æŒ‡åŒ—等） -->
    <my-left-bottom :test="childrendata"></my-left-bottom>
    <!-- <my-left-bottom :test="childrendata"></my-left-bottom> -->
    <!-- å³ä¸‹å¿«æ·åŒºåŸŸï¼ˆæ”¾å¤§ç¼©å°ï¼‰ -->
    <my-right-bottom :test="childrendata"></my-right-bottom>

@@ -34,7 +34,7 @@
    <!-- ä½ç½®é¢æ¿ -->
    <my-collection-panel></my-collection-panel>
    <!-- æŒ‡åŒ—针面板 -->
    <my-direction-panel></my-direction-panel>
    <!-- <my-direction-panel></my-direction-panel> -->
    <!-- æ–°å¢žæ”¶è—é¢æ¿ -->
    <my-add-collection-panel></my-add-collection-panel>
    <!-- çª¨äº•ã€æ‘„像头统计面板 -->
@@ -52,6 +52,7 @@
    <!-- åœŸåœ°ç®¡ç†å¼¹çª— -->
    <my-land-admin-info></my-land-admin-info>
    <my-slider></my-slider>
    <my-poplayer></my-poplayer>
  </div>
</template>
<script>
@@ -77,6 +78,7 @@
import layerTreePanel from "./sideMenu/layerTreePanel/main.vue";
import history from "./poplayer/history.vue";
import landAdminInfo from "./poplayer/landAdmin.vue";
import mainPoplayer from "./poplayer/poplayer.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
import Axios from "axios";

@@ -102,6 +104,7 @@
    "my-history": history,
    "my-land-admin-info": landAdminInfo,
    "my-slider": sliderAlpha,
    "my-poplayer": mainPoplayer,
  },
  data() {
    return {
@@ -399,7 +402,8 @@
  width: 100%;
  height: 100%;
  background: black;
  position: absolute !important;
  /* position: absolute !important; */
  z-index: 0;
}

.titleBg {
@@ -423,12 +427,14 @@
.bottomLeft {
  display: none;
}

.colseBtn {
  position: absolute;
  z-index: 2;
  top: 0.55rem;
  left: 0.2rem;
}

.colseBtn img {
  width: 30px;
}

 src/utils/map.js

@@ -437,15 +437,12 @@
            window.clickPOI = sgworld.Navigate.getMouseDegrees(event);
            // console.log(window.clickPOI);
            if (window.clickPOI) {
                // // éšè—ä¸‰ç»´ç•Œé¢å…³é—­æŒ‰é’®
                // let flag = store.tDCloseBtn.show
                // store.set3DCloseBtnShow(!flag);
                // // éšè—åº•éƒ¨å›¾å±‚面版
                // store.setLayerPanelShow(false);
                // // éšè—å³ä¸Šè§’菜单面板
                // store.setMenuListShow(false);
                // // éšè—åº•éƒ¨æ¼«æ¸¸é¢æ¿
                // store.setRoamPanelShow(false);
                // éšè—åº•éƒ¨å›¾å±‚面版
                store.setLayerPanelShow(false);
                // éšè—å³ä¸Šè§’菜单面板
                store.setMenuListShow(false);
                // éšè—åº•éƒ¨æ¼«æ¸¸é¢æ¿
                store.setRoamPanelShow(false);

            }
            // åœŸåœ°ç®¡ç†

 src/utils/store.js

@@ -1,4 +1,16 @@
const store = {
    navigator: {
        show: true,
    },
    setNavigatorShow(val) {
        this.navigator.show = val
    },
    mapTools: {
        show: true,
    },
    setMapToolShow(val) {
        this.mapTools.show = val
    },
    /**地址页面 */
    locationCollection: {
        show: false
@@ -47,13 +59,6 @@
    },
    setLayerPanelShow(val) {
        this.layerPanel.show = val;
    },
    /**三维关闭按钮 */
    tDCloseBtn: {
        show: true
    },
    set3DCloseBtnShow(val) {
        this.tDCloseBtn.show = val;
    },
    /**漫游面板 */
    roamPanel: {

 static/config copy.json

ÎļþÒÑɾ³ý

 static/config.json

@@ -1,13 +1,7 @@
{
  "username": "zjchy",
  "password": "admin123",
  "min_view_height": 40,
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjEyMyJ9.K8V0sPO_Y1CUunw4vGe6S899lDpsPixZ0b70KhP6O5M",
  "traffic": "http://www.map.zj.cn:8899/geoserver/zjplatform/wms",
  "poi_search11": "http://10.10.4.116:8085/yzAdapter/Navigation",
  "poi_search22": "http://10.10.4.115:8022/poisearch/qgpoi/POIQuery",
  "poi_search": "https://skyzt.bda.gov.cn/service/NavigationService",
  "poi_search2": "https://skyzt.bda.gov.cn/yzxncsApi/poisearch/qgpoi/POIQuery",
  "space_query": "http://10.20.55.133:3866/zjchys/query/list",
  "gis_base_url": "https://skyzt.bda.gov.cn/"
}