使用websocket获取页面相关信息、添加左下角真实地图展示

package-lock.json

@@ -3278,6 +3278,11 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
+    "coordtransform": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/coordtransform/-/coordtransform-2.1.2.tgz",
+      "integrity": "sha512-0xLJApBlrUP+clyLJWIaqg4GXE5JTbAJb5d/CDMqebIksAMMze8eAyO6YfHEIxWJ+c42mXoMHBzWTeUrG7RFhw=="
+    },
     "copy-webpack-plugin": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "^1.3.4",
+    "coordtransform": "^2.1.2",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.13",
     "vue": "^2.6.14",

src/api/base.js

@@ -25,7 +25,8 @@ export const getCarSpeed = (query) =>
 // 获取早晚高峰
 export const getPeak = () =>
   request({
-    url: "/api/blade-business/common-api/get-rush-hour",
+    // url: "/api/blade-business/common-api/get-rush-hour",
+    url: "/api/blade-business/poc_morning_evening/get-list-all",
     method: "get",
   });
 

src/main.js

@@ -9,6 +9,12 @@ Vue.use(ElementUI);
 
 Vue.config.productionTip = false;
 
+// 防止刷新地图不显示，清除地图换成
+const amapKeys = Object.keys(localStorage).filter((key) => key.match(/^_AMap_/));
+amapKeys.forEach((key) => {
+  localStorage.removeItem(key);
+});
+
 new Vue({
   router,
   store,

src/router/index.js

@@ -4,6 +4,7 @@ import HomeView from "../views/HomeView.vue";
 import AboutView from "../views/AboutView.vue";
 import stopView from "../views/stopView.vue";
 import trafficView from "../views/trafficView.vue";
+import lunboView from "../views/lunbo.vue";
 
 Vue.use(VueRouter);
 
@@ -32,6 +33,11 @@ const routes = [
     name: "traffic",
     component: trafficView,
   },
+  {
+    path: "/lunbo",
+    name: "lunbo",
+    component: lunboView,
+  },
 ];
 
 const router = new VueRouter({

src/util/change.js

@@ -0,0 +1,76 @@
+//wgs84_to_gcj02.js文件
+
+//地标 转 国测 常量
+var x_PI = (3.14159265358979324 * 3000.0) / 180.0;
+var PI = 3.1415926535897932384626;
+var a = 6378245.0; //卫星椭球坐标投影到平面地图坐标系的投影因子。
+var ee = 0.00669342162296594323; //椭球的偏心率。
+
+//判断是否在国内，在中国国内的经纬度才需要做偏移
+function out_of_china(lng, lat) {
+  return lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271 || false;
+}
+
+//转化经度
+function transformlng(lng, lat) {
+  var ret =
+    300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
+  ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
+  ret += ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / 3.0;
+  ret += ((150.0 * Math.sin((lng / 12.0) * PI) + 300.0 * Math.sin((lng / 30.0) * PI)) * 2.0) / 3.0;
+  return ret;
+}
+
+//转化纬度
+function transformlat(lng, lat) {
+  var ret =
+    -100.0 +
+    2.0 * lng +
+    3.0 * lat +
+    0.2 * lat * lat +
+    0.1 * lng * lat +
+    0.2 * Math.sqrt(Math.abs(lng));
+  ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
+  ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0;
+  ret += ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0;
+  return ret;
+}
+
+//wgs84 to gcj02   地球坐标系 转 火星坐标系
+export function wgs84_to_gcj02(lng, lat) {
+  if (out_of_china(lng, lat)) {
+    return [lng, lat];
+  } else {
+    var dlat = transformlat(lng - 105.0, lat - 35.0);
+    var dlng = transformlng(lng - 105.0, lat - 35.0);
+    var radlat = (lat / 180.0) * PI;
+    var magic = Math.sin(radlat);
+    magic = 1 - ee * magic * magic;
+    var sqrtmagic = Math.sqrt(magic);
+    dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
+    dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
+    var mglat = lat + dlat;
+    var mglng = lng + dlng;
+
+    return [mglng, mglat];
+  }
+}
+
+//gcj02 to wgs84  火星坐标系 转 地球坐标系
+export function gcj02_to_wgs84(lng, lat) {
+  if (out_of_china(lng, lat)) {
+    return [lng, lat];
+  } else {
+    var dlat = transformlat(lng - 105.0, lat - 35.0);
+    var dlng = transformlng(lng - 105.0, lat - 35.0);
+    var radlat = (lat / 180.0) * PI;
+    var magic = Math.sin(radlat);
+    magic = 1 - ee * magic * magic;
+    var sqrtmagic = Math.sqrt(magic);
+    dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
+    dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
+    mglat = lat + dlat;
+    mglng = lng + dlng;
+    return [lng * 2 - mglng, lat * 2 - mglat];
+  }
+}

src/views/lunbo.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div class="box" v-if="showFirst">
+        <el-carousel height="150px" :interval="parseInt(5000 / oneArr.length)" initial-index="0">
+            <el-carousel-item v-for="item in oneArr" :key="item" >
+                <h3 class="small">{{ item }}</h3>
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+    <div class="box two" v-if="showSecond">
+        <el-carousel height="150px" :interval="parseInt(5000 / twoArr.length)" initial-index="0">
+            <el-carousel-item v-for="item in twoArr" :key="item" >
+                <h3 class="small">{{ item }}</h3>
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+    <div class="box three" v-if="showThree">
+        <el-carousel height="150px" :interval="parseInt(5000 / threeArr.length)" initial-index="0">
+            <el-carousel-item v-for="item in threeArr" :key="item" >
+                <h3 class="small">{{ item }}</h3>
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+    <div class="box four" v-if="showForth">
+        
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            showFirst:false,
+            showSecond:false,
+            showThree:false,
+            showForth:false,
+            firstInter:null,
+            twoInter:null,
+            threeInter:null,
+            fourInter:null,
+            oneArr:[1,2,3,4],
+            twoArr:[5,6],
+            threeArr:[7,8,9],
+            fourArr:[10,11,12,13,14],
+        }
+    },
+    created() {
+        this.showBox()
+    },
+    methods: {
+        showBox(){
+            this.showFirst = true;
+            this.showForth = false;
+            clearTimeout(this.firstInter)
+            clearTimeout(this.twoInter)
+            clearTimeout(this.threeInter)
+            clearTimeout(this.fourInter)
+            this.firstInter = setTimeout(() =>{
+                this.showBox1()
+            },5100)
+        },
+        showBox1(){
+            this.showSecond = true;
+            this.showFirst = false;
+            clearTimeout(this.firstInter)
+            clearTimeout(this.twoInter)
+            clearTimeout(this.threeInter)
+            clearTimeout(this.fourInter)
+            this.twoInter = setTimeout(() =>{
+                
+                this.showBox2()
+            },5100)
+        },
+        showBox2(){
+            this.showSecond = false;
+            this.showThree = true;
+            clearTimeout(this.firstInter)
+            clearTimeout(this.twoInter)
+            clearTimeout(this.threeInter)
+            clearTimeout(this.fourInter)
+            this.threeInter = setTimeout(() =>{
+                this.showBox3()
+            },5100)
+        },
+        showBox3(){
+            this.showThree = false;
+            this.showForth = true;
+            clearTimeout(this.firstInter)
+            clearTimeout(this.twoInter)
+            clearTimeout(this.threeInter)
+            clearTimeout(this.fourInter)
+            this.threeInter = setTimeout(() =>{
+                this.showBox()
+            },5100)
+        }
+    },
+}
+</script>
+
+<style>
+.box{
+    width: 300px;
+    height: 300px;
+    border: 1px solid #000;
+    margin: 30px;
+}
+
+.two{
+    border: 1px solid red;
+}
+.three{
+    border: 1px solid green;
+}
+.four{
+    border: 1px solid yellow;
+}
+</style>

