import $store from '../index' import axios from 'axios' import urlParameter from './mobiles/urlParameter' const mobile = { state: { ...urlParameter.state, // url参数 mviewer: null, // 地图实体类 mBigPopup: false, // 全屏弹窗 popupOurOpenData: [], // 全屏弹窗中下拉菜单数据 popupTableName: [], // 全屏弹窗标签页数据 mBigPopupAfter: false, /// /全屏弹窗之前的弹窗 ips: '', // 获取的ip iconHide: false, // 右侧伸缩状态 // DC: '',//DC全局保存 MobileWindowsHide: true, // 改变点击窗口的显示状态 MobileWindowChangeData: false, // 改变点击窗口的数据 popupsDom: '', // mobileDivForms的实体类 query: {}, // 传输数据 openmobileGoTo: false, // 测试 ccDataState: false, // 测试 openmobilePanorama: false, // 实景显影 MobileWindowsHideFixed: true, // 改变点击窗口的显示状态--固定窗口 MobileWindowChangeDataFixed: false, // 改变点击窗口的数据--固定窗口 // 在每次飞行弹窗中 加入自己的点 pointLayer: null, pointLayerData: { flag: false, label: '选择点', img: '/img/leftnav/way.png', normal: '/img/leftnav/way.png', checked: '/img/leftnav/way-checked.png', layer: 'pointLayer' }, // 默认起始点函数 startPointFn: '', dimension: '2.5D', // 维度 dimensionData: { // 维度镜头数据 heading: 0, pitch: -90, roll: 0 }, zoomRange: [80, 200], // 缩放程度 frislayertHeight: 160, // 默认弹窗高度 perspectiveControl: '', // 视角控制:高度、角度 ()=>{} perspectiveControls: '', // 视角控制:高度、角度 ()=>{} tilesetLayer: null, // 3d模型 tileset: null, // 3d模型 tilesetLayer: null, // 2.5d模型 usetowpointfive: null, tilesetLayer: null, // 瀑布流 areaLayer: null, // 2.5d事件--绿色图层 select: { // 绿色图层控制显示 overlay: undefined, color: undefined }, vecLayer: null, // 3D底图 cvaLayer: null, // 3D底图 audioData: null, // 语音 audioState: false, // 语音状态 navigationStartLngLat: '', // 导航起点 navigationEndLngLat: '', // 导航终点 drawALineLayer: null, // 导航路径图层 drawALineLayerIcon: null, // 导航路径图层图标 isOpenDrawALine: false, // 是否开启路径 endPosition: '', // 传送终点经纬度-- isendPosition: false, // 传送终点经纬度--感应数据 routerS: [], // 所有路径 choiceRouterS: 0, // 当前选择路径 showActivity: false, // 是否显示活动弹窗 showActivityData: {}, // 活动内容 drawALineLayerMany: null, // 活动路线图层 drawAPointLayerMany: null, // 活动点图层 isOpenDrawALineMany: null, // 是否开启活动 seeRight: true // 右侧控制栏显影 }, mutations: { ...urlParameter.mutations, // url参数 MSET_VIEWER (state, viewer) { state.mviewer = viewer }, MSET_BIGPOPUP (state, viewer) { state.mBigPopup = viewer $store.dispatch('closeMobileWindowsDom') // 关闭弹窗 }, MSET_BIGPOPUPAFTER (state, viewer) { state.mBigPopupAfter = viewer $store.dispatch('closeMobileWindowsDom') // 关闭弹窗 }, MSET_POPUPOUROPENDATA (state, viewer) { state.popupOurOpenData = viewer }, MSET_ICONHIDE (state, viewer) { state.iconHide = viewer }, MSET_POPUPTABLENAME (state, viewer) { state.popupTableName = viewer }, MSET_MOBILEWINDOWSHIDE (state, viewer) { // 随地图移动窗口 state.MobileWindowChangeData = !state.MobileWindowChangeData state.MobileWindowsHide = viewer }, MSETCC_SETCC (state, viewer) { state.ccDataState = !state.ccDataState // 专门测试 state.query = viewer }, MSET_POPUPDOM (state, viewer) { state.popupsDom = viewer }, MSET_QUERY (state, viewer) { state.query = viewer }, MSET_OPENMOBILEGOTO (state, viewer) { state.openmobileGoTo = viewer }, MSET_OPENMOBILEPANORAMA (state, viewer) { state.openmobilePanorama = viewer }, MSET_MOBILEWINDOWSHIDEFIXED (state, viewer) { // 固定窗口 state.MobileWindowChangeDataFixed = !state.MobileWindowChangeDataFixed state.MobileWindowsHideFixed = viewer }, // 默认位置 MSET_MORENWEIZHI (state, data) { state.startPointFn = data }, // // 开关飞入点图标 // MSET_OPENPOINTEL(state, val) { // if (val) { // state.pointLayerData.img = state.pointLayerData.checked // state[state.pointLayerData.layer].show = true // } else { // state.pointLayerData.img = state.pointLayerData.normal // state[state.pointLayerData.layer].show = false // } // }, // 送入移动端缩放范围 set_zoomRange (state, data) { state.zoomRange = data }, // 送入默认弹窗高度 set_frislayertHeight (state, data) { state.frislayertHeight = data }, // 切换2D和2.5D MSET_DIMENSION (state, data) { // 关闭弹窗 // 3d,2.5d转换事件 state.dimension = data if (data == '3D') { // 改数据为3d数据 state.dimensionData = { // 维度镜头数据 heading: 0, pitch: -45, roll: 0 } // 加载底图 state.vecLayer = state.mviewer.imageryLayers.addImageryProvider( new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ url: ' http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36', type: 'wmts', layer: 'vec', style: 'default', format: 'tiles', tileMatrixSetID: 'w', show: true, maximumLevel: 18 }) ) state.cvaLayer = state.mviewer.imageryLayers.addImageryProvider( new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ url: ' http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36', type: 'wmts', layer: 'cva', style: 'default', format: 'tiles', tileMatrixSetID: 'w', show: true, maximumLevel: 18 }) ) // console.log(1321) state.wallLayer.show = false // 关闭瀑布 以及2.5d图形贴片 state.mviewer.imageryLayers.remove(state.newLayer) state.newLayer = null // state.silhouetteBlue.selected = [] // state.tilesetLayer.changesilhouetteBlue(); //清空silhouetteBlue.selected = []; // console.log(state.tileset) state.tilesetLayer.show = true // 显示3d图形 state.startPointFn() // 移动默认视角 // state.mviewer.flyTo(state.tileset); state.areaLayer.show = false // 绿布 // 3D视角不限制 state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 80 // 最大 state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 4000000 // 设置相机缩小时的速率 state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 10000 // 设置相机放大时的速率 state.mviewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000 // 视角平移 state.mviewer.scene.screenSpaceCameraController.enableRotate = true // 视角缩放 state.mviewer.scene.screenSpaceCameraController.enableZoom = true // 视角旋转 state.mviewer.scene.screenSpaceCameraController.enableTilt = true } else if (data == '2.5D') { state.dimensionData = { // 维度镜头数据 heading: 0, pitch: -90, roll: 0 // heading: global.DC.Namespace.Cesium.Math.toRadians(-9), // pitch: global.DC.Namespace.Cesium.Math.toRadians(-34.54), // roll: 0, } // 取消3D底图 // state.mviewer.imageryLayers.remove(state.vecLayer); // state.vecLayer = null; // state.mviewer.imageryLayers.remove(state.cvaLayer); // state.cvaLayer = null; // 加载底图 state.vecLayer = state.mviewer.imageryLayers.addImageryProvider( new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9ae78c51a0a28f06444d541148496e36', subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], format: 'image/jpeg', show: true, maximumLevel: 18 }) ) state.cvaLayer = state.mviewer.imageryLayers.addImageryProvider( new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=9ae78c51a0a28f06444d541148496e36', subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], format: 'image/jpeg', show: true, maximumLevel: 18 }) ) state.tilesetLayer.show = false // 隐藏3d图形 state.newLayer = state.usetowpointfive() // 添加2.5d图形贴片 state.wallLayer.show = false // 打开瀑布 state.startPointFn() // 移动默认视角 state.areaLayer.show = true // 绿布 // 2.5D视角限制 state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = state.zoomRange[0] // 最大 state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = state.zoomRange[1] // 设置相机缩小时的速率 state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 2000 // 设置相机放大时的速率 state.mviewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000 // 视角平移 state.mviewer.scene.screenSpaceCameraController.enableRotate = true // 视角缩放 state.mviewer.scene.screenSpaceCameraController.enableZoom = true // 视角旋转 state.mviewer.scene.screenSpaceCameraController.enableTilt = false } }, // 绿布 MSET_areaLayer (state, data) { state.areaLayer = data }, // 切换控制 MSET_PERSPECTIVECONTROL (state, data) { state.perspectiveControl = data state.perspectiveControls = !state.perspectiveControls }, MSET_MODEOLS (state, data) { state.tilesetLayer = data.tilesetLayer state.newLayer = data.newLayer state.wallLayer = data.wallLayer 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 } }, removerPolyLineIcon (state) { if (state.drawALineLayerIcon) { state.drawALineLayerIcon.remove() state.drawALineLayerIcon = null } }, removePolylineMany (state) { if (state.drawALineLayerMany) { state.drawALineLayerMany.remove() state.drawALineLayerMany = null state.isOpenDrawALineMany = false } if (state.drawAPointLayerMany) { state.drawAPointLayerMany.remove() state.drawAPointLayerMany = null state.isOpenDrawALineMany = false } }, // 显影线路或者点 showLineOrPoint (state, val) { state[val.layer].show = val.flag }, // 传送终点数据 set_endPosition (state, data) { state.isendPosition = !state.isendPosition state.endPosition = data }, // 传送当前选择的路径 set_choiceRouterS (state, data) { state.choiceRouterS = data }, // 活动窗口是否显示 set_showActivity (state, data) { state.showActivity = data if (data.state) { state.showActivityData = data.value state.showActivity = data.state } else { state.showActivityData = {} state.showActivity = data.state } }, mset_changeSelect (state, data) { state.select.overlay = data[0] state.select.color = data[1] }, SET_SeeAndNotSee (state, data) { state.seeRight = data } }, actions: { ...urlParameter.actions, // url参数 MSET_CREADE ({ state, commit, dispatch }) { state.pointLayer = new global.DC.VectorLayer('pointLayer') // 创建图标实体类 state.mviewer.addLayer(state.pointLayer) // 添加到地图 }, setMobileWindows ({ state, commit, dispatch }, data) { // 打开随地图移动窗口 let clas, Flys const nowHeight = Math.ceil( state.mviewer.camera.positionCartographic.height ) // 传递响应数据 commit('MSET_QUERY', data) // console.log(data); if (state.dimension == '3D') { Flys = [ +data.lntLat[0] + 0.01197, // +data.lntLat[1] - 0.0001, +data.lntLat[1] - 0.0027, 330 ] clas = [ data.from == 'PopupOurOnce' ? +data.lntLat[0] : +data.lntLat[0], // data.from == 'PopupOurOnce' ? +data.lntLat[1] - 0.00108 : +data.lntLat[1], data.from == 'PopupOurOnce' ? +data.lntLat[1] - 0.00108 : +data.lntLat[1] - 0.00048, data.from == 'PopupOurOnce' ? 0 : 30.648862227 ] } else if (state.dimension == '2.5D') { Flys = [ +data.lntLat[0] + 0.01197, +data.lntLat[1] + 0.00048, // +data.lntLat[1] - 0.0022, // nowHeight, state.frislayertHeight ] // console.log(nowHeight); clas = [ data.from == 'PopupOurOnce' ? +data.lntLat[0] : +data.lntLat[0], data.from == 'PopupOurOnce' ? +data.lntLat[1] : +data.lntLat[1], // data.from == 'PopupOurOnce' ? +data.lntLat[1] - 0.00108 : +data.lntLat[1] - 0.00048, // data.from == 'PopupOurOnce' ? 0 : 90.648862227 data.from == 'PopupOurOnce' ? 0 : 0 ] } if (data.useJWD) { var ellipsoid = state.mviewer.scene.globe.ellipsoid var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees( // data.lntLat[0], // data.lntLat[1] - 0.00048,//数值增大是下 // "90.648862227" // clnt, clat, calt ...clas ) data.position = ellipsoid.cartographicToCartesian(cartographic) } // 定制化窗体 const popupsDom = new global.DC.mobileDivForms(state.mviewer, { domId: 'mobilePopup', title: data.query.name || '成教楼 ', className: 'mobilePopup', content: document.getElementById('mobile-map_content_content'), position: [data.position] }) // commit("MSET_MOBILEWINDOWSHIDE", false)//显示弹窗 // dispatch("CHANGETOC3", { // 转换坐标 // lnt: data.lntLat[0], // lat: data.lntLat[1] // }).then(res => { // console.log(res) // 基于高度基础设置 // h:1530 // lnt: + 0.01187 x轴 大是向左 // Lat: - 0.0108 y轴 减是上 // h:4000 // lnt: + 0.01187 x轴 // Lat: - 0.0308 y轴 // h:330 // lnt: + 0.01197 x轴 // Lat: - 0.0021 y轴 // console.log(data.query.from, 78) // let Flys = [ // data.query.from == "地图点击" ? +data.lntLat[0] + 0.01197 : +data.lntLat[0] + 0.01197, // data.query.from == "地图点击" ? +data.lntLat[1] - 0.0021 : +data.lntLat[1] - 0.0021, // data.query.from == "地图点击" ? 330 : 330, // ] const Position = new global.DC.Position( // 转坐标 // +data.lntLat[0] + 0.01197, // +data.lntLat[1] - 0.0021, // 330, ...Flys, 0, state.dimensionData.pitch ) if (!state.MobileWindowsHide) { // 关闭弹窗 commit('MSET_MOBILEWINDOWSHIDE', true) } if ( state.select.overlay != undefined && data.query.fromTo != 'mapClick' ) { // 关闭绿色边框 state.select.overlay.setStyle({ material: state.select.color, outline: false }) commit('mset_changeSelect', [undefined, undefined]) } // console.log(state.dimension); if (state.dimension != '2.5D') { // if (true) { // if (true) { dispatch('mapFlyTo', { // 飞入 lntLat: [Position.lng, Position.lat, Position.alt], heading: Position.heading, pitch: Position.pitch, roll: Position.roll }) } else { dispatch('mapFlyTo', { // 飞入 lntLat: [Position.lng, +Position.lat - 0.0003, Position.alt], heading: Position.heading, pitch: Position.pitch, roll: Position.roll }) // state.mviewer.camera.setView({ // // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 // // fromDegrees()方法,将经纬度和高程转换为世界坐标 // destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees( // // 114.0351, // // 27.6314, // // 200.0 // Position.lng - 0.012, // Position.lat - 0.0003, // Position.alt || 15000.0 // ), // orientation: { // heading: global.DC.Namespace.Cesium.Math.toRadians( // Position.heading // ), // pitch: global.DC.Namespace.Cesium.Math.toRadians(Position.pitch), // // heading: data.heading, // // pitch: data.pitch, // roll: Position.roll, // }, // }); // commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗 } // }) commit('MSET_POPUPDOM', popupsDom) }, closeMobileWindowsDom ({ state, commit, dispatch }) { commit('CLOSE_NOWPOSITION') // 中断定位获取 if (!state.MobileWindowsHide && state.popupsDom) { state.popupsDom.closeOur() commit('MSET_MOBILEWINDOWSHIDE', true) if (state.audioData) { dispatch('MSET_GETAUDIOBEGIN', 'notOpen') } } // cancel }, CHANGETOC3 ({ state, commit }, data) { // //转换经纬度坐标 成世界坐标cartesian3 var ellipsoid = state.mviewer.scene.globe.ellipsoid var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees( data.lnt, data.lat - 0.00006, data.alt || '90.648862227' ) var position = ellipsoid.cartographicToCartesian(cartographic) return position }, SET_OPENWIDOWFIXED ({ state, commit }, data) { // 传递响应数据 commit('MSET_QUERY', data) // 显示窗口 commit('MSET_MOBILEWINDOWSHIDEFIXED', false) // 移动地图位置 state.mviewer.zoomToPosition( new global.DC.Position( data.lntLat[0], data.lntLat[1] - 0.012, 1530, 0, -45 ) ) }, CLOSE_WIDOWFIXED ({ state, commit }) { // 隐藏窗口 if (!state.MobileWindowsHideFixed) { commit('MSET_MOBILEWINDOWSHIDEFIXED', true) } }, // 加入当时的选点 JOIN_POINT ({ state, commit }, data) { }, // flyTo mapFlyTo ({ state, commit, dispatch }, data) { state.mviewer.camera.flyTo({ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( data.lntLat[0] - 0.012, data.lntLat[1], data.lntLat[2] || 15000.0 ), // destination: data.res, orientation: { heading: global.DC.Namespace.Cesium.Math.toRadians(data.heading), pitch: global.DC.Namespace.Cesium.Math.toRadians(data.pitch), // heading: data.heading, // pitch: data.pitch, roll: data.roll }, duration: 1, // 定位的时间间隔 complete: () => { // 完成后的回调 if (data.fn) { // 自定义回调 setTimeout(() => { data.fn() }, 200) } if (!data.noOpen) { setTimeout(() => { // dispatch("MSET_POINTDATA", data.lntLat);//传入标记点 !state.MobileWindowsHide || commit('MSET_MOBILEWINDOWSHIDE', false) // 显示弹窗 }, 100) } } }) // 官网flyto使用方法 // 1. Fly to a position with a top-down view // viewer.camera.flyTo({ // destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0) // }); // // 2. Fly to a Rectangle with a top-down view // viewer.camera.flyTo({ // destination : Cesium.Rectangle.fromDegrees(west, south, east, north) // }); // // 3. Fly to a position with an orientation using unit vectors. // viewer.camera.flyTo({ // destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0), // orientation : { // direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734), // up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339) // } // }); // // 4. Fly to a position with an orientation using heading, pitch and roll. // viewer.camera.flyTo({ // destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0), // orientation : { // heading : Cesium.Math.toRadians(175.0), // pitch : Cesium.Math.toRadians(-35.0), // roll : 0.0 // } // }); }, // 飞入点加入位置 MSET_POINTDATA ({ state, commit, dispatch }, data) { // 加入坐标 const positions = new global.DC.Position( data[0] - 0.0119, data[1] + 0.0111, 0 ) const billboard = new global.DC.Billboard( positions, '/img/leftnav/map-panorama.png' ) billboard.size = [16, 16] // 订阅事件3 billboard.on(global.DC.MouseEventType.CLICK, (e) => { // 定制化窗体 const query = { name: '选择点' } const intLat = [e.wgs84Position.lng, e.wgs84Position.lat] const d = { position: null, lntLat: intLat, query: { ...(query || {}), introduce: null, address: intLat }, useJWD: true // 仅使用经纬度 } dispatch('setMobileWindows', d) }) state.pointLayer.addOverlay(billboard) // 实景 // commit("MSET_OPENPOINTEL", true); }, MSET_LOCKPERSPECTIVEL ({ state, commit, dispatch }, val) { // 锁定 state.mviewer.camera.lookAtTransform( global.DC.Namespace.Cesium.Matrix4.IDENTITY ) // console.log(global.DC.Namespace.Cesium.Matrix4.IDENTITY) }, MSET_DIMENSIONS ({ state, commit, dispatch }, val) { // 关闭弹窗 dispatch('closeMobileWindowsDom') // 3d,2.5d转换事件 commit('MSET_DIMENSION', val) // 控制高度 const height = Math.ceil( state.mviewer.camera.positionCartographic.height ) state.mviewer.camera.setView({ destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( state.mviewer.camera.positionCartographic.longitude, state.mviewer.camera.positionCartographic.latitude, height ), orientation: { heading: global.DC.Namespace.Cesium.Math.toRadians( state.dimensionData.heading ), // 方向 pitch: global.DC.Namespace.Cesium.Math.toRadians( state.dimensionData.pitch ), // 倾斜角度 roll: state.dimensionData.roll } }) }, MSET_GOTOCC ({ state, commit, dispatch }, val) { // 测试移动位置 // commit("MSET_DIMENSION", val); // 控制高度 // const height = Math.ceil(state.mviewer.camera.positionCartographic.height); state.mviewer.camera.setView({ destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( state.mviewer.camera.positionCartographic.longitude, state.mviewer.camera.positionCartographic.latitude, val.height ), orientation: { heading: global.DC.Namespace.Cesium.Math.toRadians(val.heading), // 方向 pitch: global.DC.Namespace.Cesium.Math.toRadians(val.pitch), // 倾斜角度 roll: val.roll } }) }, // 文字转语音控制↓ MSET_GETAUDIO ({ state, commit, dispatch }, val) { state.audioData = new window.SpeechSynthesisUtterance() state.audioData.text = val state.audioData.onstart = function (e) { state.audioState = true } state.audioData.onend = function (event) { state.audioState = false } }, MSET_GETAUDIOBEGIN ({ state, commit, dispatch }, val) { if (state.audioState) { window.speechSynthesis.cancel() state.audioState = false } else { if (val != 'notOpen') { window.speechSynthesis.speak(state.audioData) } } }, // 文字转语音控制↑ // 导航系统↓ 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 const GCJ02StartLngLat = global.DC.CoordTransform.WGS84ToGCJ02( Number(state.navigationStartLngLat[0]), Number(state.navigationStartLngLat[1]) ) const GCJ02EndLngLat = global.DC.CoordTransform.WGS84ToGCJ02( Number(state.navigationEndLngLat[0]), Number(state.navigationEndLngLat[1]) ) // 获取路径,使用的是高德API let url = 'https://restapi.amap.com/v3/direction/walking' // 默认api步行 const 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); }) // } const drawALine = (pathsour) => { const paths = pathsour.steps const 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类型的经纬度 const polylineArr = polyline.split(';') // 转为数组 const polylineArrLength = polylineArr.length // 获取长度,避免多次重复读取polylineArr.length for (let k = 0; k < polylineArrLength; k++) { const inPolylineArr = polylineArr[k].split(',') // 转经纬度为单独的数组 const 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) { const dataS = { // 返回数据 titles: titles, Str: Str } // console.log(Str); state.routerS.push(dataS) return val.fn(dataS) } else { dispatch('MSET_DRAWALINELAYER', Str) // 绘画线路 } } }, // 导航系统↑ // 绘画线路 MSET_DRAWALINELAYER ({ state, commit, dispatch }, value) { const Str = value[0] // 检查是否存在路线 commit('removePolyline') commit('removePolylineMany') const color = global.DC.Namespace.Cesium.Color.fromCssColorString('#409EFF') const material = new global.DC.PolylineTrailMaterialProperty({ color: color, speed: 10 }) state.drawALineLayer = new global.DC.VectorLayer('lineLayer') state.mviewer.addLayer(state.drawALineLayer) // 如果是添加 给第一个点加入图标 和事件 if (value[1]) { commit('removerPolyLineIcon') state.drawALineLayerIcon = new global.DC.VectorLayer('pointLayer') state.mviewer.addLayer(state.drawALineLayerIcon) const useStr = Str.split(';') const post = useStr[useStr.length - 1].split(',') const position = new global.DC.Position(post[0], post[1]) const billboard = new global.DC.Billboard( position, 'img/dingwei/dingwei1.png' ) // 加入绘画点 billboard.setStyle({ pixelOffset: { x: 0, y: -17 } // 偏移像素 }) // 订阅事件 billboard.on(global.DC.MouseEventType.CLICK, (e) => { // console.log(e); // return; // 定制化窗体 const position = e.position const lntLat = [e.overlay._position._lng, e.overlay._position._lat] const windowData = { position, lntLat, query: { ...(value[1] || {}), position, lntLat, notAddGoOn: 'notAddGoOn' }, useJWD: true // 仅使用经纬度 } dispatch('setMobileWindows', windowData) }) state.drawALineLayerIcon.addOverlay(billboard) } const polyline = new global.DC.Polyline(Str) // 加入线 polyline.setStyle({ width: 3, material: material, clampToGround: true }) state.drawALineLayer.addOverlay(polyline) state.isOpenDrawALine = true // commit("cameraSetView", state.navigationStartLngLat); //移动 }, // 绘画线路活动多条 MSET_DRAWALINELAYERMANY ({ state, commit, dispatch }, value) { // 检查是否存在路线 commit('removePolylineMany') commit('removePolyline') commit('removerPolyLineIcon') const Strs = value[0] const red = global.DC.Namespace.Cesium.Color.fromCssColorString('#FF0000') const white = global.DC.Namespace.Cesium.Color.fromCssColorString('#fff') const blue = global.DC.Namespace.Cesium.Color.fromCssColorString('#2196F3') const material = new global.DC.PolylineTrailMaterialProperty({ color: red, speed: 10 }) const material1 = new global.DC.PolylineImageTrailMaterialProperty({ color: red, speed: 60, image: 'img/icon/right.png', repeat: { x: 320, y: 1 } }) const drawALineLayerMany = new global.DC.VectorLayer('manyLinePointLayer') state.mviewer.addLayer(drawALineLayerMany) const drawAPointLayerMany = new global.DC.HtmlLayer('manyPointPointLayer') state.mviewer.addLayer(drawAPointLayerMany) // 多条线 for (const k in Strs) { const polyline = new global.DC.Polyline(Strs[k].value) // 加入绘画点 polyline.setStyle({ width: 6, material: material1, clampToGround: true }) drawALineLayerMany.addOverlay(polyline) // let post = Strs[k].value.split(";")[0].split(","); // let position = new global.DC.Position(post[0], post[1]); // let Label = new global.DC.Label(position, Strs[k].name); // Label.setStyle({ // font: "16px sans-serif", // CSS 字体设置 // scale: 1, //比例 // fillColor: white, //文字颜色 // showBackground: true, //是否显示背景 // backgroundColor: blue, //背景颜色 // // outlineColor: white, //边框颜色 // // outlineWidth: 10, //边框大小, // }); // drawALineLayerMany.addOverlay(Label); } // 多个点 const point = value[1] for (const k in point) { const post = point[k].value const position = new global.DC.Position(post[0], post[1]) // let billboard = new global.DC.Billboard( // position, // // "img/dingwei/dingwei1.png" // "img/icon/activity.png" // ); //加入绘画点 // billboard.setStyle({ // pixelOffset: { x: 0, y: -17 }, //偏移像素 // }); // //订阅事件 // billboard.on(global.DC.MouseEventType.CLICK, (e) => { // // console.log(e); // // return; // // 定制化窗体 // let position = e.position, // lntLat = [e.overlay._position._lng, e.overlay._position._lat]; // let windowData = { // position, // lntLat, // query: { // ...(value[2] || {}), // position, // lntLat, // notAddGoOn: "notAddGoOn", // }, // useJWD: true, //仅使用经纬度 // }; // dispatch("setMobileWindows", windowData); // }); // drawALineLayerMany.addOverlay(billboard); // let Labels = new global.DC.Label(position, point[k].name); // Labels.setStyle({ // font: "16px sans-serif", // CSS 字体设置 // scale: 1, //比例 // fillColor: white, //文字颜色 // showBackground: true, //是否显示背景 // backgroundColor: blue, //背景颜色 // // outlineColor: white, //边框颜色 // // outlineWidth: 1, //边框大小, // pixelOffset: { x: 0, y: -47 }, //偏移像素 // }); const Labels = new global.DC.DivIcon( // new this.DC.Position(Number(item[0]), Number(item[1]), 0), position, `
${point[k].name}
` ) // 订阅事件 Labels.on(global.DC.MouseEventType.CLICK, (e) => { // console.log(e); // return; if (value[3]) { value[3]() } // 定制化窗体 const position = e.position const lntLat = [e.overlay._position._lng, e.overlay._position._lat] const windowData = { position, lntLat, query: { ...(value[2] || {}), position, lntLat }, useJWD: true // 仅使用经纬度 } dispatch('setMobileWindows', windowData) }) drawAPointLayerMany.addOverlay(Labels) // console.log(point[k]); } state.drawALineLayerMany = drawALineLayerMany state.drawAPointLayerMany = drawAPointLayerMany // state.isOpenDrawALineMany = value[2].name ? value[2].name : true; // commit("cameraSetView", state.navigationStartLngLat); //移动 } } } export default mobile