Upload New File

js/mapa.js

+	/*load Libreries*/
+	document.writeln("<script src=\"libs/three.min.js\"></script>");
+	document.writeln("<script src=\"libs/OrbitControls.js\"></script>");
+	document.writeln("<script src=\"libs/Detector.js\"></script>");
+
+
+
+	TR3 = new Object();
+	/*Scene Container*/
+	TR3.scene; TR3.renderer; TR3.camera; TR3.controls; TR3.material; TR3.mesh; TR3.fov = 30;
+
+	/*Maps Params*/
+	TR3.srsImg; TR3.widthImg; TR3.heightImg;
+
+	/*Container*/
+	TR3.desty;
+	TR3.canvasDestW; TR3.canvasDestH;
+	TR3.optionsSet = {cursor3d: true, anaglyph: false};
+
+	/*Barras del diagrama*/
+	TR3.arrayBarras = [];
+	TR3.arrayCruces = [];
+
+	TR3.animate = function(){
+
+		if(TR3.optionsSet.anaglyph){
+			effect.render(TR3.scene, TR3.camera);
+		}else{
+			TR3.renderer.render(TR3.scene, TR3.camera);
+		}
+
+		TR3.controls.update();
+		//request new frame
+		requestAnimationFrame( TR3.animate );
+	};
+
+	TR3.makeWorld = function(imgConteint){
+		TR3.scene.add( new THREE.AmbientLight( 0xffffff, 0.7 ))
+		TR3.widthImg = imgConteint.width;
+		TR3.heightImg = imgConteint.height;
+
+		/*Position Camera Ini*/
+		var radianFOV = TR3.fov*2*Math.PI/360;
+		TR3.camera.position.y = Math.cos(radianFOV/2)*(TR3.widthImg/2)/Math.sin(radianFOV/2)/1.5;
+		TR3.camera.position.z = TR3.camera.position.y*Math.sin(Math.PI/4);
+
+		/*Texture-Material*/
+		var texture = new THREE.Texture(imgConteint);
+		texture.needsUpdate = true;
+		TR3.material = new THREE.MeshBasicMaterial({map: texture});
+
+		/*Image-Mesh*/
+		var geometry = new THREE.PlaneBufferGeometry( TR3.widthImg, TR3.heightImg );
+		//geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
+		TR3.mesh = new THREE.Mesh( geometry, TR3.material);
+		//TR3.mesh.geometry.dynamic = true;
+		TR3.mesh.name = "mesh3d";
+		TR3.mesh.rotation.x = -Math.PI/2;
+		TR3.scene.add(TR3.mesh);
+	};
+
+	TR3.cvsDesty = function(){
+
+		var canvasDest = document.getElementById('canvasDest');
+		if(!canvasDest){
+			canvasDest = document.createElement('CANVAS');
+			canvasDest.id = 'canvasDest';
+			canvasDest.setAttribute("width", TR3.canvasDestW);
+			canvasDest.setAttribute("height", TR3.canvasDestH);
+
+			document.getElementById(TR3.desty).appendChild(canvasDest);
+		}
+
+		return canvasDest;
+	};
+
+	TR3.setMeshOptions = function(cursorOpt, anaglyphOpt){
+		/*DTM*/
+		var b4DTMopt = TR3.optionsSet.DTM;
+
+		//if(DTMopt=="def"){DTMopt=false;}
+
+		/*Cursor3d*/
+		var cursorOpt = cursorOpt;
+
+		if(cursorOpt=="def"){cursorOpt=true;}
+		var infoGeo3d = document.getElementById('infoGeo3d');
+		var cvsDesty = document.getElementById(TR3.desty)
+		if( cursorOpt == true ){
+			if(!infoGeo3d){
+				infoGeo3d = document.createElement('div');
+				infoGeo3d.id = "infoGeo3d";
+				infoGeo3d.style.position = "absolute";
+				infoGeo3d.style.top = 0;
+				infoGeo3d.style.fontSize = "10px";
+				infoGeo3d.style.margin = "5px";
+				cvsDesty.appendChild(infoGeo3d);
+			}else{
+				infoGeo3d.style.display = 'block';
+			}
+			//cvsDesty.style.cursor = "none";
+		}else{
+			infoGeo3d.style.display = 'none';
+			//cvsDesty.style.cursor = "auto";
+		}
+
+		/*Anaglyph*/
+		var anaglyphOpt = anaglyphOpt;
+
+		if(anaglyphOpt=="def"){anaglyphOpt=false;}
+
+		TR3.optionsSet = {cursor3d: cursorOpt, anaglyph: anaglyphOpt};
+	};
+
+
+	TR3.setMeshMap = function(imgOri,desty){
+
+		/*INI params*/
+		//imgOri = imgOri || 'http://www.ign.es/wms-inspire/pnoa-ma?&VERSION=1.1.1&REQUEST=GetMap&LAYERS=OI.OrthoimageCoverage&FORMAT=image/jpeg&SRS=EPSG:25830&BBOX=647399,4220032,649899,4222532&EXCEPTIONS=application/vnd.ogc.se_inimage&width=500&height=500';
+		TR3.desty = desty || 'contMeshMap';
+		TR3.setMeshOptions(true, false);
+
+		/*Div container*/
+		TR3.divContainer(desty);
+
+		/*Detector Renderer*/
+		if(Detector.canvas){
+			/*Get canvas Destiny*/
+			var canvasDest = TR3.cvsDesty();
+			if ( ! Detector.webgl ) {
+				alert("Your browser does not seem to support WebGL. Please, upgrade your browser or try another one.");
+			}else{
+				TR3.renderer = new THREE.WebGLRenderer({ canvas: canvasDest });
+			}
+		}else{
+			alert("Your browser does not seem to support HTML5 canvas. Please, upgrade your browser or try another one.");
+		};
+
+		TR3.renderer.setSize( TR3.canvasDestW, TR3.canvasDestH );
+
+		/*Scene*/
+		TR3.scene = new THREE.Scene();
+
+		/*Camera*/
+		TR3.camera = new THREE.PerspectiveCamera(TR3.fov, TR3.canvasDestW / TR3.canvasDestH, 1, 20000);
+
+		/*Orbit Controls*/
+		TR3.controls = new THREE.OrbitControls( TR3.camera, canvasDest );
+		//TR3.controls.center.set(0.0, 0.0, 0.0);
+		TR3.controls.maxPolarAngle = Math.PI/2;
+		TR3.controls.minPolarAngle = 0 + 0.05;
+		TR3.controls.userPanSpeed = 100;
+		TR3.controls.autoRotate = true;
+
+		TR3.scene.background =  new THREE.Color( 0xffffff )
+		/*Create Image-Mesh*/
+		TR3.makeWorld( imgOri );
+
+		/*Animate*/
+		TR3.animate();
+
+		/*Events*/
+		window.addEventListener( 'resize', TR3.onWindowResize, false );
+		canvasDest.addEventListener( 'click', function() {TR3.controls.autoRotate = false;}, false );
+	};
+
+	TR3.onWindowResize = function(){
+		TR3.camera.aspect = TR3.canvasDestW / TR3.canvasDestH;
+		TR3.camera.updateProjectionMatrix();
+		TR3.renderer.setSize( TR3.canvasDestW, TR3.canvasDestH );
+	};
+
+/*OBJETO PARA ASIGNACIÓN DE EVENTOS A LAS CONSTRUCCIONES THREEJS*/
+
+/*METODOS SOBREESCRITOS*/
+	TR3.divContainer = function(desty, width, height){
+
+		var contMeshMap = document.getElementById(desty);
+		if(!contMeshMap){
+			console.log("ERROR-404");
+		}else{
+			contMeshMap.style.position='relative';
+		}
+	};
+
+	/*METODOS PROPIOS*/
+	//Inicializa el mapa
+	TR3.crear_mapa = function(imgOri,desty, width, height){
+		TR3.srsImg = imgOri;
+		TR3.destino = desty;
+		TR3.redimensionar_mapa()
+
+	};
+	//Establecer dimensiones del mapa y del canvas que lo contiene
+	TR3.redimensionar_mapa = function() {
+		TR3.canvasDestW = 700;
+		TR3.canvasDestH = 550;
+		$("#contMeshMap").css("width", "700px")
+		$("#contentchart").css("width", "calc(100% - 700px)")
+		$("#mapa3d").css("width", "700px")
+		TR3.setMeshMap(TR3.srsImg,TR3.desty)
+	};
+
+	function callback(comunidad){
+		mostrar_info_comunidad(comunidad)
+	}
+
+	//Dibuja las barras y actualiza el mapa
+	TR3.pintar_barras = function ( ciudades, valores, lado, FORMATOS, max) {
+		//Para la asignación de los eventos a objetos 3js
+		var domEvents	= new THREEx.DomEvents(TR3.camera, TR3.renderer.domElement)
+
+		//Eliminamos las barras existentes
+		for(var i=0;i<TR3.arrayBarras.length;i++){
+			TR3.scene.remove(TR3.arrayBarras[i])
+		}
+		for(var i=0;i<TR3.arrayCruces.length;i++){
+			TR3.scene.remove(TR3.arrayCruces[i])
+		}
+
+		//Creamos las barras nuevas
+		scal = 300/max
+		for(var i=0;i<valores.length;i++){
+			var valor = valores[i]
+			posi = ciudades[valor[0]]
+			color = FORMATOS[valor[2]].color;
+			tipo = FORMATOS[valor[2]].tipo;
+			desf = valor[3]
+
+
+			valor[1] = valor[1]*scal;
+			var geometry = new THREE.BoxBufferGeometry(lado, valor[1], lado);
+			var material = new THREE.MeshStandardMaterial({color: new THREE.Color(color)});
+			var barra =new THREE.Mesh( geometry, material );
+			domEvents.addEventListener(barra, 'dblclick', (function(valor) {return function() {callback(valor[0]);}})(valor), false)
+			TR3.arrayBarras.push(barra)
+			//console.log(valor[0])
+			barra.position.set( posi[0]-desf, valor[1]/2, posi[2])
+			TR3.scene.add( barra );
+			if (tipo=="cruz"){
+				y = valor[1]*0.8;
+				var geometry = new THREE.BoxBufferGeometry(2*lado, lado/2, lado);
+				var material = new THREE.MeshStandardMaterial({color: new THREE.Color(color)});
+				var cruz =new THREE.Mesh( geometry, material );
+				cruz.position.set( posi[0]-desf,y, posi[2])
+				TR3.scene.add( cruz );
+				TR3.arrayCruces.push(cruz)
+
+			}
+		}
+	}