Skip to content
Snippets Groups Projects
Commit fc428872 authored by ramoncalabozo's avatar ramoncalabozo
Browse files

Añadido mapa en html y js

parent 948f638b
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Frontend/mapa/README.md 0 → 100644
+ 7
− 0
View file @ fc428872
# WebGL_magnitudes
Ejemplo simple para expresar magnitudes 3D sobre un mapa
## Demo en vivo
http://terre3.es/dev/example/WebGL_magnitudes/
## Documentación
Frontend/mapa/index.html 0 → 100644
+ 67
− 0
View file @ fc428872
<!DOCTYPE HTML>
<html>
<head>
<title>OGC Maps 3D - TR3</title>
<script src="terrain.js"></script>
</head>
<body>
<img id="imgOri" src="https://raw.githubusercontent.com/ramoncalabozo/interfacesGraficas/main/spain-01.png" width="892" height="632" style="display:none", crossorigin="true">
<div id="contMeshMap" style="width:800px;height:600px;border:solid"></div>
<script type="text/javascript">
function initMap(){
var imgOriObj = document.getElementById('imgOri');
TR3.setMeshMap(imgOriObj,'contMeshMap');
TR3.loadFile([ { point: [20,0,150,'Andalucía'] },
{ point: [190,0,-130,'Aragón'] },
{ point: [-70,0,-260,'Principado de Asturias'] },
{ point: [350,0,-20,'Islas Baleares'] },
// CANARIAS
{ point: [10,0,-240,'Cantabria'] },
{ point: [80,0,0,'Castilla - La Mancha'] },
{ point: [-20,0,-150,'Castilla y León'] },
{ point: [290,0,-150,'Cataluña'] },
{ point: [190,0,0,'Comunidad Valenciana'] },
{ point: [-70,0,0,'Extremadura'] },
{ point: [-150,0,-250,'Galicia'] },
{ point: [80,0,-190,'La Rioja'] },
{ point: [30,3,-70,'Comunidad de Madrid'] },
{ point: [150,0,100,'Murcia'] },
{ point: [130,0,-220,'Comunidad Foral de Navarra'] },
{ point: [80,0,-240,'País Vasco'] },
{ point: [-20,0,220,'Ceuta'] },
{ point: [100,0,230,'Melilla'] },
], [ [20,1,20],
[20,10,20],
[20,20,20],
[20,30,20],
[20,40,20],
[20,50,20],
[20,60,20],
[20,70,20],
[20,80,20],
[20,90,20],
[20,100,20],
[20,110,20],
[20,80,20],
[20,120,20],
[20,130,20],
[20,140,20],
[20,150,20],
[20,140,20],
[20,150,20]
] );
};
initMap();
</script>
</body>
</html>
\ No newline at end of file
Frontend/mapa/libs/Detector.js 0 → 100644
+ 59
− 0
View file @ fc428872
/**
* @author alteredq / http://alteredqualia.com/
* @author mr.doob / http://mrdoob.com/
*/
var Detector = {
canvas: !! window.CanvasRenderingContext2D,
webgl: ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(),
workers: !! window.Worker,
fileapi: window.File && window.FileReader && window.FileList && window.Blob,
getWebGLErrorMessage: function () {
var element = document.createElement( 'div' );
element.id = 'webgl-error-message';
element.style.fontFamily = 'monospace';
element.style.fontSize = '13px';
element.style.fontWeight = 'normal';
element.style.textAlign = 'center';
element.style.background = '#fff';
element.style.color = '#000';
element.style.padding = '1.5em';
element.style.width = '400px';
element.style.margin = '5em auto 0';
if ( ! this.webgl ) {
element.innerHTML = window.WebGLRenderingContext ? [
'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />',
'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
].join( '\n' ) : [
'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',
'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
].join( '\n' );
}
return element;
},
addGetWebGLMessage: function ( parameters ) {
var parent, id, element;
parameters = parameters || {};
parent = parameters.parent !== undefined ? parameters.parent : document.body;
id = parameters.id !== undefined ? parameters.id : 'oldie';
element = Detector.getWebGLErrorMessage();
element.id = id;
parent.appendChild( element );
}
};
\ No newline at end of file
Frontend/mapa/libs/OrbitControls.js 0 → 100644
+ 1219
− 0
View file @ fc428872
This diff is collapsed.
Frontend/mapa/libs/three.min.js 0 → 100644
+ 2
− 0
View file @ fc428872
This diff is collapsed.
Frontend/mapa/spain-01.png 0 → 100644
+ 0
− 0
View file @ fc428872
Frontend/mapa/spain-01.png

31.5 KiB

Frontend/mapa/terrain.js 0 → 100644
+ 235
− 0
View file @ fc428872
/*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};
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.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";
infoGeo3d.style.backgroundColor = "#fff";
infoGeo3d.innerHTML = '<br><b>&nbsp&nbsp&nbspWebGL Map - ThreeJS -&nbsp&nbsp&nbsp</b><br>&nbsp&nbsp&nbsp&nbsp&nbspMagnitudes 3D Map<br>&nbsp';
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.divContainer = function(desty){
var contMeshMap = document.getElementById(desty);
if(!contMeshMap){
alert("invalid destiny");
}else{
TR3.canvasDestW = parseInt(contMeshMap.style.width) || 500;
TR3.canvasDestH = parseInt(contMeshMap.style.height) || 500;
contMeshMap.style.position='relative';
}
};
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 = false;
/*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 );
};
TR3.makeMultiPos = function ( gltf, pos, scale ) {
var obj3d = gltf.scene;
for(var i=1;i<pos.length;i++){
var posi = pos[i];
var scalei;
var newClon = new Array();
if(typeof scale === "object"){scalei = scale[i];}else{scalei = scale;}
var posObj3d = new THREE.Vector3();
posObj3d.x = posi.point[0];
posObj3d.y = posi.point[1];
posObj3d.z = posi.point[2];
var clon = TR3.makeClon( gltf, obj3d, posObj3d, scalei );
TR3.scene.add( clon );
newClon.scene = clon;
}
};
TR3.makeClon = function ( gltf, obj3d, posObj3d, scale ) {
var clon = obj3d.clone();//clone?...
//clon.material = obj3d.material.clone();
clon.position.set( posObj3d.x, posObj3d.y, posObj3d.z ); // or any other coordinates
if(scale){
clon.scale.set( scale[0], scale[1], scale[2] );
}
return clon;
};
TR3.loadFile = function ( pos, scale ) {
var gltf = new Array();
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshNormalMaterial();
var objGLTF = new THREE.Mesh( geometry, material );
gltf.scene = objGLTF;
objGLTF.position.set( pos[0].point[0], pos[0].point[1], pos[0].point[2] );
if(scale){
if( typeof scale === "object" ){
objGLTF.scale.set( scale[0][0], scale[0][1], scale[0][2] );
geometry.translate( 0, 0.5, 0 );
}
}
TR3.scene.add( objGLTF );
if( typeof(pos[0]) == "object" ){ TR3.makeMultiPos( gltf, pos, scale ); }
};
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment