From a3fadb577e4d18c1d7ff60e23be4f3d27f63b9a3 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 17 Jan 2022 17:07:52 +0800
Subject: [PATCH] +
---
src/store/modules/mobile.js | 279 ++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 242 insertions(+), 37 deletions(-)
diff --git a/src/store/modules/mobile.js b/src/store/modules/mobile.js
index 4bc5d08..d747e5a 100644
--- a/src/store/modules/mobile.js
+++ b/src/store/modules/mobile.js
@@ -56,9 +56,16 @@
navigationStartLngLat: "", //导航起点
navigationEndLngLat: "", //导航终点
drawALineLayer: null, //导航路径图层
+ drawALineLayerIcon: null, //导航路径图层图标
isOpenDrawALine: false, //是否开启路径
endPosition: "", //传送终点经纬度--
isendPosition: false, //传送终点经纬度--感应数据
+ routerS: [], //所有路径
+ choiceRouterS: 0, //当前选择路径
+ showActivity: false, //是否显示活动弹窗
+
+ drawALineLayerMany: null, //活动路线图层
+ isOpenDrawALineMany: null, //是否开启活动
},
mutations: {
MSET_VIEWER(state, viewer) {
@@ -264,10 +271,31 @@
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;
+ }
+ },
//传送终点数据
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;
},
},
actions: {
@@ -281,7 +309,7 @@
const nowHeight = Math.ceil(
state.mviewer.camera.positionCartographic.height
);
- console.log(data);
+ // console.log(data);
if (state.dimension == "3D") {
Flys = [
+data.lntLat[0] + 0.01197,
@@ -619,10 +647,12 @@
//文字转语音控制↑
//导航系统↓
MSET_GOTOWHERE({ state, commit, dispatch }, val) {
+ state.routerS = []; //清空存着的路径
+ //单条步行
//本地图使用的是WGS84坐标，而高德使用的是火星坐标GCJ02，所以需要转换参数过去
// 返回值需要转换为WGS84坐标
- state.navigationStartLngLat = [+val[0][0], +val[0][1]]; //导航起点
- state.navigationEndLngLat = [+val[1][0], +val[1][1]]; //导航终点
+ 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]),
@@ -633,26 +663,45 @@
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("https://restapi.amap.com/v3/direction/walking", {
- params: {
- 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",
- },
+ .get(url, {
+ params: { ...data },
})
.then((res) => {
//回调
- const paths = res.data.route.paths[0].steps;
- drawALine(paths);
+ 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 = (paths) => {
+ // }
+ 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++) {
@@ -675,28 +724,184 @@
Str += ";";
}
Str += state.navigationEndLngLat.join(","); //加入终点
- drawALineLayer(Str); //绘画线路
- };
-
- //绘画线路
- let drawALineLayer = (Str) => {
- //检查是否存在路线
- commit("removePolyline");
- let drawALineLayer = new global.DC.VectorLayer("layer");
- state.mviewer.addLayer(drawALineLayer);
- let polyline = new global.DC.Polyline(Str); //加入绘画点
- polyline.setStyle({
- width: 3,
- material: DC.Color.RED,
- clampToGround: true,
- });
- drawALineLayer.addOverlay(polyline);
- state.drawALineLayer = drawALineLayer;
- state.isOpenDrawALine = true;
- commit("cameraSetView", state.navigationStartLngLat); //移动
+ if (val.fn) {
+ let 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) {
+ let Str = value[0];
+ //检查是否存在路线
+ commit("removePolyline");
+ commit("removePolylineMany");
+ let color =
+ global.DC.Namespace.Cesium.Color.fromCssColorString("#409EFF");
+ let 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);
+ let post = Str.split(";")[0].split(",");
+ let position = new global.DC.Position(post[0], post[1]);
+ let 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;
+ // 定制化窗体
+ let position = e.position,
+ lntLat = [e.overlay._position._lng, e.overlay._position._lat];
+ let windowData = {
+ position,
+ lntLat,
+ query: { ...(value[1] || {}), position, lntLat },
+ useJWD: true, //仅使用经纬度
+ };
+ dispatch("setMobileWindows", windowData);
+ });
+ state.drawALineLayerIcon.addOverlay(billboard);
+ }
+ let 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");
+ let Strs = value[0];
+ let red = global.DC.Namespace.Cesium.Color.fromCssColorString("#FF0000");
+ let white = global.DC.Namespace.Cesium.Color.fromCssColorString("#fff");
+ let blue = global.DC.Namespace.Cesium.Color.fromCssColorString("#2196F3");
+ let material = new global.DC.PolylineTrailMaterialProperty({
+ color: red,
+ speed: 10,
+ });
+ let material1 = new global.DC.PolylineImageTrailMaterialProperty({
+ color: global.DC.Color(255, 0, 0),
+ speed: 60,
+ image: "img/icon/right.png",
+ repeat: { x: 320, y: 1 },
+ });
+ let drawALineLayerMany = new global.DC.VectorLayer("manyLinePointLayer");
+ state.mviewer.addLayer(drawALineLayerMany);
+ //多条线
+ for (let k in Strs) {
+ let polyline = new global.DC.Polyline(Strs[k].value); //加入绘画点
+ polyline.setStyle({
+ width: 3,
+ 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);
+ }
+ //多个点
+ let point = value[1];
+ for (let k in point) {
+ let post = point[k].value;
+ let position = new global.DC.Position(post[0], post[1]);
+
+ let 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;
+ // 定制化窗体
+ let position = e.position,
+ lntLat = [e.overlay._position._lng, e.overlay._position._lat];
+ let windowData = {
+ position,
+ lntLat,
+ query: { ...(value[2] || {}), position, lntLat },
+ 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 }, //偏移像素
+ });
+ //订阅事件
+ Labels.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 },
+ useJWD: true, //仅使用经纬度
+ };
+ dispatch("setMobileWindows", windowData);
+ });
+ drawALineLayerMany.addOverlay(Labels);
+ // console.log(point[k]);
+ }
+ state.drawALineLayerMany = drawALineLayerMany;
+ state.isOpenDrawALineMany = value[2].name ? value[2].name : true;
+ // commit("cameraSetView", state.navigationStartLngLat); //移动
+ },
},
};
--
Gitblit v1.9.3