关于编辑器:Cesium本地影像与地形服务发布

7次阅读

共计 3868 个字符，预计需要花费 10 分钟才能阅读完成。

举荐：将 NSDT 场景编辑器退出你的 3D 开发工具链。
1 数据切片
目前遥感影像及数字高程模型切片次要包含 gdal 和 ctb 两种形式，相应的开源工具包能够在 Cesium 交换群（QQ 群：115883691）中下载到。最近在进行 Cesium 本地影像与地形服务公布时，发现一款软件 Cesiumlab。Cesiumlab 是一款专为 Cesium 开源数字地球平台打造的收费数据处理工具集。目前蕴含地形数据处理、影像数据处理、点云数据处理、数据下载、建筑物矢量面解决、歪斜数据处理、三维场景 (max,maya) 解决、BIM 数据 (revit,ifc) 解决等工具。同时提供一套 java 开发的数据服务器。造成从数据处理、服务公布、到代码集成的残缺工具链。备注：Cesiumlab 能够解决 CGCS2000 和 WGS84 坐标系数据，可借助 ArcGIS 实现。

1.1 影像解决

1.2 地形解决

2 Web 应用服务器装置与配置
2.1 Tomcat 装置及配置
Tomcat 装置、配置与应用
Tomcat 装置及配置教程
Tomcat 解决跨域问题
2.2 IIS 装置及配置
win7 零碎要怎么装置和配置信息服务（IIS）
Win10 IIS Web 服务器装置与配置
CORS .net 跨域解决方案
IIS 配置反对跨域申请
3 本地影像与地形服务公布
Cesium 本地影像与地形服务公布的文件目录如下图所示，image_tiles 与 terrain_tiles 别离为 DOM 切片数据和 DEM 切片数据。

test_Cesium.html 源码如下：
<!DOCTYPE html>
<html lang=”en”>
<head>
<!– Use correct character set. –>
<meta charset=”utf-8″>
<!– Tell IE to use the latest, best version. –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<!– Make the application on mobile take up the full browser screen and disable user scaling. –>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”>
<title>Cesium 本地影像与地形服务公布 </title>
<script src=”Cesium-1.5.1/Build/Cesium/Cesium.js”></script>
<link href=”Cesium-1.5.1/Build/Cesium/Widgets/widgets.css” rel=”stylesheet”>
</head>
<body>
<div id=”cesiumContainer”></div>
<script src=”tiles.js”></script>
</body>
</html>
tiles.js 源码如下：
// 加载天地图在线地图

var tdtImagerLayerProvider = new Cesium.WebMapTileServiceImageryProvider({

url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatibleg",
show: true,
credit: new Cesium.Credit("天地图寰球影像服务"),
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tilingScheme: new Cesium.WebMercatorTilingScheme(),
maximumLevel: 18

});

// 加载本地影像数据
/*
var imageryProvider = new Cesium.UrlTemplateImageryProvider({

url: "http://localhost:8888/image_tiles/{z}/{x}/{y}.png",
tilingScheme: new Cesium.WebMercatorTilingScheme(),
fileExtension: 'png',
minimumLevel: 0,
maximumLevel: 20

});
*/
// 跨域操作 -Cesiumlab 影像服务
/*
var imageryProvider = new Cesium.UrlTemplateImageryProvider({

url: 'http://localhost:9002/api/wmts/gettile/931e1757c93743199219badb10a2e0df/{z}/{x}/{y}',
tilingScheme: new Cesium.WebMercatorTilingScheme(),
minimumLevel: 0,
maximumLevel: 20,
credit: 'http://www.bjxbsj.cn',

}, {

show: true

});
*/

// 加载本地地形数据

var terrainLayer = new Cesium.CesiumTerrainProvider({

url: "http://localhost:8888/terrain_tiles",
// 申请照明
requestVertexNormals: true,
// 申请水波纹成果
requestWaterMask: true

});
// 查看器
var viewer = new Cesium.Viewer(‘cesiumContainer’, {

// 须要进行可视化的数据源汇合
imageryProvider: tdtImagerLayerProvider,
terrainProvider: terrainLayer,

});

// 新增测试图层
var layers = viewer.scene.imageryLayers;
var showTest = layers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({

url: "http://localhost:8888/image_tiles/{z}/{x}/{y}.png",
tilingScheme: new Cesium.WebMercatorTilingScheme(),
fileExtension: 'png',
minimumLevel: 0,
maximumLevel: 20

}));

// 设置边界矩形框
// 设定矩形框左上及右下点的经纬度坐标
var rectangle = new Cesium.Rectangle(Cesium.Math.toRadians(xx1), Cesium.Math.toRadians(yy1),
Cesium.Math.toRadians(xx2), Cesium.Math.toRadians(yy1));

// 视图切换到指定区域
viewer.scene.camera.flyTo({destination: rectangle});
web.config 源码如下：

<?xml version=”1.0″ encoding=”UTF-8″?>
<configuration>
<system.webServer>

<directoryBrowse enabled="true" />
<staticContent>
  <mimeMap fileExtension=".terrain" mimeType="application/vnd.quantized-mesh" />
  <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Headers" value="Content-Type, api_key, Authorization" />
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>

</system.webServer>
<system.web>

<compilation debug="true" />

</system.web>
</configuration>
4 参考资料
CesiumLab 地形解决成绩在 Tomcat 和 IIS 上公布
Cesium 中地形数据的加载
Cesium 官网教程 4– 影像图层
Cesium 官网教程 5– 地形图层
Cesium: 局域网离线影像及瓦片影像地图加载
Cesium 加载几种离线和在线地图
Cesium 离线切片地图服务器搭建和代码实现
Sign up for more like this.

正文完