Cesium - 從按鈕單擊事件添加數據源

我是Cesium（和JavaScript）的新手，我嘗試創建一個網頁，用戶可以在其中選擇KML文件，單擊加載按鈕並將KML加載到銫查看器。我現在已經設置了一個帶有硬編碼文件的測試頁面，但是當我點擊該按鈕時，它不會加載KML。我該如何做到這一點？這裏是我的代碼：Cesium - 從按鈕單擊事件添加數據源

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). --> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> 
    <!-- 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>Map Demo of Cesium</title> 
    <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script> 
    <style type="text/css"> 
     @import url(../Build/Cesium/Widgets/widgets.css); 
     html, body, #cesiumContainer { 
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; 
    </style> 
<script type="text/javascript"> 
function load_file() 
    cesiumContainer.viewer.dataSources.removeAll(); 
    cesiumContainer.viewer.dataSources.add(Cesium.KmlDataSource.load(../apps/SampleData/kml/MyData.kml'));   
</script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:Label ID="Label1" runat="server" Text="Label">Select a file for viewing:</asp:Label> 
     <br /> 
     <asp:DropDownList ID="DropDownList1" runat="server" Width="208px"> 
     </asp:DropDownList> 
     <br />  
     <asp:Button ID="Button1" runat="server" Text="View" OnClientClick ="load_file()" /> 
     <br /> 
     <br /> 
    </div> 
    <div id="cesiumContainer" ></div> 
    <script type="text/javascript" > 
    var viewer = new Cesium.Viewer('cesiumContainer', 
     {imageryProvider : new Cesium.ArcGisMapServerImageryProvider({ 
      url : '//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' 
     }), 

     baseLayerPicker : false, timeline : false, animation : false 
    }); 
var layers = viewer.imageryLayers; 
var blackMarble = layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({ 
     url : '//server.arcgisonline.com/ArcGIS/rest/services/reference/World_Boundaries_and_Places/MapServer' 
}));  

     viewer.homeButton.viewModel.command(); 

    viewer.camera.setView({position : Cesium.Cartesian3.fromDegrees(10.00, 45.0, 4500000.0)}); 


    </script>  
    </form> 
</body> 
</html>

來源

2015-07-10 jdixon

嘗試到目前爲止提供的答案後，仍然無法正常工作。它似乎在做的是每次單擊按鈕時重新創建查看器。因此，雖然它可能正在加載kml文件，但查看器的新實例正在將其擦除。我如何才能讓它只創建一次查看器，然後只在單擊按鈕時加載文件？ – jdixon

查看Cesium for Google Earth Developers的網站。 KML fetching example聽起來像它正是你所需要的。

來源

2015-07-10 15:33:31

請小心使用舊的ASP.NET頁面與像Cesium這樣的客戶端應用程序。 ASP.NET使用了很多可能會重新加載頁面的服務器交互，導致用戶在Cesium中失去自己的位置。 ASP.NET已經過時了，取而代之的是RAZOR和MVC，所以如果你剛開始學習微軟的各種網絡技術，你應該從那裏開始。

這就是說，如果你要修復上面的例子，試試這個：之前

在KML文件名
開始修復缺失報價移動LOAD_FILE功能到最底部，最後腳本標記的結尾
從load_file函數中的viewer引用中刪除cesiumContainer.前綴。

重新加載頁面並點擊F12以調出開發人員工具（Chrome，Firefox和IE11），然後查找控制檯選項卡中的任何其餘錯誤。

來源

2015-07-10 17:43:28 emackey

Cesium - 從按鈕單擊事件添加數據源

回答

相關問題