三维沙盒修改，通号VR内容隐藏
This commit is contained in:
sunzhenyu
parent
5751a6bbad
commit
857307644f
@ -9,13 +9,14 @@ import { OrbitControls } from '@/jlmap3d/main/control/OrbitControls';
|
||||
import { dataManager } from '@/jlmap3d/jl3dtrafficplan/sandbox/datamanager';
|
||||
|
||||
|
||||
import StompClient from '@/utils/sock';
|
||||
|
||||
import store from '@/store/index';
|
||||
// import { Loading } from 'element-ui';
|
||||
import {Stats} from '@/jlmap3d/main/lib/stats.min.js';
|
||||
|
||||
export function Jl3dSandBoxTest(dom,skinCode,routegroup,token) {
|
||||
export function Jl3dSandBoxTest(dom,textUi,skinCode,routegroup,token) {
|
||||
let scope = this;
|
||||
textUi.updataData("sss");
|
||||
var camera, scene, renderer,controls, light;
|
||||
|
||||
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.001, 50000 );
|
||||
@ -43,9 +44,10 @@ export function Jl3dSandBoxTest(dom,skinCode,routegroup,token) {
|
||||
|
||||
|
||||
|
||||
let manager = new dataManager(scene);
|
||||
let manager = new dataManager(scene,camera,routegroup);
|
||||
manager.init(skinCode);
|
||||
|
||||
|
||||
animate();
|
||||
//循环渲染函数
|
||||
function animate() {
|
||||
|
||||
@ -7,23 +7,102 @@ import { sectionModel } from '@/jlmap3d/jl3dtrafficplan/sandbox/sectionmodel';
|
||||
import { signalModel } from '@/jlmap3d/jl3dtrafficplan/sandbox/signalmodel';
|
||||
import { stationModel } from '@/jlmap3d/jl3dtrafficplan/sandbox/stationmodel';
|
||||
import { trainModel } from '@/jlmap3d/jl3dtrafficplan/sandbox/trainmodel';
|
||||
import { ModelManager } from '@/jlmap3d/jl3dtrafficplan/sandbox/loader';
|
||||
|
||||
export function dataManager(scene) {
|
||||
import {Materialload} from '@/jlmap3d/main/loaders/Materialload.js';
|
||||
//数据整合
|
||||
import { sandBoxConnect } from '@/jlmap3d/jl3dtrafficplan/sandbox/sandboxconnect';
|
||||
|
||||
import { textUi } from '@/jlmap3d/jl3dtrafficplan/sandbox/textUi';
|
||||
|
||||
|
||||
export function dataManager(scene,camera,routegroup) {
|
||||
let scope = this;
|
||||
|
||||
let section = new sectionModel();
|
||||
let signal = new signalModel();
|
||||
let station = new stationModel();
|
||||
let train = new trainModel();
|
||||
let section = new sectionModel(scene);
|
||||
let signal = new signalModel(scene);
|
||||
let station = new THREE.Group();
|
||||
scene.add( station );
|
||||
let train = new trainModel(scene);
|
||||
this.topCurve = "";
|
||||
this.downCurve = "";
|
||||
console.log(routegroup);
|
||||
this.nowConnect = '';
|
||||
|
||||
var detaildiv = document.createElement("div");
|
||||
detaildiv.style.width = "128px";
|
||||
detaildiv.id = "detail";
|
||||
detaildiv.style.backgroundColor = "#ccc"
|
||||
detaildiv.style.height = "256px";
|
||||
detaildiv.style.border = "1px solid #f00";
|
||||
detaildiv.style.position = "absolute";
|
||||
detaildiv.style.top = "0px";
|
||||
detaildiv.style.zIndex = 10;
|
||||
detaildiv.style.display = "none";
|
||||
document.body.appendChild(detaildiv);
|
||||
let text = new textUi(scene);
|
||||
text.init();
|
||||
|
||||
let modelmanager = new ModelManager();
|
||||
Materialload(scope);
|
||||
|
||||
this.init = function(skinCode){
|
||||
loadGeoJson().then(function(data){
|
||||
//console.log(data);
|
||||
modelmanager.loadpromise().then(function (data) {
|
||||
console.log(data);
|
||||
return loadGeoJson();
|
||||
}).then(function(data){
|
||||
console.log(data);
|
||||
return loadMapData(skinCode);
|
||||
}).then(function(data){
|
||||
scope.nowConnect = new sandBoxConnect(scope,routegroup,section,signal,station,train);
|
||||
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
||||
raycasterList.push(station);
|
||||
raycasterList.push(train.trainGroup);
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
let raycaster = new THREE.Raycaster();
|
||||
let mouse = new THREE.Vector2();
|
||||
let line,intersects,intersect;
|
||||
let raycasterList = [];
|
||||
|
||||
function onDocumentMouseMove( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
||||
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
|
||||
|
||||
raycaster.setFromCamera( mouse, camera );
|
||||
|
||||
for(let i=0;i<raycasterList.length;i++){
|
||||
intersects = raycaster.intersectObjects( raycasterList[i].children );
|
||||
if(intersects.length>0){
|
||||
i = raycasterList.length;
|
||||
}
|
||||
}
|
||||
// console.log(intersects);
|
||||
if ( intersects.length > 0 ) {
|
||||
|
||||
intersect = intersects[ 0 ];
|
||||
console.log(intersect.object.position);
|
||||
console.log(text.textplane.position);
|
||||
console.log(intersect.object.name);
|
||||
console.log(intersect.object.groupNumber);
|
||||
detaildiv.style.display = "";
|
||||
detaildiv.style.left = event.clientX-64 + "px";
|
||||
detaildiv.style.top = event.clientY-270 + "px";
|
||||
} else {
|
||||
detaildiv.style.display = "none";
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function loadMapData(skinCode){
|
||||
return new Promise(function(resolve, reject){
|
||||
|
||||
@ -35,7 +114,9 @@ export function dataManager(scene) {
|
||||
|
||||
getPublishMapDetail(skinCode).then(netdata => {
|
||||
console.log(netdata);
|
||||
section.init(netdata.sectionList,netdata.switchList);
|
||||
section.init(netdata.data.sectionList,netdata.data.switchList,stationData);
|
||||
signal.init(netdata.data.signalList,section.topData,section.downData,scope.topCurve,scope.downCurve,modelmanager.signal);
|
||||
train.init(netdata.data.trainList);
|
||||
resolve("loadMap");
|
||||
});
|
||||
});
|
||||
@ -61,36 +142,41 @@ export function dataManager(scene) {
|
||||
let stationListData = null;
|
||||
let originX = 0;
|
||||
let originY = 0;
|
||||
let double = 1000;
|
||||
let double = 10000;
|
||||
|
||||
//['成功了', 'success']
|
||||
readTextFile(JL3D_LOCAL_STATIC+"/trafficplan/fuzhou1.json", function(text){
|
||||
var data = JSON.parse(text);
|
||||
console.log(data.data.busline_list[0]);
|
||||
// console.log(data.data.busline_list[0]);
|
||||
stationListData = data.data.busline_list[0];
|
||||
let posx = stationListData.xs.split(",");
|
||||
let posz = stationListData.ys.split(",");
|
||||
|
||||
posx.reverse();
|
||||
posz.reverse();
|
||||
originX = posx[0];
|
||||
originY = posz[0];
|
||||
|
||||
let pointsTop = [];
|
||||
let pointsDown = [];
|
||||
for(let i=0;i<posx.length;i++){
|
||||
pointsTop.push(new THREE.Vector3( (posx[i] -originX)*double, 4.9, -(posz[i]-originY)*double));
|
||||
pointsDown.push(new THREE.Vector3( (posx[i] -originX+0.011)*double, 4.9, -(posz[i]-originY+0.001)*double));
|
||||
if(posx[i]<=119.390592){
|
||||
pointsTop.push(new THREE.Vector3( (posx[i] -originX)*double, 0, -(posz[i]-originY)*double));
|
||||
pointsDown.push(new THREE.Vector3( (posx[i] -originX+0.001)*double, 0, -(posz[i]-originY+0.001)*double));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var curveTop = new THREE.CatmullRomCurve3(pointsTop );
|
||||
curveTop.curveType = "chordal";
|
||||
curveTop.tension = 0.15;
|
||||
curveTop.closed = false;
|
||||
|
||||
scope.topCurve = curveTop;
|
||||
|
||||
var curveDown = new THREE.CatmullRomCurve3(pointsDown );
|
||||
curveDown.curveType = "chordal";
|
||||
curveDown.tension = 0.15;
|
||||
curveDown.closed = false;
|
||||
scope.downCurve = curveDown;
|
||||
|
||||
var extrudeSettingsTop = {
|
||||
steps : pointsTop.length*2,
|
||||
@ -110,34 +196,37 @@ export function dataManager(scene) {
|
||||
|
||||
|
||||
var shapeTop = new THREE.Shape();
|
||||
shapeTop.moveTo( 0,-0.2 );
|
||||
shapeTop.lineTo( 0,0.2 );
|
||||
shapeTop.moveTo( 0,-1 );
|
||||
shapeTop.lineTo( 0,1 );
|
||||
|
||||
var shapeDown = new THREE.Shape();
|
||||
shapeDown.moveTo( 0,-0.2 );
|
||||
shapeDown.lineTo( 0,0.2 );
|
||||
|
||||
let materialSection = new THREE.MeshPhongMaterial( { color : 0x3366ff } );
|
||||
shapeDown.moveTo( 0,-1 );
|
||||
shapeDown.lineTo( 0,1 );
|
||||
|
||||
let materialSection1 = new THREE.MeshPhongMaterial( { color : 0x3366ff } );
|
||||
let materialSection2 = new THREE.MeshPhongMaterial( { color : 0x336600 } );
|
||||
|
||||
var geometryTop = new THREE.ExtrudeBufferGeometry( shapeTop, extrudeSettingsTop );
|
||||
var curveTop = new THREE.Mesh( geometryTop,materialSection) ;
|
||||
scene.add(curveTop);
|
||||
var curveTopMesh = new THREE.Mesh( geometryTop,materialSection1) ;
|
||||
scene.add(curveTopMesh);
|
||||
|
||||
var geometryDown = new THREE.ExtrudeBufferGeometry( shapeDown, extrudeSettingsDown );
|
||||
var curveDown = new THREE.Mesh( geometryDown,materialSection) ;
|
||||
scene.add(curveDown);
|
||||
var curveDownMesh = new THREE.Mesh( geometryDown,materialSection2) ;
|
||||
scene.add(curveDownMesh);
|
||||
|
||||
for(let j=0;j<stationListData.stations.length;j++){
|
||||
|
||||
var geometry = new THREE.RingBufferGeometry( 0.5, 1, 16 );
|
||||
var geometry = new THREE.RingBufferGeometry( 5, 10, 16 );
|
||||
var material = new THREE.MeshBasicMaterial( { color: 0xff3333, side: THREE.DoubleSide } );
|
||||
var cube = new THREE.Mesh( geometry, material );
|
||||
let pos = stationListData.stations[j].xy_coords.split(";");
|
||||
cube.position.set((pos[0] -originX+0.0005)*double,5,-(pos[1]-originY+0.0005)*double);
|
||||
|
||||
cube.name = stationListData.stations[j].name;
|
||||
cube.position.set((pos[0] -originX+0.0005)*double,0.2,-(pos[1]-originY+0.0005)*double);
|
||||
cube.rotation.x = Math.PI/2;
|
||||
console.log(cube.position);
|
||||
scene.add( cube );
|
||||
// console.log(cube.position);
|
||||
station.add(cube);
|
||||
|
||||
}
|
||||
resolve("loadJson");
|
||||
|
||||
|
||||
70
src/jlmap3d/jl3dtrafficplan/sandbox/loader.js
Normal file
70
src/jlmap3d/jl3dtrafficplan/sandbox/loader.js
Normal file
@ -0,0 +1,70 @@
|
||||
import { BASE_ASSET_API } from '@/api/jlmap3d/assets3d.js';
|
||||
import store from '@/store/index';
|
||||
//模型管理器
|
||||
let mode = "0";
|
||||
export function ModelManager(){
|
||||
let scope = this;
|
||||
|
||||
scope.signal = {
|
||||
id: "1",
|
||||
name: "信号机",
|
||||
deviceType: "signal",
|
||||
type: "signal",
|
||||
url: "/MODEL/2020-07-10/13-42231.FBX",
|
||||
mesh:''
|
||||
};
|
||||
scope.train = {
|
||||
id: "2",
|
||||
name: "列车",
|
||||
deviceType: "train",
|
||||
type: "train",
|
||||
url: "/MODEL/2020-11-16/57-53841.FBX",
|
||||
mesh:''
|
||||
};
|
||||
|
||||
this.station = {
|
||||
code:null,
|
||||
screenDoorOpenStatus:"01",
|
||||
animations:null,
|
||||
mesh:null,
|
||||
action:null
|
||||
};
|
||||
this.station = {
|
||||
code:null,
|
||||
screenDoorOpenStatus:"01",
|
||||
animations:null,
|
||||
mesh:null,
|
||||
action:null
|
||||
};
|
||||
|
||||
//读取模型
|
||||
this.loadpromise = function (mixers){
|
||||
let initlist = [];
|
||||
initlist.push(fbxpromise(scope.signal));
|
||||
initlist.push(fbxpromise(scope.train));
|
||||
//promise按顺序加载
|
||||
return new Promise(function(resolve, reject){
|
||||
|
||||
Promise.all(initlist).then((result) => {
|
||||
// store.dispatch('app/animationsClose');
|
||||
resolve("success"); //['成功了', 'success']
|
||||
}).catch((error) => {
|
||||
//console.log(error);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
//fbx模型加载
|
||||
function fbxpromise(asset){
|
||||
return new Promise(function(resolve, reject){
|
||||
var loader = new THREE.FBXLoader();
|
||||
|
||||
loader.load( BASE_ASSET_API+asset.url, function ( object ) {
|
||||
asset.mesh = object;
|
||||
resolve(asset.deviceType);
|
||||
} );
|
||||
|
||||
});
|
||||
}
|
||||
@ -1,3 +1,179 @@
|
||||
export function sandBoxConnect() {
|
||||
let scope = this;
|
||||
|
||||
import StompClient from '@/utils/sock';
|
||||
import { getBaseUrl } from '@/utils/baseUrl'
|
||||
import { getToken } from '@/utils/auth';
|
||||
import store from '@/store/index';
|
||||
|
||||
// 定于仿真socket接口
|
||||
export function sandBoxConnect(manager,routegroup,section,signal,station,train ) {
|
||||
let scope = this;
|
||||
this.teststomp = new StompClient();
|
||||
let start = true;
|
||||
let topic = '/user/queue/simulation/jl3d/'+routegroup;
|
||||
let header = {'X-Token': getToken() };
|
||||
let topswitch = false;
|
||||
let downswitch = false;
|
||||
socketon(topic);
|
||||
|
||||
function socketon(topic) {
|
||||
try {
|
||||
scope.teststomp.subscribe(topic, callback, header);
|
||||
} catch (error) {
|
||||
console.error('websocket订阅失败');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.socketoff = function(topic) {
|
||||
scope.teststomp.unsubscribe(topic);
|
||||
};
|
||||
|
||||
// 仿真socket接口回调函数
|
||||
function callback(Response) {
|
||||
let data = JSON.parse(Response.body);
|
||||
|
||||
/** 站台客流当前人数信息 */
|
||||
if(data.type == "STAND_PFI"){
|
||||
|
||||
let newStandData = data.body;
|
||||
let count = 0;
|
||||
for(let j=0;j<passerStation.stationlist.length;j++){
|
||||
count = 0;
|
||||
|
||||
for(let i=0;i<newStandData.length;i++){
|
||||
|
||||
|
||||
if(passerStation.stationlist[j].topstand == newStandData[i].standCode){
|
||||
|
||||
passerStation.stationlist[j].topspeed = newStandData[i].to;
|
||||
passerStation.stationlist[j].toppassers = newStandData[i].num;
|
||||
count++;
|
||||
}
|
||||
if(passerStation.stationlist[j].downstand == newStandData[i].standCode){
|
||||
|
||||
passerStation.stationlist[j].downspeed = newStandData[i].to;
|
||||
passerStation.stationlist[j].downpassers = newStandData[i].num;
|
||||
count++;
|
||||
}
|
||||
|
||||
if(count == 2){
|
||||
i = newStandData.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
jl3d.updateNowStationData();
|
||||
|
||||
if(start){
|
||||
start = false;
|
||||
jl3d.initTrafficStart();
|
||||
}
|
||||
|
||||
// jl3d.allStationData = data.body;
|
||||
}
|
||||
|
||||
if(data.type == "TRAIN_PFI_BL"){
|
||||
|
||||
if(toptrain.nowcode == data.body.code && topswitch == true){
|
||||
|
||||
//根据上下车人数创建人
|
||||
jl3d.updateNowLeaveData("top",data.body.out);
|
||||
setTimeout(function(){
|
||||
passerAi.passerout("top","start",data.body.in)
|
||||
}, 5000);
|
||||
|
||||
}
|
||||
if(downtrain.nowcode == data.body.code && downswitch == true){
|
||||
//根据上下车人数创建人
|
||||
jl3d.updateNowLeaveData("down",data.body.out);
|
||||
setTimeout(function(){
|
||||
passerAi.passerout("down","start",data.body.in);
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(data.type == "DeviceCtrl_3D"){
|
||||
if(data.body.type == "PSD"){
|
||||
|
||||
|
||||
}
|
||||
|
||||
if(data.body.type == "TRAIN_DOOR"){
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
if(data.type == "TrainRun_3D"){
|
||||
for(let i=0;i<data.body.length;i++){
|
||||
//top
|
||||
if(data.body[i].right == 1){
|
||||
if(section.topSectionList[data.body[i].section]){
|
||||
if(train.trainlist[data.body[i].code].dispose == false){
|
||||
train.trainlist[data.body[i].code].dispose = true;
|
||||
train.trainGroup.add(train.trainlist[data.body[i].code]);
|
||||
}else{
|
||||
let realprogress = section.topSectionList[data.body[i].section].leftProgress+(section.topSectionList[data.body[i].section].rightProgress - section.topSectionList[data.body[i].section].leftProgress)*data.body[i].offset;
|
||||
train.trainlist[data.body[i].code].position.copy(manager.topCurve.getPoint(realprogress));
|
||||
|
||||
train.trainlist[data.body[i].code].up = new THREE.Vector3(1,0,0);
|
||||
let tangent = manager.topCurve.getTangentAt(realprogress).normalize();
|
||||
train.trainlist[data.body[i].code].axis.crossVectors(train.trainlist[data.body[i].code].up, tangent).normalize();
|
||||
let radians = Math.acos(train.trainlist[data.body[i].code].up.dot(tangent));
|
||||
train.trainlist[data.body[i].code].quaternion.setFromAxisAngle(train.trainlist[data.body[i].code].axis, radians);
|
||||
// console.log("/////");
|
||||
// console.log("offset:"+data.body[i].offset);
|
||||
// console.log("left:"+section.topSectionList[data.body[i].section].leftProgress);
|
||||
// console.log("right:"+section.topSectionList[data.body[i].section].rightProgress);
|
||||
// console.log("real:"+realprogress);
|
||||
}
|
||||
|
||||
}else{
|
||||
train.trainlist[data.body[i].code].dispose = false;
|
||||
train.trainGroup.remove(train.trainlist[data.body[i].code]);
|
||||
}
|
||||
}
|
||||
//down
|
||||
if(data.body[i].right == 0){
|
||||
if(section.downSectionList[data.body[i].section]){
|
||||
if(train.trainlist[data.body[i].code].dispose == false){
|
||||
train.trainlist[data.body[i].code].dispose = true;
|
||||
train.trainGroup.add(train.trainlist[data.body[i].code]);
|
||||
}else{
|
||||
|
||||
let realprogress = section.downSectionList[data.body[i].section].leftProgress +(section.downSectionList[data.body[i].section].rightProgress - section.downSectionList[data.body[i].section].leftProgress)*data.body[i].offset;
|
||||
train.trainlist[data.body[i].code].position.copy(manager.downCurve.getPoint(realprogress));
|
||||
|
||||
train.trainlist[data.body[i].code].up = new THREE.Vector3(-1,0,0);
|
||||
let tangent = manager.downCurve.getTangentAt(realprogress).normalize();
|
||||
train.trainlist[data.body[i].code].axis.crossVectors(train.trainlist[data.body[i].code].up, tangent).normalize();
|
||||
let radians = Math.acos(train.trainlist[data.body[i].code].up.dot(tangent));
|
||||
train.trainlist[data.body[i].code].quaternion.setFromAxisAngle(train.trainlist[data.body[i].code].axis, radians);
|
||||
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
train.trainlist[data.body[i].code].dispose = false;
|
||||
train.trainGroup.remove(train.trainlist[data.body[i].code]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(data.type == 'Device_Load_Destroy_3D'){
|
||||
|
||||
}
|
||||
|
||||
|
||||
if(data.type == 'Simulation_Over') {
|
||||
store.dispatch('LogOut').then(() => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,18 +1,27 @@
|
||||
export function sectionModel() {
|
||||
let scope = this;
|
||||
this.sections={
|
||||
datalist:[]
|
||||
};
|
||||
|
||||
this.stopsection = [];
|
||||
|
||||
this.topData = [];
|
||||
this.downData = [];
|
||||
this.topSectionList = [];
|
||||
this.downSectionList = [];
|
||||
this.init = function(sectiondata,switchdata,stationdata){
|
||||
|
||||
this.init = function(sectiondata,switchdata){
|
||||
for(let i=0;i<sectiondata.length;i++){
|
||||
if(sectiondata[i].type == "01" || sectiondata[i].type == "03"){
|
||||
//初始化区段对象数据
|
||||
let newsection = new SectionModel(sectiondata[i]);
|
||||
let newsection = {};
|
||||
// console.log(sectiondata[i]);
|
||||
newsection.name = sectiondata[i].name;
|
||||
newsection.code = sectiondata[i].code;
|
||||
newsection.index = i;
|
||||
newsection.type = sectiondata[i].type;
|
||||
newsection.lengthFact = sectiondata[i].lengthFact;
|
||||
|
||||
newsection.stationcode = sectiondata[i].stationCode;
|
||||
newsection.rsection = sectiondata[i].rightSectionCode;
|
||||
newsection.lsection = sectiondata[i].leftSectionCode;
|
||||
@ -136,5 +145,85 @@ export function sectionModel() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
let topStartSection,topEndSection,
|
||||
downStartSection,downEndSection;
|
||||
for(let i=0;i<stationdata[0].stands.length;i++){
|
||||
if(stationdata[0].stands[i].right == true){
|
||||
topStartSection = stationdata[0].stands[i].section;
|
||||
}
|
||||
if(stationdata[0].stands[i].right == false){
|
||||
downStartSection = stationdata[0].stands[i].section;
|
||||
}
|
||||
}
|
||||
let endNum = stationdata.length-1;
|
||||
for(let i=0;i<stationdata[endNum].stands.length;i++){
|
||||
if(stationdata[0].stands[i].right == true){
|
||||
topEndSection = stationdata[endNum].stands[i].section;
|
||||
}
|
||||
if(stationdata[0].stands[i].right == false){
|
||||
downEndSection = stationdata[endNum].stands[i].section;
|
||||
}
|
||||
}
|
||||
|
||||
let topSections = [];
|
||||
let topLengthFact = 0;
|
||||
topLengthFact += scope.sections.datalist[topStartSection].lengthFact;
|
||||
topSections.push(scope.sections.datalist[topStartSection]);
|
||||
for(let i=0;i<1000;i++){
|
||||
|
||||
if(scope.sections.datalist[topStartSection].rsection != topEndSection){
|
||||
topStartSection = [scope.sections.datalist[topStartSection].rsection];
|
||||
topLengthFact += scope.sections.datalist[topStartSection].lengthFact;
|
||||
topSections.push(scope.sections.datalist[topStartSection]);
|
||||
}else{
|
||||
topStartSection = [scope.sections.datalist[topStartSection].rsection];
|
||||
topLengthFact += scope.sections.datalist[topStartSection].lengthFact;
|
||||
topSections.push(scope.sections.datalist[topStartSection]);
|
||||
i = 1000;
|
||||
}
|
||||
}
|
||||
|
||||
let downSections = [];
|
||||
let downLengthFact = 0;
|
||||
downLengthFact += scope.sections.datalist[downStartSection].lengthFact;
|
||||
downSections.push(scope.sections.datalist[downStartSection]);
|
||||
for(let i=0;i<1000;i++){
|
||||
|
||||
if(scope.sections.datalist[downStartSection].rsection != downEndSection){
|
||||
downStartSection = [scope.sections.datalist[downStartSection].rsection];
|
||||
downLengthFact += scope.sections.datalist[downStartSection].lengthFact;
|
||||
downSections.push(scope.sections.datalist[downStartSection]);
|
||||
}else{
|
||||
downStartSection = [scope.sections.datalist[downStartSection].rsection];
|
||||
downLengthFact += scope.sections.datalist[downStartSection].lengthFact;
|
||||
downSections.push(scope.sections.datalist[downStartSection]);
|
||||
i = 1000;
|
||||
}
|
||||
}
|
||||
let nowLengthFact = 0;
|
||||
for(let i=0;i<topSections.length;i++){
|
||||
topSections[i].leftProgress = nowLengthFact/topLengthFact;
|
||||
nowLengthFact += topSections[i].lengthFact;
|
||||
topSections[i].rightProgress = nowLengthFact/topLengthFact;
|
||||
scope.topSectionList[topSections[i].code] = topSections[i];
|
||||
|
||||
}
|
||||
|
||||
nowLengthFact = 0;
|
||||
for(let i=0;i<downSections.length;i++){
|
||||
downSections[i].leftProgress = nowLengthFact/downLengthFact;
|
||||
nowLengthFact += downSections[i].lengthFact;
|
||||
downSections[i].rightProgress = nowLengthFact/downLengthFact;
|
||||
scope.downSectionList[downSections[i].code] = downSections[i];
|
||||
}
|
||||
|
||||
scope.topData = topSections;
|
||||
scope.downData = downSections;
|
||||
|
||||
console.log(topSections);
|
||||
console.log(topLengthFact);
|
||||
console.log(downSections);
|
||||
console.log(downLengthFact);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,34 @@
|
||||
export function signalModel() {
|
||||
export function signalModel(scene) {
|
||||
let scope = this;
|
||||
|
||||
this.init = function(signalData,topData,downData,topCurve,downCurve,originMesh){
|
||||
console.log(originMesh);
|
||||
for(let i=0;i<signalData.length;i++){
|
||||
if(signalData[i].right == true){
|
||||
for(let j=0;j<topData.length;j++){
|
||||
if(signalData[i].sectionCode == topData[j].code){
|
||||
let newsignal = originMesh.mesh.clone(true);
|
||||
|
||||
newsignal.position.copy(topCurve.getPoint(topData[j].rightProgress));
|
||||
|
||||
scene.add( newsignal );
|
||||
j = topData.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(signalData[i].right == false){
|
||||
for(let j=0;j<downData.length;j++){
|
||||
if(signalData[i].sectionCode == downData[j].code){
|
||||
let newsignal = originMesh.mesh.clone(true);
|
||||
|
||||
newsignal.position.copy(downCurve.getPoint(downData[j].leftProgress));
|
||||
|
||||
scene.add( newsignal );
|
||||
j = downData.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
70
src/jlmap3d/jl3dtrafficplan/sandbox/textUi.js
Normal file
70
src/jlmap3d/jl3dtrafficplan/sandbox/textUi.js
Normal file
@ -0,0 +1,70 @@
|
||||
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
|
||||
export function textUi(scene) {
|
||||
let scope = this;
|
||||
var stationcanvas = new Image();
|
||||
stationcanvas.src = JL3D_LOCAL_STATIC+"/texture/msgtnew.png";
|
||||
this.textplane = "";
|
||||
let textmaterial,textt;
|
||||
this.init = function(){
|
||||
let textgeometry = new THREE.PlaneBufferGeometry( 65, 90, 1 );
|
||||
textt = new THREE.CanvasTexture(getTextCanvas(""));
|
||||
// let materialSection2 = new THREE.MeshPhongMaterial( { color : 0x336600 } );
|
||||
textmaterial = new THREE.MeshBasicMaterial( { side: THREE.DoubleSide,map:textt ,transparent: true} );
|
||||
scope.textplane = new THREE.Mesh( textgeometry, textmaterial );
|
||||
// scope.textplane.rotation.z = Math.PI/2;
|
||||
scene.add(scope.textplane);
|
||||
}
|
||||
|
||||
this.updateUi = function(textData){
|
||||
textt = new THREE.CanvasTexture(getTextCanvas(""));
|
||||
|
||||
textmaterial = new THREE.MeshBasicMaterial( { side: THREE.DoubleSide,map:textt ,transparent: true} );
|
||||
textplane = new THREE.Mesh( textgeometry, textmaterial );
|
||||
textplane.name = stationdata[i].code;
|
||||
|
||||
newstationmesh.add(textplane);
|
||||
textgeometry.dispose();
|
||||
textmaterial.dispose();
|
||||
textt.dispose();
|
||||
}
|
||||
|
||||
function getTextCanvas(text){
|
||||
let canvas = document.getElementById('canvastexture');
|
||||
|
||||
canvas.width = 128;
|
||||
canvas.height = 256;
|
||||
// canvas.style.width = width;
|
||||
// canvas.style.height = height;
|
||||
|
||||
let ctx = canvas.getContext('2d');
|
||||
//ctx.fillStyle = '#FFFFFF';
|
||||
ctx.fillRect(0, 0,128,256);
|
||||
|
||||
ctx.fillStyle = '#FFFFFF';
|
||||
// ctx.textAlign = 'center';
|
||||
// ctx.textBaseline = 'middle';
|
||||
ctx.clearRect(0,0,128,256);
|
||||
|
||||
ctx.drawImage(stationcanvas,0,0,128,256);
|
||||
|
||||
ctx.font = "10px";
|
||||
if(text == ""){
|
||||
|
||||
}else{
|
||||
ctx.fillText("车站: "+text.name, 15,25);
|
||||
|
||||
ctx.fillText("漫游", 18,48);
|
||||
ctx.fillText("信息", 54,48);
|
||||
ctx.fillText("备忘", 93,48);
|
||||
|
||||
ctx.fillText("车站序号: "+text.name, 10,115);
|
||||
|
||||
ctx.fillText("公里标记:",10 ,135);
|
||||
ctx.fillText(text.kmPost,10 ,155);
|
||||
}
|
||||
|
||||
|
||||
let data = ctx.getImageData(0, 0,128,256);
|
||||
return data;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,20 @@
|
||||
export function trainModel() {
|
||||
export function trainModel(scene) {
|
||||
let scope = this;
|
||||
this.trainGroup = new THREE.Group();
|
||||
this.trainlist = [];
|
||||
scene.add(scope.trainGroup);
|
||||
|
||||
this.init = function(trainData){
|
||||
for(let i=0;i<trainData.length;i++){
|
||||
var geometry = new THREE.BoxGeometry( 30, 10, 10 );
|
||||
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
|
||||
var trainBox = new THREE.Mesh( geometry, material );
|
||||
trainBox.code = trainData[i].code;
|
||||
trainBox.groupNumber = trainData[i].groupNumber;
|
||||
trainBox.dispose = false;
|
||||
trainBox.up = new THREE.Vector3(1, 0, 0);
|
||||
trainBox.axis = new THREE.Vector3();
|
||||
scope.trainlist[trainData[i].groupNumber] = trainBox;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,13 +11,15 @@ export function Materialload(jlmap3dedit,standTextureData){
|
||||
|
||||
settexture( jlmap3dedit.materiallist,"black",JL3D_LOCAL_STATIC+'/material/signal/5.jpg');
|
||||
}
|
||||
|
||||
if(standTextureData.urls.length > 1){
|
||||
for(let i=0,leni=standTextureData.urls.length;i<leni;i++){
|
||||
setstationtexture(jlmap3dedit.stationtexture,standTextureData.urls[i].name,BASE_ASSET_API + standTextureData.urls[i].url);
|
||||
if(standTextureData){
|
||||
if(standTextureData.urls.length > 1){
|
||||
for(let i=0,leni=standTextureData.urls.length;i<leni;i++){
|
||||
setstationtexture(jlmap3dedit.stationtexture,standTextureData.urls[i].name,BASE_ASSET_API + standTextureData.urls[i].url);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function settexture(materiallist,name,textureurl){
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
<div class="jl3dmap3dMaintainerSelect" :style="{'background-image': 'url('+localStatic+'/background/other.jpg)'}">
|
||||
<div class="maintainerSelectButton selectButtonImg1"
|
||||
:style="{'background-image': 'url('+localStatic+'/vrtest/maintainer.png)'}"
|
||||
style="left:10%" @mouseenter="onMouseOverNormal"></div>
|
||||
style="left:40%" @mouseenter="onMouseOverNormal"></div>
|
||||
|
||||
<div class="maintainerSelectButton selectButtonImg2"
|
||||
:style="{'background-image': 'url('+localStatic+'/vrtest/zc.png)'}"
|
||||
style="left:10%;" v-show="normalShow"@mouseleave="onMouseOutNormal" @click="initNormal"></div>
|
||||
style="left:40%;" v-show="normalShow"@mouseleave="onMouseOutNormal" @click="initNormal"></div>
|
||||
|
||||
<div class="maintainerSelectButton selectButtonImg3"
|
||||
<!-- <div class="maintainerSelectButton selectButtonImg3"
|
||||
:style="{'background-image': 'url('+localStatic+'/vrtest/maintainervr.png)'}"
|
||||
style="left:40%;" @mouseenter="onMouseOverVr"></div>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
<div class="maintainerSelectButton selectButtonImg6"
|
||||
:style="{'background-image': 'url('+localStatic+'/vrtest/trvr.png)'}"
|
||||
style="left:70%;" v-show="trainRescueShow" @mouseleave="onMouseOutRescue" @click="initTrainRescueVr"></div>
|
||||
style="left:70%;" v-show="trainRescueShow" @mouseleave="onMouseOutRescue" @click="initTrainRescueVr"></div> -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
54
src/views/jlmap3d/trafficplan/component/textui.vue
Normal file
54
src/views/jlmap3d/trafficplan/component/textui.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="textui"
|
||||
:style="{'background-image': 'url('+localStatic+'/texture/showmsg.png)'}">
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
|
||||
|
||||
export default {
|
||||
name: 'Jl3dTextUi',
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localStatic:JL3D_LOCAL_STATIC,
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
updataData: function (data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.textui{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:150px;
|
||||
height:300px;
|
||||
z-index: 11;
|
||||
background-repeat:no-repeat;
|
||||
background-size:100%;
|
||||
// display:none;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="jl3d" class="jl3ddraw">
|
||||
|
||||
<Jl3d-TextUi ref="jl3dtextui" ></Jl3d-TextUi>
|
||||
<canvas id="canvastexture" ></canvas>
|
||||
|
||||
</div>
|
||||
@ -10,11 +10,12 @@
|
||||
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
|
||||
import { Jl3dSandBoxTest } from '@/jlmap3d/jl3dtrafficplan/jl3dsandboxtest.js';
|
||||
|
||||
import Jl3dTextUi from '@/views/jlmap3d/trafficplan/component/textui';
|
||||
|
||||
export default {
|
||||
name: 'jl3dsandboxtest',
|
||||
components: {
|
||||
|
||||
Jl3dTextUi,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -41,7 +42,7 @@
|
||||
methods: {
|
||||
initnewdata: function (group,header){
|
||||
let dom = document.getElementById('jl3d');
|
||||
this.jl3d = new Jl3dSandBoxTest(dom, this.$route.query.mapid, this.$route.query.group, this.$route.query.token);
|
||||
this.jl3d = new Jl3dSandBoxTest(dom,this.$refs.jl3dtextui, this.$route.query.mapid, this.$route.query.group, this.$route.query.token);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -55,7 +56,7 @@
|
||||
/* left: 0; */
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
z-index: 1500;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
#canvastexture {
|
||||
|
||||
@ -135,78 +135,6 @@
|
||||
"name": "地铁1号线(三江口--象峰)",
|
||||
"auto": "0",
|
||||
"stations": [{
|
||||
"status": "1",
|
||||
"trans_flag": "0",
|
||||
"code": "350104",
|
||||
"navi_poiid": "",
|
||||
"name": "三江口",
|
||||
"station_num": "1",
|
||||
"poiid1": "BS13160937",
|
||||
"start_time": "0630",
|
||||
"spell": "san jiang kou",
|
||||
"time_desc_json": "",
|
||||
"station_id": "350100020613041",
|
||||
"navi_poiname": "",
|
||||
"end_time": "2300",
|
||||
"navi_poiside": "",
|
||||
"xy_coords": "119.426122;25.978861",
|
||||
"poiid2_xy": "119.426122;25.978861",
|
||||
"poiid2": "BV11473936"
|
||||
}, {
|
||||
"status": "1",
|
||||
"trans_flag": "0",
|
||||
"code": "350104",
|
||||
"navi_poiid": "",
|
||||
"name": "下洋",
|
||||
"station_num": "2",
|
||||
"poiid1": "BS13161221",
|
||||
"start_time": "0631",
|
||||
"spell": "xia yang",
|
||||
"time_desc_json": "",
|
||||
"station_id": "350100020613042",
|
||||
"navi_poiname": "",
|
||||
"end_time": "2301",
|
||||
"navi_poiside": "",
|
||||
"xy_coords": "119.420776;25.984204",
|
||||
"poiid2_xy": "119.420776;25.984204",
|
||||
"poiid2": "BV10687392"
|
||||
}, {
|
||||
"status": "1",
|
||||
"trans_flag": "0",
|
||||
"code": "350104",
|
||||
"navi_poiid": "",
|
||||
"name": "梁厝",
|
||||
"station_num": "3",
|
||||
"poiid1": "BS11949917",
|
||||
"start_time": "0633",
|
||||
"spell": "liang cuo",
|
||||
"time_desc_json": "",
|
||||
"station_id": "350100020613043",
|
||||
"navi_poiname": "",
|
||||
"end_time": "2303",
|
||||
"navi_poiside": "",
|
||||
"xy_coords": "119.415109;25.994261",
|
||||
"poiid2_xy": "119.415109;25.994261",
|
||||
"poiid2": "BV10687393"
|
||||
}, {
|
||||
"status": "1",
|
||||
"trans_flag": "0",
|
||||
"code": "350104",
|
||||
"navi_poiid": "",
|
||||
"name": "安平",
|
||||
"station_num": "4",
|
||||
"poiid1": "BS13160935",
|
||||
"start_time": "0636",
|
||||
"spell": "an ping",
|
||||
"time_desc_json": "",
|
||||
"station_id": "350100020613044",
|
||||
"navi_poiname": "",
|
||||
"end_time": "2306",
|
||||
"navi_poiside": "",
|
||||
"xy_coords": "119.402224;25.992335",
|
||||
"poiid2_xy": "119.402224;25.992335",
|
||||
"poiid2": "BV11473935"
|
||||
}, {
|
||||
"status": "1",
|
||||
"trans_flag": "0",
|
||||
"code": "350104",
|
||||
@ -4622,4 +4550,4 @@
|
||||
"discount_flag": "0"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user