85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
<!--
|
||
* @Descripttion:
|
||
* @version: 1.0
|
||
* @Author: zhangti
|
||
* @Date: 2019-11-20 17:51:52
|
||
* @LastEditors : sueRimn
|
||
* @LastEditTime : 2020-01-13 15:10:56
|
||
-->
|
||
<!--
|
||
Format:https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer/tile/{z}/{y}/{x}
|
||
At first, I use HttpDebugger find this server, because ArcGIS Earth use this elevation3d server
|
||
Although it is height map form, in China, it is not easy to visit STK Terrain, it is also an appropriate solution.
|
||
Then I watched the tile content and the header is "CntZImage" which is the arcgis/lerc compression
|
||
Eventually, I create the ArcGisImageServerTerrainProvider class, so we can load thise terrain server easily, and you can download this file in Source/Core freely.
|
||
Note: ArcGIS HeightMap Terrain Server is WebMercatorTilingScheme.
|
||
There is a bug but I could not fix it without modifying the source code. For example, in level 13, I found some tiles have no height data,
|
||
the data is always 0, you can still request this tile. So, the state is TerrainState.RECEIVED
|
||
-->
|
||
<!DOCTYPE html>
|
||
<head>
|
||
<title>无人机</title>
|
||
<style>
|
||
html, body, #cesiumContainer {
|
||
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
|
||
}
|
||
.btn{
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 5px;
|
||
padding: 2px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!--
|
||
æ<><C3A6>述：cesiumç<6D>ƒ
|
||
-->
|
||
<div id="cesiumContainer"></div>
|
||
<div class="btn">
|
||
<button class="btn_01">初始化</button>
|
||
<button class="btn_02">开始飞行</button>
|
||
<button class="btn_03">暂停飞行</button>
|
||
<button class="btn_04">向前飞行</button>
|
||
<button class="btn_05">向后飞行</button>
|
||
<button class="btn_06">清除</button>
|
||
<button class="btn_07">top视角</button>
|
||
<button class="btn_08">跟随视角</button>
|
||
</div>
|
||
<script type="module">
|
||
import {CV} from '../3d/CV.js';
|
||
new CV.load('A',()=>{
|
||
let earth = new CV.Earth("cesiumContainer",{
|
||
imageryProvider:CV.TAG.BASELAYER.GOOGLEIMAGERY(),
|
||
skyBox : CV.TAG.SKYBOX.customStyle(),
|
||
infoBox: true
|
||
});
|
||
let fly = new CV.FlyPath(earth.core);
|
||
$(".btn_01").on('click',function(){
|
||
fly.initFly();
|
||
});
|
||
$(".btn_02").on('click',function(){
|
||
fly.startFly();
|
||
});
|
||
$(".btn_03").on('click',function(){
|
||
fly.pauseFly();
|
||
});
|
||
$(".btn_04").on('click',function(){
|
||
fly.flyForward();
|
||
});
|
||
$(".btn_05").on('click',function(){
|
||
fly.flyBack();
|
||
});
|
||
$(".btn_06").on('click',function(){
|
||
fly.removeFly();
|
||
});
|
||
$(".btn_07").on('click',function(){
|
||
fly.topView();
|
||
});
|
||
$(".btn_08").on('click',function(){
|
||
fly.aircraftView();
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body> |