src/views/trafficView.vue

@@ -9,7 +9,9 @@ import AMapLoader from '@amap/amap-jsapi-loader';
 export default {
     data() {
         return {
-            
+           pointX:'121.478226',
+           pointY:'37.457668' ,
+           marker:null
         }
     },
     created() {
@@ -29,13 +31,13 @@ export default {
                 this.map = new AMap.Map("map",{  //设置地图容器id
                     viewMode:"2D",    //是否为3D地图模式
                     zoom:15,           //初始化地图级别
-                   center: [121.39975,37.542694],    //初始化地图中心点位置
+                   center: [this.pointX,this.pointY],    //初始化地图中心点位置
                 //    mapStyle: "amap://styles/blue",
                 });
                    
                 this.map.panBy(300,120,0)
-                var marker = new AMap.Marker({
+                this.marker = new AMap.Marker({
-                    position: new AMap.LngLat(121.39975, 37.542694),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+                    position: new AMap.LngLat(this.pointX, this.pointY),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                     title: ''
                 });
 
@@ -70,7 +72,25 @@ export default {
                 });
                  })
 
-                this.map.add(marker);
+                this.map.add(this.marker);
+
+                setTimeout(() =>{
+                    if(this.marker){
+                        this.map.remove(this.marker);
+                    }
+                    this.pointX = '121.472609';
+                    this.pointY = '37.459379'
+                    // this.initMap()
+                    // this.map.setPointToCenter(this.pointX, this.pointY)
+                    this.map.setZoomAndCenter(15, [this.pointX,this.pointY]);
+                    console.log(this.map)
+                    this.marker = new AMap.Marker({
+                        position: new AMap.LngLat(this.pointX, this.pointY),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+                        title: ''
+                    });
+                    this.map.panBy(300,120,0)
+                    this.map.add(this.marker);
+                },5000)
                 
             }).catch(e=>{
                 console.log(e);