Wish3DEarth 应用文档

实景三维数据的预览

加载实景三维数据

JavaScript

var sTimeSeconds = new Date().getTime(); //防止缓存
var url = jsonPath + "?" + sTimeSeconds; //dataGuid 数据的唯一标识
try {
     var tileset = await LSGlobe.LSPageLOD.fromUrl(url, {
         shadows: LSGlobe.ShadowMode.DISABLED,
         //开启将耗性能
         // shadows属性值详解
         // LSGlobe.ShadowMode.ENABLED  即接受阴影也自己投影
         // LSGlobe.ShadowMode.DISABLED  即不接受投影也不自己投影
         // LSGlobe.ShadowMode.RECEIVE_ONLY 只接受阴影不自己投影
         // LSGlobe.ShadowMode.CAST_ONLY  不接受阴影只自己投影
         viewer: viewer
     });
     tileset.name = {
         "在加入到场景时添加一些字段来区分各种数据，预览时无需添加"
     }
     //倾斜模型对象加入到球中
     viewer.scene.pageLODLayers.add(tileset);
     //飞到倾斜模型的位置(可解决中心点不准问题)
     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 //过渡时间，单位秒
     })
} catch (error) {
     console.log(`Error loading LSPageLOD: ${error}`)
};

人工三维数据的预览

与倾斜模型不同，倾斜模型一般是由无人机飞出来数据，经过建模软件处理最终生成带有坐标信息的瓦片文件，而人工三维数据通常不带坐标信息，需要我们自己指定好放人工三维数据的坐标，才能达到我们想要的效果。

人工三维数据最终加载有两种方式，是由数据转换环节决定的，目前 Wish3D Earth 统一把 obj 数据转换为 lmz 数据，skp 数据和 fbx 数据转为 3dtiles 数据。lmz 数据加载是等所有细节加载完成后再显示在场景中，适合体积小且简单的模型加载。3dtiles 数据加载是根据角度可视区域加载，因此不会因为数据过大导致阻塞假死现象出现，适合体积较大细节复杂的人工模型（体积小的效果媲美 lmz）。

lmz 加载（obj 转换为 lmz）

JavaScript

//人工三维加载的位置信息可自己设置
var position={x:120,y:30,z:0};
var model = new LSGlobe.LSModelLOD({
    //dataGuid 数据的唯一标识
    url :jsonPath,
    shadows : LSGlobe.ShadowMode.ENABLED,
    // shadows属性值详解
    // LSGlobe.ShadowMode.ENABLED  即接受阴影也自己投影
    // LSGlobe.ShadowMode.DISABLED  即不接受投影也不自己投影
    // LSGlobe.ShadowMode.RECEIVE_ONLY 只接受阴影不自己投影
    // LSGlobe.ShadowMode.CAST_ONLY  不接受阴影只自己投影
    position : new LSGlobe.Cartesian3(position.x,position.y, position.z)
});
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）

JavaScript

 const url = jsonPath; // dataGuid 数据地址也是数据的唯一标识
 try{
     var tileset = await LSGlobe.Cesium3DTileset.fromUrl(url, {
         maximumScreenSpaceError:0
     });
     //3dtiles加入到球中
     tileset.name={"在加入到场景时添加一些字段来区分各种数据，预览时无需添加"}
     viewer.scene.primitives.add(tileset);
     //飞到3dtiles模型的位置
     var boundingSphere = tileset.boundingSphere;
     viewer.camera.viewBoundingSphere(boundingSphere, new LSGlobe.HeadingPitchRange(0, -2.0, 0));
     viewer.camera.lookAtTransform(LSGlobe.Matrix4.IDENTITY);
 } catch(error){
     console.log(`Error loading tileset: ${error}`);
 }

矢量数据的预览

目前 Wish3D Earth 支持 shp 和 kml 数据加载。

shp 加载，Wish3D Earth 已经支持大矢量数据加载，加载此类数据需要使用插件 VectorTileProvider.js。在页面中引用该插件，代码如下：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link href="LSGlobe/Widgets/widgets.css" type="text/css" rel="stylesheet" />
    <script src="Build/LSGlobe/LSGlobe.js"></script>
    <script src="Plugins/VectorTileProvider.js"></script>
