| | |
| | | import $store from "../index"; |
| | | import axios from "axios"; |
| | | const mobile = { |
| | | state: { |
| | | mviewer: null, // 地图实体类 |
| | |
| | | |
| | | audioData: null, //语音 |
| | | audioState: false, //语音状态 |
| | | |
| | | navigationStartLngLat: "", //导航起点 |
| | | navigationEndLngLat: "", //导航终点 |
| | | drawALineLayer: null, //导航路径图层 |
| | | isOpenDrawALine: false, //是否开启路径 |
| | | endPosition: "", //传送终点经纬度-- |
| | | isendPosition: false, //传送终点经纬度--感应数据 |
| | | routerS: [], //所有路径 |
| | | choiceRouterS: 0, //当前选择路径 |
| | | }, |
| | | mutations: { |
| | | MSET_VIEWER(state, viewer) { |
| | |
| | | state.tileset = data.tileset; |
| | | state.usetowpointfive = data.usetowpointfive; |
| | | }, |
| | | //直接移动 |
| | | cameraSetView(state, data) { |
| | | state.mviewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | // 114.0351, |
| | | // 27.6314, |
| | | // 200.0 |
| | | data[0] + 0.0, |
| | | data[1] + 0.00028, |
| | | data[2] || 300 |
| | | ), |
| | | orientation: { |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians( |
| | | state.dimensionData.heading |
| | | ), |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians( |
| | | state.dimensionData.pitch |
| | | ), |
| | | // heading: data.heading, |
| | | // pitch: data.pitch, |
| | | roll: state.dimensionData.roll, |
| | | }, |
| | | }); |
| | | }, |
| | | //删除路线 |
| | | removePolyline(state) { |
| | | if (state.drawALineLayer) { |
| | | state.drawALineLayer.remove(); |
| | | state.drawALineLayer = null; |
| | | state.isOpenDrawALine = false; |
| | | } |
| | | }, |
| | | //传送终点数据 |
| | | set_endPosition(state, data) { |
| | | state.isendPosition = !state.isendPosition; |
| | | state.endPosition = data; |
| | | }, |
| | | //传送当前选择的路径 |
| | | set_choiceRouterS(state, data) { |
| | | state.choiceRouterS = data; |
| | | }, |
| | | }, |
| | | actions: { |
| | | MSET_CREADE({ state, commit, dispatch }) { |
| | |
| | | 0, |
| | | state.dimensionData.pitch |
| | | ); |
| | | // console.log(state.dimension); |
| | | if (state.dimension != "2.5D") { |
| | | // if (true) { |
| | | dispatch("mapFlyTo", { |
| | |
| | | roll: Position.roll, |
| | | }); |
| | | } else { |
| | | // console.log(17878); |
| | | state.mviewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | |
| | | }, |
| | | }); |
| | | }, |
| | | //文字转语音控制↓ |
| | | MSET_GETAUDIO({ state, commit, dispatch }, val) { |
| | | state.audioData = new window.SpeechSynthesisUtterance(); |
| | | state.audioData.text = val; |
| | |
| | | } |
| | | } |
| | | }, |
| | | //文字转语音控制↑ |
| | | //导航系统↓ |
| | | MSET_GOTOWHERE({ state, commit, dispatch }, val) { |
| | | state.routerS = []; //清空存着的路径 |
| | | //单条步行 |
| | | //本地图使用的是WGS84坐标,而高德使用的是火星坐标GCJ02,所以需要转换参数过去 |
| | | // 返回值需要转换为WGS84坐标 |
| | | state.navigationStartLngLat = [+val.start[0], +val.start[1]]; //导航起点 |
| | | state.navigationEndLngLat = [+val.end[0], +val.end[1]]; //导航终点 |
| | | //转换WGS84坐标为GCJ02 |
| | | let GCJ02StartLngLat = global.DC.CoordTransform.WGS84ToGCJ02( |
| | | Number(state.navigationStartLngLat[0]), |
| | | Number(state.navigationStartLngLat[1]) |
| | | ); |
| | | let GCJ02EndLngLat = global.DC.CoordTransform.WGS84ToGCJ02( |
| | | Number(state.navigationEndLngLat[0]), |
| | | Number(state.navigationEndLngLat[1]) |
| | | ); |
| | | // 获取路径,使用的是高德API |
| | | |
| | | let url = "https://restapi.amap.com/v3/direction/walking"; //默认api步行 |
| | | let data = { |
| | | origin: `${Number(GCJ02StartLngLat[0]).toFixed(6)},${Number( |
| | | GCJ02StartLngLat[1] |
| | | ).toFixed(6)}`, |
| | | destination: `${Number(GCJ02EndLngLat[0]).toFixed(6)},${Number( |
| | | GCJ02EndLngLat[1] |
| | | ).toFixed(6)}`, |
| | | key: "4b3e1db3211054ce5b466407cbb9d221", |
| | | output: "json", |
| | | }; |
| | | let strategyType = [0]; |
| | | if (val.type) { |
| | | //切换驾车模式 |
| | | url = "https://restapi.amap.com/v3/direction/driving"; |
| | | data["strategy"] = 10; |
| | | strategyType = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; |
| | | } |
| | | // for (let index = 0; index < strategyType.length; index++) { |
| | | // data["strategy"] = strategyType[index]; |
| | | axios |
| | | .get(url, { |
| | | params: { ...data }, |
| | | }) |
| | | .then((res) => { |
| | | //回调 |
| | | const paths = res.data.route.paths; |
| | | for (let i = 0; i < paths.length; i++) { |
| | | //多条路线 |
| | | drawALine(paths[i]); |
| | | } |
| | | // const paths = res.data.route.paths[0].steps; |
| | | // drawALine(paths, res.data.route.paths[0].strategy); |
| | | }); |
| | | // } |
| | | let drawALine = (pathsour) => { |
| | | let paths = pathsour.steps; |
| | | let titles = pathsour.strategy; |
| | | //paths是个道路对象,其中polyline是String类型的经纬度 |
| | | let Str = state.navigationStartLngLat.join(",") + ";"; //加入起点 |
| | | for (let index = 0; index < paths.length; index++) { |
| | | const path = paths[index]; |
| | | let polyline = path.polyline; //取到String类型的经纬度 |
| | | let polylineArr = polyline.split(";"); //转为数组 |
| | | let polylineArrLength = polylineArr.length; //获取长度,避免多次重复读取polylineArr.length |
| | | for (let k = 0; k < polylineArrLength; k++) { |
| | | let inPolylineArr = polylineArr[k].split(","); //转经纬度为单独的数组 |
| | | let outIn = global.DC.CoordTransform.GCJ02ToWGS84( |
| | | //处理火星坐标转换成WGS84 GCJ02ToWGS84 |
| | | inPolylineArr[0], |
| | | inPolylineArr[1] |
| | | ); |
| | | polylineArr[k] = outIn.join(","); //每组经纬度转为String |
| | | } |
| | | polyline = polylineArr.join(";"); //合并转换后的经纬度合集 |
| | | |
| | | Str += polyline; //自加 |
| | | Str += ";"; |
| | | } |
| | | Str += state.navigationEndLngLat.join(","); //加入终点 |
| | | if (val.fn) { |
| | | let dataS = { |
| | | //返回数据 |
| | | titles: titles, |
| | | Str: Str, |
| | | }; |
| | | state.routerS.push(dataS); |
| | | return val.fn(dataS); |
| | | } else { |
| | | dispatch("MSET_DRAWALINELAYER", Str); //绘画线路 |
| | | } |
| | | }; |
| | | }, |
| | | //导航系统↑ |
| | | //绘画线路 |
| | | MSET_DRAWALINELAYER({ state, commit, dispatch }, Str) { |
| | | //检查是否存在路线 |
| | | commit("removePolyline"); |
| | | let color = |
| | | global.DC.Namespace.Cesium.Color.fromCssColorString("#409EFF"); |
| | | 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: material, |
| | | clampToGround: true, |
| | | }); |
| | | drawALineLayer.addOverlay(polyline); |
| | | state.drawALineLayer = drawALineLayer; |
| | | state.isOpenDrawALine = true; |
| | | // commit("cameraSetView", state.navigationStartLngLat); //移动 |
| | | }, |
| | | }, |
| | | }; |
| | | |