+

liuyg

2022-01-10 1e546153c0d18497bb27889e47237d7466902db1

+

 src/components/campusNav/index.vue

@@ -1,393 +1,411 @@
<template>
    <div class="campus-nav-box"
         ref="campusNavBox">
        <div class="header"
             @mousedown="move"
             :class="{'move': moveFlag}">
            <div class="title">
                <img class="icon deblurring"
                     src="/img/icon/xndh.png"
                     alt="">
                <span>
                    社区内导航
                </span>
            </div>
            <img class="close"
                 src="/img/navicon/close.png"
                 alt=""
                 @click="closeModel">
        </div>
        <div class="container">
            <div class="tab">
                <ul>
                    <li @click="tabClick('步行')"
                        :class="{on:tabOneFlag}">
                        <i></i>
                        步行
                    </li>
                    <li @click="tabClick('驾车')"
                        :class="{on:tabTwoFlag}">
                        <i></i>
                        驾车
                    </li>
                </ul>
            </div>
            <div class="content">
                <div>
                    <div>
                        <el-input v-model="getToName"
                                  placeholder="起点……">
                            <template slot="prepend"><i class="el-icon-location"
                                   style="color: green;"></i></template>
                        </el-input>
                    </div>
                    <div>
                        <el-input v-model="comeName"
                                  placeholder="终点……">
                            <template slot="prepend"><i class="el-icon-location"
                                   style="color: red;"></i></template>
                        </el-input>
                    </div>
                </div>
                <div>
                    <el-button @click="startNavigation"
                               type="primary">导航</el-button>
                </div>
            </div>
        </div>
  <div class="campus-nav-box" ref="campusNavBox">
    <div class="header" @mousedown="move" :class="{ move: moveFlag }">
      <div class="title">
        <img class="icon deblurring" src="/img/icon/xndh.png" alt="" />
        <span> 社区内导航 </span>
      </div>
      <img
        class="close"
        src="/img/navicon/close.png"
        alt=""
        @click="closeModel"
      />
    </div>
    <div class="container">
      <div class="tab">
        <ul>
          <li @click="tabClick('步行')" :class="{ on: tabOneFlag }">
            <i></i>
            步行
          </li>
          <li @click="tabClick('驾车')" :class="{ on: tabTwoFlag }">
            <i></i>
            驾车
          </li>
        </ul>
      </div>
      <div class="content">
        <div>
          <div>
            <el-input v-model="getToName" placeholder="起点……">
              <template slot="prepend"
                ><i class="el-icon-location" style="color: green"></i
              ></template>
            </el-input>
          </div>
          <div>
            <el-input v-model="comeName" placeholder="终点……">
              <template slot="prepend"
                ><i class="el-icon-location" style="color: red"></i
              ></template>
            </el-input>
          </div>
        </div>
        <div>
          <el-button @click="startNavigation" type="primary">导航</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import axios from 'axios'
