3. 素材

优质

小牛编辑

131浏览

2023-12-01

3.1. 素材上传

本地数据上传
目前Wish3DEarth支持的空间数据类型：

类型	格式	上传要求
实景三维	osgb	压缩成zip格式
人工模型	obj、fbx、skp	压缩成zip格式，obj,fbx需要将纹理等附属文件一并打包
矢量数据	shp、kml	需要压缩成zip格式
影像数据	lrp	lrp格式为高效的影像格式，需要通过免费的LSV将tif等文件格式转换后上传
地形数据	lrp	lrp格式为高效的地形格式，需要通过免费的LSV将tif等文件格式转换后上传

素材上传前台使用插件是webuploader.js，数据的上传是分片上传的

上传素材接口

 http://localhost:8080/TX_DataManager/FileUpload/server.action

数据上传前需要进行md5验证

 http://localhost:8080/TX_DataManager/FileUpload/md5Valid.action

传入参数	参数说明
fileId	上传文件id （插件自动生成）
fileName	上传文件名称
fileExt	上传文件的类型（.zip 或.lrp）
fileType	上传文件类型（1实景2.人工3.矢量4影像5地形）
fileSize	上传文件的大小
menuId	上传权限管理参数（固定数值）

返回参数	参数说明
guid	上传文件的唯一标识
md5_arr	一般为””

上传完成后数据进行分片合并校验

分片校验接口

 http://localhost:8080/TX_DataManager/FileUpload/composeFile.action

传入参数	参数说明
dataguid	上传文件md5校验后后返回guid
fileName	上传文件名称
chunks	分片总数量

分片校验完成以后需要进行文件状态的改变，让数据在后台线程中自动处理
修改数据状态接口
http://localhost:1000/api/upload/1.0.0/updateTask

传入参数	参数说明
title	上传素材名称当数据类型是skp时可转换为3dtiles类型或者是lmz类型此时需要在title后拼上字符串#0/#1,#0为转换为lmz #1为转换为3dtiles
position	上传素材的坐标默认是120,30,0
dataGuid	上传文件md5校验后后返回guid
handleStatus	数据的处理状态默认是1(0,创建中，1等待中，2解压中，3转换中，4入库mongodb，5入库mysql)刚上传的数据需把它加入到等待队列中

上传处理过程中如果出现（数据结构不对等原因）导致数据无法正常处理完成，并且影响其他数据上传的情况，可将该数据标记为问题数据
标识数据为问题数据
http://localhost:1000/api/upload/1.0.0/updateTask
上传处理对于处理不成功的数据可重新处理
重新处理数据
http://localhost:1000/api/upload/1.0.0/updateTask

3.2. 素材管理

素材列表获取
获取数据列表 http://localhost:1000/api/server/1.0.0/query

传入参数	参数说明
keyWord	关键字如果为""表示差全部，有值时根据关键字查询
type	根据类型来查询数据为0差全部；为1查实景数据；为2查人工数据；为3查矢量数据；为4查影像数据；为5查地形数据
dataType	查询数据的类型为0查自己拥有的；为1查全部
frompage	页面标识
menuId	权限相关字段
pageIndex	第几页
count	每页条数

返回参数	参数说明
count	总条数
data	数据列表
dataType	查询数据的类型为0查自己拥有的；为1查全部
frompage	页面标识
menuId	权限相关字段

素材删除
用户删除数据（预删除）
为保证数据的误删除删除数据时需要进行验证码的验证
获取验证码接口 http://localhost:1000/api/server/1.0.0/getValidCode
删除数据（预删除）
http://localhost:1000/api/server/1.0.0/delete
用户删除数据（真实删除）
该删除主要用于管理员对用户删除后的数据进行清理，该删除也需要精心验证码的验证，该删除分为两部分，一部分是删除数据的mysql和mongodb中的数据，一部分是删除源数据的zip包数据
删除mysql和mongodb中的数据（真实删除）
http://localhost:1000/api/server/1.0.0/deleteData
删除zip包数据（真实删除）
http://localhost:1000/api/server/1.0.0/deleteZip

素材修改

素材修改主要是修改素材的基本信息

获取素材的详细信息

http://localhost:1000/api/server/1.0.0/details

修改素材的名称，位置

http://localhost:1000/api/server/1.0.0/update

修改素材的缩略图及其视角

http://localhost:1000/api/server/1.0.0/uploadImg

获取canvas缩略图的方法

  //一个隐藏的img标签
  var oOriginImg=$("");
  //获取当前canvas的宽高
  var canvasWidth=$("canvas").width();
  var canvasHeight=$("canvas").height();
  //获取当前canvas转化为图片信息  base64位的字符串
  var sImg=viewer.scene.canvas.toDataURL("image/jpeg", 0.5);
  //将图片信息加载到隐藏的img标签中
  oOriginImg.off("load");
  oOriginImg.attr("src",sImg);
  oOriginImg.attr("style","width:"+canvasWidth+"px;height:"+canvasHeight+"px;");
  oOriginImg.off("load").load(function(){
      //原始尺寸
      var orinWidth=oOriginImg.width();
      var orinHeight=oOriginImg.height();
      //计算比例
      var fProportion=parseFloat(orinHeight/orinWidth);
      //现在尺寸
      //计算想要截取的大小
      var iCurrentWidth=orinWidth;
      var iCurrentheight=orinHeight;
      if(fProportion>=0.645){
          iCurrentWidth=parseInt(orinWidth*0.645);
          iCurrentheight=parseInt(iCurrentWidth*0.645);
      }else{
          var NextWidth=parseInt(orinHeight/0.645);
          iCurrentWidth=parseInt(NextWidth*0.645);
          iCurrentheight=parseInt(iCurrentWidth*0.645);
      }
      var left=parseInt(orinWidth/2)-parseInt(iCurrentWidth/2);
      var top=parseInt(orinHeight/2)-parseInt(iCurrentheight/2);
      var crop_canvas = document.createElement('canvas');
      crop_canvas.width = 288;
      crop_canvas.height = 220;
      //图片大小截取和压缩
      crop_canvas.getContext('2d').drawImage(oOriginImg.get(0), left, top, iCurrentWidth, iCurrentheight, 0, 0,288,220);
      //图片的最终信息
      var imgUrl=crop_canvas.toDataURL('image/jpeg');
      //获取当前的视点信息
      var oMarkPos=camera.position;
      var oMarkDir=camera.direction;
      var oMarkUp=camera.up;
  }

3.3. 素材预览

实景三维数据的预览

加载实景三维数据

 var sTimeSeconds=new Date().getTime();
 var tileset = new LSGlobe.LSPageLOD({
     //dataGuid 数据的唯一标识
     url :"http://localhost:8080/TX_DataManager/data/" + dataGuid + "/data/model.json?"+sTimeSeconds,
     shadows:LSGlobe.ShadowMode.ENABLED,
     // shadows属性值详解
     // LSGlobe.ShadowMode.ENABLED  即接受阴影也自己投影
     // LSGlobe.ShadowMode.DISABLED  即不接受投影也不自己投影
     // LSGlobe.ShadowMode.RECEIVE_ONLY 只接受阴影不自己投影
     // LSGlobe.ShadowMode.CAST_ONLY  不接受阴影只自己投影
     viewer:viewer
 });
 tileset.name={"在加入到场景时添加一些字段来区分各种数据，预览时无需添加"}
 //倾斜模型对象加入到球中
 viewer.scene.pageLODLayers.add(tileset);
 tileset.readyPromise.then(function(pagelod) {
     //飞到倾斜模型的位置(可解决中心点不准问题)
     var oCenter=tileset.tileBoundingSphere.center;
     var cartesian3=new LSGlobe.Cartesian3(oCenter.x,oCenter.y,oCenter.z);
     var cartographic=ellipsoid.cartesianToCartographic(cartesian3);
     var lat=LSGlobe.Math.toDegrees(cartographic.latitude);
     var lng=LSGlobe.Math.toDegrees(cartographic.longitude);
     var height=cartographic.height;
     viewer.camera.flyTo({
         destination: LSGlobe.Cartesian3.fromDegrees(lng, lat, height + 1500),
         duration: 1
     })
 }).otherwise(function(error){
     console.error("加载倾斜数据错误");
 });

人工三维数据的预览

lmz加载（obj,fbx,skp都可转换为lmz）

 //人工三维加载的位置信息可自己设置
 var position={x:120,y:30,z:0};
 var model = new LSGlobe.LSModelLOD({
     //dataGuid 数据的唯一标识
     url :"http://localhost:8080/TX_DataManager/data/"+dataGuid+"/slf.lmz",
     shadows : LSGlobe.ShadowMode.ENABLED,
     position : new LSGlobe.Cartesian3(position.x,position.y, position.z)
     //position : new LSGlobe.Cartesian3("120","30","0")
 });
 model.name={"在加入到场景时添加一些字段来区分各种数据，预览时无需添加"}
 //人工模型加入到球中
 viewer.scene.primitives.add(model);
 //飞到人工模型的位置
 viewer.camera.flyTo({
     destination : LSGlobe.Cartesian3.fromDegrees(position.x,position.y,position.z+120),
     orientation : {
         heading : LSGlobe.Math.toRadians(0.0),
         pitch : LSGlobe.Math.toRadians(-90.0),
         roll : 0.0
     },
     duration: 2
 });

3dtiles（skp可转换为3dtiles）


 var tileset = new LSGlobe.Cesium3DTileset({
     //dataGuid 数据的唯一标识
     url: "http://localhost:8080/TX_DataManager/data/"+dataGuid+"/Data/data.json",
     maximumScreenSpaceError:0
 });
 //上面的Cesium3DTileset如果不能正常加载可替换为LSGlobe3DTiles
 //3dtiles加入到球中
 tileset.name={"在加入到场景时添加一些字段来区分各种数据，预览时无需添加"}
 viewer.scene.primitives.add(tileset);
 tileset.readyPromise.then(function(tileset) {
     //飞到3dtiles模型的位置
     var boundingSphere = tileset.boundingSphere;
     viewer.camera.viewBoundingSphere(boundingSphere, new LSGlobe.HeadingPitchRange(0, -2.0, 0));
     viewer.camera.lookAtTransform(LSGlobe.Matrix4.IDENTITY);
 });

矢量数据的预览

shp加载

 var options = {
     camera: viewer.scene.camera,
     canvas: viewer.scene.canvas,
     clampToGround: true
 };
 //dataGuid 数据的唯一标识
 var promise= LSGlobe.KmlDataSource.load("http://localhost:8080/TX_DataManager/data/"+dataGuid+"//data.geojson",options);
 promise.then(function(dataSource){
     dataSource.name ={"在加入到场景时添加一些字段来区分各种数据，预览时无需添加"}
     //shp加载到球中
     viewer.dataSources.add(dataSource);
     //飞到shp数据的位置
     viewer.flyTo(dataSource);
 }).otherwise(function(error) {
     console.error("加载shp数据失败");
 });
 矢量数据中的要素属性/属性值的获取,参考单体化鼠标点击获取

KML加载

 var options = {
     camera: viewer.scene.camera,
     canvas: viewer.scene.canvas,
     clampToGround: true
 };
 //dataGuid 数据的唯一标识
 var promise= LSGlobe.KmlDataSource.load("http://localhost:8080/TX_DataManager/data/"+dataGuid+"/data.kml",options);
 promise.then(function(dataSource){
     dataSource.name ={"在加入到场景时添加一些字段来区分各种数据，预览时无需添加"}
     //KML加载到球中
     viewer.dataSources.add(dataSource);
     //飞到KML数据的位置
     viewer.flyTo(dataSource);
 }).otherwise(function(error) {
     console.error("加载kml数据失败");
 });

影像数据的预览

  var imageryLayers = viewer.imageryLayers;
  var imageLayer = new LSGlobe.LRPImageryProvider({
      "url" : "http://localhost:8080/api/lsglobe/1.0.0/",
      "layer" : "lrpdata/"+dataGuid+"/data.lrp"
      //dataGuid 数据的唯一标识
  })
  imageLayer.name ={"在加入到场景时添加一些字段来区分各种数据，预览时无需添加"}
  //影像加载到球中
  imageryLayers.addImageryProvider(imageLayer);
  imageLayer.readyPromise.then(function(flag) {
      var rect = imageLayer._rectangle;
      //飞到影像数据的位置
      viewer.camera.flyTo({
          destination : rect
      });
  }).otherwise(function(error){
      console.error("加载影像数据失败");
  })

地形数据的预览

  var terrainLayers = viewer.terrainLayers;
  var terrainLayer = new LSGlobe.LSLRPTerrainProvider({
      "url" : "http://localhost:8080/api/lsglobe/1.0.0/",
      "layer" : "lrpdata/"+dataGuid+"/data.lrp"
      //dataGuid 数据的唯一标识
  })
  terrainLayer.name ={"在加入到场景时添加一些字段来区分各种数据，预览时无需添加"}
  //地形加载到球中
  terrainLayers.addTerrainProvider(terrainLayer);
  terrainLayer.readyPromise.then(function(flag) {
      var rect = imageLayer._rectangle;
      //飞到地形数据的位置
      viewer.camera.flyTo({
          destination : rect
      });
  }).otherwise(function(error){
      console.error("加载地形数据失败");
  })