import Vue from 'vue'
|
import Vuex from 'vuex'
|
import axios from 'axios'
|
Vue.use(Vuex)
|
|
export default new Vuex.Store({
|
// state里面就是存放项目中需要多组件共享的状态
|
state: {
|
count: 0,
|
data: null,
|
vudideoUrl: '',
|
videoName: '',
|
videoId: null,
|
showVideoFlag: false,
|
showVideourl: null,
|
billboards: [],
|
ShowPanoramicFlag: false,
|
flagID: null,
|
index: -1,
|
poiFlag: null,
|
mainUrl: null,
|
poiStatus: 1, // 1-显示3DPOI,2-显示2DPOI,3-隐藏所有
|
_3ds: [],
|
_2ds: [],
|
xOffset: -0.0032850793719939,
|
yOffset: 0.0278651231623049,
|
// 坐标转换
|
transform: function (x, y) {
|
//console.log(this.xOffset, this.yOffset)
|
//return map.transformWGS84ToLocal(x + this.xOffset, y + this.yOffset)
|
return map.transformWGS84ToLocal((x - 26.897633220927) * 1.3, (y - 9.16663529527973) * 1.3)
|
},
|
// 创建3DPOI
|
create3DPOI: function (data, startIdx, isHighlight) {
|
let points = [];
|
for (let i = 0, c = data.length; i < c; i++) {
|
let p = this.transform(data[i].longitude, data[i].latitude);
|
points.push({
|
index: i + startIdx,
|
id: data[i].channelId,
|
x: p.x,
|
y: p.y,
|
z: 1500,
|
//image: this.mainUrl + (isHighlight ? 'UE/img/1.png' : 'UE/img/2.png'),
|
image: (isHighlight ? 'UE/img/1.png' : 'UE/img/2.png'),
|
text: '',
|
scale: 20,
|
clickedScale: 20,
|
visibility: true,
|
flash: false,
|
canClick: true,
|
channelId: data[i].channelId
|
});
|
}
|
return map.create3DBillboard(points);
|
},
|
// 创建2DPOI
|
create2DPOI: function (d, idx, isHighlight) {
|
let p = this.transform(d.longitude, d.latitude);
|
return map.createBillboard({
|
index: idx,
|
id: d.channelId,
|
x: p.x,
|
y: p.y,
|
z: p.z,
|
//image: this.mainUrl + (isHighlight ? 'UE/img/1.png' : 'UE/img/2.png'),
|
image: (isHighlight ? 'UE/img/1.png' : 'UE/img/2.png'),
|
text: "",
|
scale: 0.2,
|
channelId: d.channelId,
|
clickedScale: 0.2,
|
flash: false,
|
canClick: true,
|
alertWindow: null
|
});
|
},
|
// 获取显示状态
|
getVisibleStatus: function () {
|
let dis = map.camera.distance;
|
if (dis > 500000) return 3;
|
|
if (dis > 100000) return 2;
|
|
return 1;
|
}
|
},
|
// mutations就是存放更改state里状态的方法
|
mutations: {
|
// 添加视频点 *
|
addVideos (state, data) {
|
//debugger
|
this.commit('removeBillboards');
|
this.commit('pretreat', data);
|
this.commit('add3DPOI');
|
this.commit('add2DPOI');
|
this.commit('setPOIVisible');
|
//this.commit('flyToData');
|
},
|
// 清除
|
removeBillboards (state) {
|
map.removeCluster();
|
map.clearAllCovering();
|
state._3ds.length = 0;
|
state._2ds.length = 0;
|
state.index = -1;
|
},
|
// 预处理
|
pretreat: function (state, data) {
|
state.data = [];
|
for (let i = 0, c = data.length; i < c; i++) {
|
let d = data[i];
|
if (!d.longitude || isNaN(d.longitude) || !d.latitude || isNaN(d.latitude) || !d.channelStatus) continue;
|
|
d.longitude = parseFloat(d.longitude)
|
d.latitude = parseFloat(d.latitude)
|
state.data.push(d)
|
}
|
},
|
// 添加三维POI
|
add3DPOI (state) {
|
for (let i = 0, c = Math.ceil(state.data.length / 10); i < c; i++) {
|
let points = state.data.slice(i * 10, (i + 1) * 10);
|
let arr = state.create3DPOI(points, i * 10, false);
|
|
state._3ds = state._3ds.concat(arr);
|
}
|
},
|
// 添加二维POI
|
add2DPOI (state) {
|
for (let i = 0, c = state.data.length; i < c; i++) {
|
let poi = state.create2DPOI(state.data[i], i, false);
|
state._2ds.push(poi);
|
}
|
},
|
// 设置POI显示
|
setPOIVisible (state) {
|
state.poiStatus = state.getVisibleStatus();
|
|
let arr = state.poiStatus === 1 ? state._2ds : state._3ds;
|
arr.forEach(function (b) {
|
b.show(false);
|
});
|
|
if (state.poiStatus === 2) map.createCluster({ interval: 500000, size: 10 });
|
},
|
// 飞向数据
|
flyToData (state) {
|
/*var minX = 180, minY = 90, maxX = 0, maxY = 0;
|
for (var i = 0, c = state.data.length; i < c; i++) {
|
let x = state.data[i].longitude, y = state.data[i].latitude;
|
|
if (x > maxX) maxX = x;
|
if (y > maxY) maxY = y;
|
if (x < minX) minX = x;
|
if (y < minY) minY = y;
|
}
|
|
var cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
|
var p = state.transform(cx, cy);
|
|
//map.flyTo(p.x, p.y, 0, 0, -42, 0, 50000, null, 3);
|
map.focusOn(new TUVector3(p.x, p.y, 0), new TURotator(0, -42, 0));*/
|
// setTimeout(function () {
|
// map.focusOn(new TUVector3(p.x, p.y, 0), new TURotator(0, -42, 20));
|
// }, 1500);
|
|
let x = state.data[0].longitude, y = state.data[0].latitude;
|
var p = state.transform(x, y);
|
map.focusOn(new TUVector3(p.x, p.y, 0), new TURotator(0, -42, 0));
|
//map.setView(p.x, p.y, 0, 0, -42, 0, 6000);
|
},
|
// 切换视频点 *
|
changeVideo (state, index) {
|
let status = state.getVisibleStatus();
|
if (state.index != -1) {
|
this.commit('change3DPOI', { idx: state.index, flag: false, status: status });
|
this.commit('change2DPOI', { idx: state.index, flag: false, status: status });
|
}
|
|
this.commit('change3DPOI', { idx: index, flag: true, status: status });
|
this.commit('change2DPOI', { idx: index, flag: true, status: status });
|
state.index = index;
|
},
|
// 切换3DPOI
|
change3DPOI (state, rs) {
|
let d = state.data[rs.idx];
|
let poi = state.create3DPOI([d], rs.idx, rs.flag)[0];
|
|
state._3ds[rs.idx].removeFromMap();
|
state._3ds.splice(rs.idx, 1, poi);
|
|
if (rs.status !== 1) poi.show(false);
|
},
|
// 切换2DPOI
|
change2DPOI (state, rs) {
|
let d = state.data[rs.idx];
|
let poi = state.create2DPOI(d, rs.idx, rs.flag);
|
|
state._2ds[rs.idx].removeFromMap();
|
state._2ds.splice(rs.idx, 1, poi);
|
|
if (rs.status !== 2) poi.show(false);
|
},
|
// 切换POI显示状态 *
|
changePOIVisible (state, status) {
|
state.poiStatus = status;
|
if (status !== 2) map.removeCluster();
|
|
state._2ds.forEach(function (b) {
|
b.show(status === 2);
|
});
|
|
state._3ds.forEach(function (a) {
|
a.show(status === 1);
|
});
|
|
if (status === 2) map.createCluster({ interval: 500000, size: 10 });
|
},
|
// 切换图片
|
changeImg: function (state, rs) {
|
if (state.index != -1) {
|
let status = state.getVisibleStatus();
|
this.commit('change3DPOI', { idx: state.index, flag: false, status: status });
|
this.commit('change2DPOI', { idx: state.index, flag: false, status: status });
|
state.index = -1;
|
}
|
}
|
},
|
// actions就是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。
|
//actions不能直接修改state里的值必须通过触发某个mutation才行
|
actions: {
|
addAsync (context, step) {
|
// 异步操作mutations里的方法
|
setTimeout(() => {
|
context.commit('addN', step)
|
}, 1000)
|
},
|
subAsync (context, step) {
|
// 异步操作mutations里的方法
|
setTimeout(() => {
|
context.commit('subN', step)
|
}, 1000)
|
}
|
},
|
//相当于计算属性不会修改state里本身的值
|
getters: {
|
showNum (state) {
|
return `2`
|
}
|
}
|
});
|
