세슘지도 각도 대 면도기

Question

나는 클라이언트 측과 서버가있는 C#을 사용하여 웹 응용 프로그램을 구축 중입니다. 나는 세슘지도를 사용하고 있습니다. 나는이 자료에 익숙하지 않고 약간 혼란 스럽다. 세슘이 웹 API와 각도로 구현 될 수 있는지 말해 줄 수 있습니까? 아니면 면도기에 있어야합니까? 중요합니까?

감사합니다.

Answer 1

당신도이 질문을 우리 메일 링리스트에서 물었습니다. 그러나 비슷한 질문이있는 경우에 대해서도 여기에 답변하고 싶습니다.

나도 잘 모르겠지만 세슘 자체에 관한 한 중요하지 않습니다. 세슘은 툴킷과 서버에 무관심합니다. 당신이 사용하는 툴킷이나 서버 기술은 상관하지 않으며 모든 툴킷이나 서버 기술로 작업 할 수 있습니다.

Answer 2

매트는 정확합니다. 원하는 프레임 워크를 사용하십시오. 장단점을 배우려면 시간이 필요합니다. Cases 위젯이 내장 된 Razor 템플릿을 만들 수 있습니다. (그런 앱을 직접 만들었습니다.) 페이지에서 다른 곳으로 이동하면 위젯이 할당 취소되어 사용자가 "자리를 잃어 버렸습니다" 지도에. AngularJS 나는 일한 적이 없지만 Cesium이 자체 UI 연결에 사용하는 Knockout과 비슷합니다. 이런 종류의 클라이언트 측 UI 연결은 페이지를 탐색하여 멀리 이동하지 않고도 위젯이나 그 내용을 조작하는 컨트롤을 가질 경우 유용합니다.

EDIT : 프레임 워크가 공존 할 수 있음을 보여주기 위해 세슘 글로브 앞쪽에 Angular "TODO"데모 앱 샘플을 추가했습니다.

var viewer = new Cesium.Viewer('cesiumContainer', { 
 
    navigationHelpButton: false, animation: false, timeline: false 
 
}); 
 

 
angular.module('todoApp', []) 
 
.controller('TodoListController', function() { 
 
    var todoList = this; 
 
    todoList.todos = [ 
 
    {text:'learn angular', done:true}, 
 
    {text:'build an angular app', done:false}]; 
 

 
    todoList.addTodo = function() { 
 
    todoList.todos.push({text:todoList.todoText, done:false}); 
 
    todoList.todoText = ''; 
 
    }; 
 

 
    todoList.remaining = function() { 
 
    var count = 0; 
 
    angular.forEach(todoList.todos, function(todo) { 
 
     count += todo.done ? 0 : 1; 
 
    }); 
 
    return count; 
 
    }; 
 

 
    todoList.archive = function() { 
 
    var oldTodos = todoList.todos; 
 
    todoList.todos = []; 
 
    angular.forEach(oldTodos, function(todo) { 
 
     if (!todo.done) { todoList.todos.push(todo); } 
 
    }); 
 
    }; 
 
});

html, body, #cesiumContainer { 
 
    position: absolute; top: 0; left: 0; 
 
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; 
 
    font-family: sans-serif; 
 
} 
 
.done-true { 
 
    text-decoration: line-through; 
 
    color: grey; 
 
} 
 
.controls { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 8px; 
 
    background-color: rgba(42, 42, 42, 0.7); 
 
    padding: 5px 8px; 
 
    color: #edffff; 
 
}

<script src="http://cesiumjs.org/releases/1.16/Build/Cesium/Cesium.js"></script> 
 
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<link href="http://cesiumjs.org/releases/1.16/Build/Cesium/Widgets/widgets.css" 
 
      rel="stylesheet"/> 
 
<div id="cesiumContainer"></div> 
 
<div class="controls" ng-app="todoApp"> 
 
    <h2>AngularJS Todo</h2> 
 
    <div ng-controller="TodoListController as todoList"> 
 
    <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> 
 
    [ <a href="" ng-click="todoList.archive()">archive</a> ] 
 
    <ul class="unstyled"> 
 
     <li ng-repeat="todo in todoList.todos"> 
 
     <input type="checkbox" ng-model="todo.done"> 
 
     <span class="done-{{todo.done}}">{{todo.text}}</span> 
 
     </li> 
 
    </ul> 
 
    <form ng-submit="todoList.addTodo()"> 
 
     <input type="text" ng-model="todoList.todoText" size="30" 
 
      placeholder="add new todo here"> 
 
     <input class="btn-primary" type="submit" value="add"> 
 
    </form> 
 
    </div> 
 
</div>