import { mapGetters } from "vuex";
import axios from "axios";
export default {
    name: 'campusNav',
    data () {
        return {
            moveFlag: false,
            tabOneFlag: true,
            tabTwoFlag: false,
            DC: null,
            navigationWay: '步行',
            routeLayer: null
  name: "campusNav",
  data() {
    return {
      moveFlag: false,
      tabOneFlag: true,
      tabTwoFlag: false,
      DC: null,
      navigationWay: "步行",
      routeLayer: null,
    };
  },
  computed: {
    ...mapGetters([
      "viewer",
      // 起点
      "startingPoint",
      // 终点
      "terminus",
      // 出发名称
      "getToName",
      // 到达名称
      "comeName",
    ]),
  },
  created() {
    this.DC = global.DC;
  },
  methods: {
    move(e) {
      const that = this;
      const odiv = this.$refs.campusNavBox; // 获取目标元素
      // 算出鼠标相对元素的位置
      const disX = e.clientX - odiv.offsetLeft;
      const disY = e.clientY - odiv.offsetTop;

      const disH = odiv.offsetHeight;
      const disW = odiv.offsetWidth;

      document.onmousemove = (e) => {
        that.moveFlag = true;
        // 鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        // 绑定元素位置到positionX和positionY上面

        if (left >= window.innerWidth - disW) {
          left = window.innerWidth - disW;
        }
    },
    computed: {
        ...mapGetters([
            'viewer',
            // 起点
            'startingPoint',
            // 终点
            'terminus',
            // 出发名称
            'getToName',
            // 到达名称
            'comeName'
        ])
    },
    created () {
        this.DC = global.DC
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.campusNavBox // 获取目标元素
            // 算出鼠标相对元素的位置
            const disX = e.clientX - odiv.offsetLeft
            const disY = e.clientY - odiv.offsetTop

            const disH = odiv.offsetHeight
            const disW = odiv.offsetWidth

            document.onmousemove = (e) => {
                that.moveFlag = true
                // 鼠标按下并移动的事件
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX
                let top = e.clientY - disY

                // 绑定元素位置到positionX和positionY上面

                if (left >= window.innerWidth - disW) {
                    left = window.innerWidth - disW
                }

                if (left <= 0) {
                    left = 0
                }

                if (top >= window.innerHeight - disH) {
                    top = window.innerHeight - disH
                }

                if (top <= 60) {
                    top = 60
                }

                // 移动当前元素
                odiv.style.left = (left) + 'px'
                odiv.style.top = (top) + 'px'
                odiv.style.bottom = 'auto'
            }
            document.onmouseup = (e) => {
                that.moveFlag = false
                document.onmousemove = null
                document.onmouseup = null
            }
        },

        closeModel () {
            if (this.$route.path.indexOf('/campusnavi') != -1) {
                this.$store.dispatch('delVisitedViews', this.$route)
                this.$router.push('/pcLayout/default')
            }

            this.$store.commit('SET_COMENAME', '')
            this.$store.commit('SET_TERMINUS', null)
            this.$store.commit('SET_GETTONAME', '')
            this.$store.commit('SET_STARTINGPOINT', null)
            this.$store.commit('SET_CAMPUSNAVFLAG', false)
        },

        tabClick (param) {
            this.navigationWay = param
            this.tabOneFlag = !this.tabOneFlag
            this.tabTwoFlag = !this.tabTwoFlag
        },

        startNavigation () {
            if (this.routeLayer == null) {
                this.routeLayer = new this.DC.VectorLayer('navigation')
                this.viewer.addLayer(this.routeLayer)
            } else {
                this.routeLayer.clear()
            }
            if (this.startingPoint == null) {
                this.$message('请输入起点！！！')
            }
            if (this.terminus == null) {
                this.$message('请输入终点！！！')
            }

            // var start = this.DC.Transform.transformWGS84ToCartesian()
            const startEntity = new this.DC.Billboard(new this.DC.Position(Number(this.startingPoint[0]), Number(this.startingPoint[1]), Number(this.startingPoint[2])), '/img/navicon/start.png')
            this.routeLayer.addOverlay(startEntity)
            // var end = this.DC.Transform.transformWGS84ToCartesian()
            const endEntity = new this.DC.Billboard(new this.DC.Position(Number(this.terminus[0]), Number(this.terminus[1]), Number(this.terminus[2])), '/img/navicon/end.png')
            this.routeLayer.addOverlay(endEntity)

            var routes = ''

            if (this.navigationWay == '步行') {
                axios.get('https://restapi.amap.com/v3/direction/walking', {
                    params: {
                        origin: `${Number(this.startingPoint[0]).toFixed(6)},${Number(this.startingPoint[1]).toFixed(6)}`,
                        destination: `${Number(this.terminus[0]).toFixed(6)},${Number(this.terminus[1]).toFixed(6)}`,
                        key: '4b3e1db3211054ce5b466407cbb9d221',
                        output: 'json'
                    }
                }).then(res => {
                    res.data.route.paths[0].steps.forEach(item => {
                        item.polyline += ';'
                        routes += item.polyline
                    })

                    routes = routes.substr(0, routes.length - 1)

                    const polyline = new this.DC.Polyline(routes)
                    polyline.setStyle({
                        width: 3,
                        material: new this.DC.PolylineTrailMaterialProperty({
                            color: this.DC.Color.RED,
                            speed: 10
                        }),
                        clampToGround: true
                    })
                    this.routeLayer.addOverlay(polyline)
                    this.viewer.flyTo(this.routeLayer)
                })
            } else {
                axios.get('https://restapi.amap.com/v3/direction/driving', {
                    params: {
                        origin: `${Number(this.startingPoint[0]).toFixed(6)},${Number(this.startingPoint[1]).toFixed(6)}`,
                        destination: `${Number(this.terminus[0]).toFixed(6)},${Number(this.terminus[1]).toFixed(6)}`,
                        key: '4b3e1db3211054ce5b466407cbb9d221',
                        strategy: 2,
                        extensions: 'all',
                        output: 'json'
                    }
                }).then(res => {
                    res.data.route.paths[0].steps.forEach(item => {
                        item.polyline += ';'
                        routes += item.polyline
                    })

                    routes = routes.substr(0, routes.length - 1)

                    const polyline = new this.DC.Polyline(routes)
                    polyline.setStyle({
                        width: 3,
                        material: new this.DC.PolylineTrailMaterialProperty({
                            color: this.DC.Color.RED,
                            speed: 10
                        }),
                        clampToGround: true
                    })
                    this.routeLayer.addOverlay(polyline)
                    this.viewer.flyTo(this.routeLayer)
                })
            }
        },

        clearLayer () {
            if (this.routeLayer != null) {
                this.routeLayer.clear()
            }
        if (left <= 0) {
          left = 0;
        }
    }
}

        if (top >= window.innerHeight - disH) {
          top = window.innerHeight - disH;
        }

        if (top <= 60) {
          top = 60;
        }

        // 移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
        odiv.style.bottom = "auto";
      };
      document.onmouseup = (e) => {
        that.moveFlag = false;
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },

    closeModel() {
      if (this.$route.path.indexOf("/campusnavi") != -1) {
        this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push("/pcLayout/default");
      }

      this.$store.commit("SET_COMENAME", "");
      this.$store.commit("SET_TERMINUS", null);
      this.$store.commit("SET_GETTONAME", "");
      this.$store.commit("SET_STARTINGPOINT", null);
      this.$store.commit("SET_CAMPUSNAVFLAG", false);
    },

    tabClick(param) {
      this.navigationWay = param;
      this.tabOneFlag = !this.tabOneFlag;
      this.tabTwoFlag = !this.tabTwoFlag;
    },

    startNavigation() {
      if (this.routeLayer == null) {
        this.routeLayer = new this.DC.VectorLayer("navigation");
        this.viewer.addLayer(this.routeLayer);
      } else {
        this.routeLayer.clear();
      }
      if (this.startingPoint == null) {
        this.$message("请输入起点！！！");
      }
      if (this.terminus == null) {
        this.$message("请输入终点！！！");
      }

      // var start = this.DC.Transform.transformWGS84ToCartesian()
      const startEntity = new this.DC.Billboard(
        new this.DC.Position(
          Number(this.startingPoint[0]),
          Number(this.startingPoint[1]),
          Number(this.startingPoint[2])
        ),
        "/img/navicon/start.png"
      );
      this.routeLayer.addOverlay(startEntity);
      // var end = this.DC.Transform.transformWGS84ToCartesian()
      const endEntity = new this.DC.Billboard(
        new this.DC.Position(
          Number(this.terminus[0]),
          Number(this.terminus[1]),
          Number(this.terminus[2])
        ),
        "/img/navicon/end.png"
      );
      this.routeLayer.addOverlay(endEntity);

      var routes = "";

      if (this.navigationWay == "步行") {
        axios
          .get("https://restapi.amap.com/v3/direction/walking", {
            params: {
              origin: `${Number(this.startingPoint[0]).toFixed(6)},${Number(
                this.startingPoint[1]
              ).toFixed(6)}`,
              destination: `${Number(this.terminus[0]).toFixed(6)},${Number(
                this.terminus[1]
              ).toFixed(6)}`,
              key: "4b3e1db3211054ce5b466407cbb9d221",
              output: "json",
            },
          })
          .then((res) => {
            res.data.route.paths[0].steps.forEach((item) => {
              item.polyline += ";";
              routes += item.polyline;
            });

            routes = routes.substr(0, routes.length - 1);

            const polyline = new this.DC.Polyline(routes);
            polyline.setStyle({
              width: 3,
              material: new this.DC.PolylineTrailMaterialProperty({
                color: this.DC.Color.RED,
                speed: 10,
              }),
              clampToGround: true,
            });
            this.routeLayer.addOverlay(polyline);
            this.viewer.flyTo(this.routeLayer);
          });
      } else {
        axios
          .get("https://restapi.amap.com/v3/direction/driving", {
            params: {
              origin: `${Number(this.startingPoint[0]).toFixed(6)},${Number(
                this.startingPoint[1]
              ).toFixed(6)}`,
              destination: `${Number(this.terminus[0]).toFixed(6)},${Number(
                this.terminus[1]
              ).toFixed(6)}`,
              key: "4b3e1db3211054ce5b466407cbb9d221",
              strategy: 2,
              extensions: "all",
              output: "json",
            },
          })
          .then((res) => {
            res.data.route.paths[0].steps.forEach((item) => {
              item.polyline += ";";
              routes += item.polyline;
            });

            routes = routes.substr(0, routes.length - 1);

            const polyline = new this.DC.Polyline(routes);
            polyline.setStyle({
              width: 3,
              material: new this.DC.PolylineTrailMaterialProperty({
                color: this.DC.Color.RED,
                speed: 10,
              }),
              clampToGround: true,
            });
            this.routeLayer.addOverlay(polyline);
            this.viewer.flyTo(this.routeLayer);
          });
      }
    },

    clearLayer() {
      if (this.routeLayer != null) {
        this.routeLayer.clear();
      }
    },
  },
};
</script>

<style lang='scss' scope>
<style lang="scss" scope>
.campus-nav-box {
    position: fixed;
    top: 20%;
    left: 20%;
    width: 320px;
    height: 186px;
    z-index: 99;
    color: #fff;
    background: #fff;
    border-radius: 8px;
  position: fixed;
  top: 20%;
  left: 20%;
  width: 320px;
  height: 186px;
  z-index: 99;
  color: #fff;
  background: #fff;
  border-radius: 8px;

    .header {
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 36px;
        line-height: 36px;
        background-color: #2196f3;
  .header {
    position: relative;
    border-radius: 8px 8px 0 0;
    width: 100%;
    height: 36px;
    line-height: 36px;
    background-color: #2196f3;

        .title {
            padding-left: 10px;
    .title {
      padding-left: 10px;

            img {
                width: 20px;
                height: 20px;
                vertical-align: middle;
            }
      img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }

            span {
                margin-left: 6px;
                display: inline-block;
                vertical-align: middle;
                color: #fff;
            }
        }

        .close {
            position: absolute;
            right: 6px;
            top: 0;
            left: auto;
            bottom: 0;
            margin: auto;
            width: 14px;
            height: 14px;
            cursor: pointer;
        }
      span {
        margin-left: 6px;
        display: inline-block;
        vertical-align: middle;
        color: #fff;
      }
    }

    .move {
        cursor: move;
    .close {
      position: absolute;
      right: 6px;
      top: 0;
      left: auto;
      bottom: 0;
      margin: auto;
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
  }

    .container {
        height: calc(100% - 36px);
  .move {
    cursor: move;
  }

        .tab {
            height: 44px;
            line-height: 44px;
  .container {
    height: calc(100% - 36px);

            ul {
                display: flex;
    .tab {
      height: 44px;
      line-height: 44px;

                li {
                    text-align: center;
                    flex: 1;
                    color: #337ab7;
                    cursor: pointer;
                    border-bottom: 1px solid #ccc;
      ul {
        display: flex;

                    i {
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        vertical-align: text-bottom;
                    }
                }
        li {
          text-align: center;
          flex: 1;
          color: #337ab7;
          cursor: pointer;
          border-bottom: 1px solid #ccc;

                li:nth-child(1) {
                    border-right: 1px solid #ccc;

                    i {
                        background: url(/img/navicon/walk-one.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li:nth-child(2) {
                    i {
                        background: url(/img/navicon/drive-one.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li.on {
                    color: #a40000;
                    border-bottom: none;
                }

                li.on:nth-child(1) {
                    i {
                        background: url(/img/navicon/walk-two.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li.on:nth-child(2) {
                    i {
                        background: url(/img/navicon/drive-two.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
          i {
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: text-bottom;
          }
        }

        .content {
            padding: 0 10px;
            display: flex;
            align-items: center;
            height: calc(100% - 44px);
        li:nth-child(1) {
          border-right: 1px solid #ccc;

            & > div:nth-child(1) {
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100%;

                & > div {
                    flex: 1;
                    line-height: 53px;
                }
            }

            & > div:nth-child(2) {
                width: 100px;
                text-align: center;
            }
          i {
            background: url(/img/navicon/walk-one.png) no-repeat;
            background-size: 100% 100%;
          }
        }

        li:nth-child(2) {
          i {
            background: url(/img/navicon/drive-one.png) no-repeat;
            background-size: 100% 100%;
          }
        }

        li.on {
          color: #a40000;
          border-bottom: none;
        }

        li.on:nth-child(1) {
          i {
            background: url(/img/navicon/walk-two.png) no-repeat;
            background-size: 100% 100%;
          }
        }

        li.on:nth-child(2) {
          i {
            background: url(/img/navicon/drive-two.png) no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }

    .content {
      padding: 0 10px;
      display: flex;
      align-items: center;
      height: calc(100% - 44px);

      & > div:nth-child(1) {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;

        & > div {
          flex: 1;
          line-height: 53px;
        }
      }

      & > div:nth-child(2) {
        width: 100px;
        text-align: center;
      }
    }
  }
}
</style>

 src/components/mobileCloseRouter/index.vue

@@ -104,6 +104,9 @@
  justify-content: center;
  border-radius: 8px 0 0 8px;
  color: #000;
  border-left: 1px solid #a4d1ff;
  border-top: 1px solid #a4d1ff;
  border-bottom: 1px solid #a4d1ff;
  transition: all 0.5s;
}
.mobileCloseActive {
@@ -111,6 +114,7 @@
  opacity: 1;
}
.mobileCloseActiveOpen {
  border: 1px solid #409eff;
  background-color: #409eff;
  color: #fff;
}

 src/components/mobileWindow/index.vue

@@ -6,7 +6,11 @@
  >
    <div class="mobiletitle">
      {{ title }}
      <span class="mobile_audio" @click="openAudio" v-show="introduce">
      <span
        class="mobile_audio"
        @click="openAudio"
        v-show="introduce && !video"
      >
        <i class="el-icon-video-play icon" v-show="!audioState"></i>
        <i class="el-icon-video-pause icon" v-show="audioState"></i>
        <!-- <div id="bdtts_div_id">
@@ -208,12 +212,12 @@
      let once = true;
      if (val == "去这") {
        //定位
        // console.log(this.query.query);
        console.log(this.query.query);
        // that.$store.commit("set_endPosition", this.query.query.lntLat);
        let ints = {
          // start: [114.039946, 27.628475],
          // end: that.query.query.lntLat,
          start: that.query.query.lntLat,
          start: [+that.query.query.lntLat[0], +that.query.query.lntLat[1]],
          end: [114.031946, 27.621475],
          type: "driving",
          fn: function (datas) {

 src/store/modules/mobile.js

@@ -720,26 +720,18 @@
    MSET_DRAWALINELAYER({ state, commit, dispatch }, Str) {
      //检查是否存在路线
      commit("removePolyline");
      // let color = global.DC.Color.RED;
      // let color = global.DC.Namespace.Cesium.Color.DEEPSKYBLUE;
      let color =
        global.DC.Namespace.Cesium.Color.fromCssColorString("#409EFF");
      // let color = {
      //   alpha: 1,
      //   blue: 0,
      //   green: 0,
      //   red: 1,
      // };
      // color.blue = 0.25;
      // color.green = 0.61;
      // color.red = 1;
      // console.log(color);
      let material = new global.DC.PolylineTrailMaterialProperty({
        color: color,
        speed: 10,
      });
      let drawALineLayer = new global.DC.VectorLayer("layer");
      state.mviewer.addLayer(drawALineLayer);
      let polyline = new global.DC.Polyline(Str); //加入绘画点
      polyline.setStyle({
        width: 3,
        material: color,
        material: material,
        clampToGround: true,
      });
      drawALineLayer.addOverlay(polyline);