</head>
<body>
<div id="lsGlobe" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<script>
    var viewer = new LSGlobe.Viewer('lsGlobe', {
        baseLayerPicker: false,
        sceneModePicker: false,
        fullscreenButton:false,
        guid:licenseCode,
        //许可码
        licenseUrl:lincenseUrl
        //许可服务地址
    });
    //token是当前用户的登录凭证
    LSGlobe.LSOnline.defaultAccessToken = token;
</script>
</body>
</html>

加载矢量代码如下：

JavaScript

try {
     oShpImageLayer = new LSGlobe.VectorTileProvider.fromUrl(jsonPath, {
         viewer: viewer
     });
     //设置矢量样式
     var oStyle = {
         styletyle: "default",
         color: "rgba(187, 187, 187,1)",//矢量的颜色
         lineType: LSGlobe.VectorTileLineType.SOLID,//边框类型
         lineWidth: 2,//边框宽度
         outline: false,//是否显示边框
         outlineColor: "#2196F3",//边框
         icon: "images/GEMarker/red-circle.png",//如果是矢量点，则用该图标路径
         textField: "NAME",//参照字段
         font: 'bold 14px sans-serif'//字体相关
     };
     var styles = new LSGlobe.VectorTileStyleCollection([new LSGlobe.VectorTileStyle(oStyle)]);

     /*
     var style = new LSGlobe.VectorTileStyle({
             color: LSGlobe.Color.fromRandom().toCssColorString(),
             classificationField: 'height',//参照字段
             classificationFieldValue: [301, 400]//对应字段的数值区间
         });
     */
     //正常显示样式
     oShpImageLayer.styles = styles;
     //选种样式
     oShpImageLayer.selectedStyles = styles;//最好和正常样式有区别这样才能体现选中效果

     viewer.imageryLayers.addImageryProvider(oShpImageLayer);
     oShpImageLayer.maximumLevel=30;
     var rect = oShpImageLayer._rectangle;
     viewer.camera.flyTo({
         destination: rect
     });
 } catch (error) {
     console.log(`Error loading vector tiles: ${error}`);
 }

KML 加载

JavaScript

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

影像数据的预览

载 lrc 文件影像（Wish3D Earth 中的谷歌影像、天地图影像均采用该接口）

JavaScript

var oLrcImgPath = "lrc/google-satellite.lrc";//lrc文件路径
try {
     var oGoogleImg = await LSGlobe.LSImageryProvider.fromUrl(oLrcImgPath);
     oGoogleImg.name = "google";
     viewer.imageryLayers.addImageryProvider(oGoogleImg);
} catch (error){
     console.log(`Error loading imagery: ${error}`);
}

加载 tif 经过 earth 服务处理后的影像（Wish3D Earth 服务处理后的数据）

JavaScript


var imageryLayers = viewer.imageryLayers;
var imageLayer = new LSGlobe.LSImageryProvider({
    "url": jsonPath
})
currentImageLayer = imageLayer;
imageryLayers.addImageryProvider(imageLayer);
imageLayer.readyPromise.then(function (flag) {
    var rect = imageLayer.rectangle;
    viewer.camera.flyTo({
        destination: rect
    });
}).otherwise(function (error) {
    console.error(error)
});

设置影像贴贴模型（模型指的是实景三维模型）

Javascript


//tilset:实景三维模型对象，oImgery：影像图层对象
tilset.setOverlayImageLayer(oImgery);

地形数据的预览

JavaScript

var terrainLayers = viewer.terrainLayers;
try {
    var terrainLayer = await LSGlobe.LSTerrainProvider.fromUrl(jsonPath)
    terrainLayer.name = {
        "在加入到场景时添加一些字段来区分各种数据，预览时无需添加"
    }
    //地形加载到球中
    terrainLayers.addTerrainProvider(terrainLayer);
    var rect = terrainLayer.rectangle;
    //飞到地形数据的位置
    viewer.camera.flyTo({ destination: rect });
} catch (error) {
    console.log(`Error loading terrain: ${error}`);
}

实景三维数据的预览 ​

人工三维数据的预览 ​

矢量数据的预览 ​

影像数据的预览 ​

地形数据的预览 ​

实景三维数据的预览

人工三维数据的预览

矢量数据的预览

影像数据的预览

地形数据的预览