From 1e546153c0d18497bb27889e47237d7466902db1 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 10 Jan 2022 14:13:08 +0800
Subject: [PATCH] +
---
src/components/campusNav/index.vue | 740 +++++++++++++++++++++++++++++---------------------------
1 files changed, 379 insertions(+), 361 deletions(-)
diff --git a/src/components/campusNav/index.vue b/src/components/campusNav/index.vue
index 1e1df1c..918eaaa 100644
--- a/src/components/campusNav/index.vue
+++ b/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>
--
Gitblit v1.9.3