<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example52-production</title>
<script data-require="lodash.js@*" data-semver="3.8.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
<script src="http://stepplus.co.il/images/svg2png.js"></script>
<link rel="stylesheet" href="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Widgets/widgets.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="cesiumApp">
<div ng-controller="appCtrl as appCtrl">
<div cesium-directive="" id="cesium1" class="cesiumContainer"></div>
</div>
<script src="app.js"></script>
</body>
</html>
"use strict";
angular.module('cesiumApp', [])
.directive('cesiumDirective', function($interval, $timeout){
return {
restrict: "EA",
controllerAs: "cesiumCtrl",
scope: {
data: "="
},
controller: function($scope){
},
link: function(scope, element, attr, ctrl){
var vm = ctrl;
vm.viewer = new Cesium.Viewer(element[0], {
baseLayerPicker: false,
homeButton: false,
sceneModePicker: false,
navigationHelpButton: false
});
var scene = vm.viewer.scene;
function disableCameraMotion(state){
vm.viewer.scene.screenSpaceCameraController.enableRotate = state;
vm.viewer.scene.screenSpaceCameraController.enableZoom = state;
vm.viewer.scene.screenSpaceCameraController.enableLook = state;
vm.viewer.scene.screenSpaceCameraController.enableTilt = state;
vm.viewer.scene.screenSpaceCameraController.enableTranslate = state;
}
function moveEllipse(){
var position = Cesium.Cartesian3.fromDegrees(-115.0, 37.0);
var positionCBP = function(){
return position;
};
var myEllipse = vm.viewer.entities.add({
name : 'Red Ellipse on surface',
position: new Cesium.CallbackProperty(positionCBP, false),
ellipse : {
semiMajorAxis: 50000,
semiMinorAxis: 50000
}
});
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(click) {
var pickedObject = scene.pick(click.position);
if (Cesium.defined(pickedObject) && pickedObject.id === myEllipse){
vm.picked = true;
disableCameraMotion(false);
console.log('here');
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function(movement) {
// move the myEllipse around
//console.log('Start: (' + movement.startPosition.x + ',' + movement.startPosition.y + '). End: (' + movement.endPosition.x + ',' + movement.endPosition.y +')');
if (!vm.picked){
return;
}
position = vm.viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function(movement) {
// if picked
vm.picked = false;
disableCameraMotion(true);
}, Cesium.ScreenSpaceEventType.LEFT_UP);
vm.viewer.zoomTo(vm.viewer.entities);
}
moveEllipse();
function movePolygon(){
var positions = Cesium.Cartesian3.fromDegreesArray([
-115.0, 37.0,
-115.0, 32.0,
-107.0, 33.0,
-102.0, 31.0,
-102.0, 35.0]);
var positionCBP = function(){
return positions;
};
var myPolygon = vm.viewer.entities.add({
name : 'Red polygon',
polygon : {
hierarchy: new Cesium.CallbackProperty(positionCBP, false),
material: Cesium.Color.RED
}
});
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(click) {
var pickedObject = scene.pick(click.position);
if (Cesium.defined(pickedObject) && pickedObject.id === myPolygon){
vm.pickedPolygon = true;
disableCameraMotion(false);
console.log('here');
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function(movement) {
// move the myEllipse around
if (!vm.pickedPolygon){
return;
}
var endPoint = vm.viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
var startPoint = vm.viewer.camera.pickEllipsoid(movement.startPosition, scene.globe.ellipsoid);
var distances = {
x: endPoint.x-startPoint.x,
y: endPoint.y-startPoint.y,
z: endPoint.z-startPoint.z
};
positions.forEach(function(position){
position.x += distances.x;
position.y += distances.y;
position.z += distances.z;
});
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function(movement) {
// if picked
vm.pickedPolygon = false;
disableCameraMotion(true);
}, Cesium.ScreenSpaceEventType.LEFT_UP);
vm.viewer.zoomTo(vm.viewer.entities);
}
movePolygon();
}
};
})
.controller('appCtrl', ['$scope', function($scope) {
}])
.cesiumContainer{
height: 50%;
width: 100%;
}