From 370a345a425790d665c37af67cb8758d6745b749 Mon Sep 17 00:00:00 2001 From: jinna Date: Mon, 22 May 2023 15:28:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8websocket=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9B=B8=E5=85=B3=E4=BF=A1=E6=81=AF=E3=80=81?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B7=A6=E4=B8=8B=E8=A7=92=E7=9C=9F=E5=AE=9E?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 5 + package.json | 1 + src/api/base.js | 3 +- src/main.js | 6 + src/router/index.js | 6 + src/util/change.js | 76 ++ src/util/changeCoord.js | 0 src/views/AboutView.vue | 1604 ++++++++++++++++++++++--------------- src/views/lunbo.vue | 118 +++ src/views/trafficView.vue | 30 +- 10 files changed, 1214 insertions(+), 635 deletions(-) create mode 100644 src/util/change.js create mode 100644 src/util/changeCoord.js create mode 100644 src/views/lunbo.vue diff --git a/package-lock.json b/package-lock.json index a746061..f6bec9e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a717956..d453b83 100644 --- a/package.json +++ b/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", diff --git a/src/api/base.js b/src/api/base.js index eba6a75..e1eb53c 100644 --- a/src/api/base.js +++ b/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", }); diff --git a/src/main.js b/src/main.js index 981e6e0..a65f9a7 100644 --- a/src/main.js +++ b/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, diff --git a/src/router/index.js b/src/router/index.js index 9a9d3d1..425491e 100644 --- a/src/router/index.js +++ b/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({ diff --git a/src/util/change.js b/src/util/change.js new file mode 100644 index 0000000..0856737 --- /dev/null +++ b/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]; + } +} diff --git a/src/util/changeCoord.js b/src/util/changeCoord.js new file mode 100644 index 0000000..e69de29 diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue index 498ace6..cac5f3c 100644 --- a/src/views/AboutView.vue +++ b/src/views/AboutView.vue @@ -7,549 +7,936 @@
-
-
-
- -
{{date}} {{time}}
- -
{{temStatus}} {{temp}}℃
- -
{{speedValue}}KM/h
-
- -
- {{peakName}} {{peakTime}} -
-
-
-
-
起
-
{{dataArr.siteData.startSite}}
-
-
-
-
-
-
- -
-
-
终
-
{{dataArr.siteData.endSite}}
+
+
+
+ +
{{ date }} {{ time }}
+ +
{{ temStatus }} {{ temp }}℃
+ +
{{ speedValue }}KM/h
+
+ +
{{ peakTime }}
-
-
- -
{{nameArr[0]}}
+
+
+
起
+
{{ dataArr.siteData.startSite }}
-
- -
{{nameArr[1]}}
+
+
+
-
- - -
{{nameArr[2]}}
+
+
-
- -
{{nameArr[3]}}
+
+
终
+
{{ dataArr.siteData.endSite }}
-
- -
{{nameArr[4]}}
+
+
+ +
{{ nameArr[0] }}
+
+
+ +
{{ nameArr[1] }}
+
+
+ + +
{{ nameArr[2] }}
+
+
+ +
{{ nameArr[3] }}
+
+
+ +
{{ nameArr[4] }}
+
-
-
-
-
- - - - - - -
-
-
- -
{{siteTips}}
-
-
-
-
{{articleData}}
+
+
+ + + +
+ + + + +
-
-
-
-
{{activityData}}
+
+ + + + +
+
+ + + + + +
+
+
-
-
-
{{scenicData}}
+
+
+ +
+
{{ siteTips }}
+
+
+
+
+
{{ articleData }}
+
+
+
+
+
{{ activityData }}
+
+
+
+
+
{{ scenicData }}
+
-
-
- + \ No newline at end of file diff --git a/src/views/trafficView.vue b/src/views/trafficView.vue index 277bc27..e21efb0 100644 --- a/src/views/trafficView.vue +++ b/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({ - position: new AMap.LngLat(121.39975, 37.542694), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] + this.marker = new AMap.Marker({ + 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);