基於Cesium的移動端三維開發問題總結

Cesium現在越來越火，基於他的網頁版開發也是非常的多，技術也相對成熟些，但是移動端的開發相對就少了很多，因爲項目需要，需要將web端的相關功能移植到移動端來.，期間遇到了很多的坑，總結一下，包括以下幾點：

1.離線數據加載和讀取；

2.classification的問題；

3.鼠標繪製移動端解決方法。

以上幾個問題有的已經解決，有的目前沒有找到解決方案，只能換個方案實現。

1.離線數據加載和讀取

之所以使用移動端，很大一部分原因是需要到外業操作，因此，在線訪問的方法存在很多問題，即使走移動流量，也是一筆很大開銷，而且數據加載速度也會非常的慢，因此最好的方法就是將三維數據和相關數據放在平板的SD卡中。

爲了減少代碼開發量，移動端也是選擇html/css,js開發， 開發平臺選擇HBuilder。

將已經寫好的web端代碼，移植到HBuilder工程中，在需要訪問數據地址的代碼中，外圍添加如下代碼：

var sdPath;
mui.plusReady(function(){
	sdPath = dataPath();
    /*你的代碼實現*/
});

function dataPath(){
	 
	// 導入android.os.Environment類對象
	var environment = plus.android.importClass("android.os.Environment");
	// 判斷SD卡是否插入
	if(environment.getExternalStorageState() !== environment.MEDIA_MOUNTED){
		plus.nativeUI.toast('沒有找到SD卡');
		return;
	}
	console.log("獲取 Android 數據目錄:"+environment.getDataDirectory());
	console.log("獲取 Android 下載/緩存內容目錄:"+environment.getDownloadCacheDirectory());
	console.log("獲取外部存儲目錄即 SDCard:"+environment.getExternalStorageDirectory());
	console.log("獲取外部存儲設備的當前狀態:"+environment.getExternalStorageState());
	//console.log("獲取 Android 的根目錄:"+getRootDirectory());
	return environment.getExternalStorageDirectory();
}

這樣，你就可以訪問到平板SD卡中的數據了。

2.classification的問題

classification能夠實現圖形貼地、貼模型的效果,是一個非常實用的功能，classificationType用來描述是否只貼地形（ClassificationType.TERRAIN），或者只貼3dtiles數據（ClassificationType.CESIUM_3D_TILE），或者二者都貼（ClassificationType.BOTH）。

在pc瀏覽器端，這個功能是非常容易實現的，官網例子很多：

https://sandcastle.cesium.com/?src=3D%20Tiles%20Photogrammetry%20Classification.html

https://sandcastle.cesium.com/?src=Classification%20Types.html

https://sandcastle.cesium.com/?src=Classification.html

這幾個都是官網提供的示例。

但是在移動端就出現了問題，有些平板能夠實現此效果，有些平板卻不能實現，目前我在華爲平板和三星平板上做的測試，華爲平板不能顯示classification效果，三星的可以。爲了能讓程序在更多平板運行，只能退而求其次，用polygon拉伸盒子效果顯示了。

3.鼠標繪製移動端解決方法

pc端Cesium鼠標操作，有ScreenSpaceEventType，

但是移動端的只有三個操作，PINCH_END，PINCH_MOVE，PINCH_START，對於畫圖各種操作，還是不能滿足，因此只能添加一個button，當需要繪製完成時，點擊button，完成繪製。

目前移動端開發遇到的幾個問題就是這幾個，後續再更新！