铯-从按钮单击事件添加数据源

Cesium - add datasource from a button click event

本文关键字：事件 添加 数据源 单击 按钮      更新时间：2023-09-26

我是Cesium(和JavaScript)的新手，我正在尝试创建一个用户可以选择KML文件的网页，单击加载按钮，并将KML加载到Cesium查看器中。我现在已经设置了一个带有硬编码文件的测试页面，但是当我单击按钮时，它不会加载KML。我该如何做到这一点?下面是我的代码:

<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>

查看Cesium for Google Earth Developers网站。这个KML抓取示例听起来正是您所需要的。

小心使用旧的ASP。. NET页面与客户端繁重的应用程序，如Cesium。ASP。NET使用了大量的服务器交互，这些交互可能会重新加载页面，从而导致用户失去他们在铯中的位置。ASP。. NET已经过时了，被RAZOR和MVC所取代，所以如果你刚刚开始学习微软的各种网络技术，你应该从那里开始。

也就是说，如果你想修复上面的例子，试试这个:

  • 修复KML文件名
    • 开头缺少的引号
  • 将load_file函数移到最底部，就在最后一个脚本标签结束之前
  • 删除load_file函数中两个viewer引用的cesiumContainer.前缀。

重新加载页面并按F12调出开发人员工具(Chrome, Firefox和IE11)，然后在控制台选项卡中查找任何剩余的错误。

相关文章：