Hi!
I have a Cesium panel and I want to put a button at the top of it (see below).
When the user presses that button, the selected entity must be deleted.
To achieve that goal, I wrote this code:
<h1>My app</h1>
<div ng-show="authenticated">
<div id="cesiumContainer"></div>
<div id="toolbar"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer',
{
timeline: false,
animation: false,
sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
});
var center = Cesium.Cartesian3.fromDegrees(132.159633, 43.350116);
var heading = Cesium.Math.toRadians(0);
var pitch = Cesium.Math.toRadians(-40.0);
var range = 1000.0;
/**
* Adding the “Delete” button (start)
**/
var button = document.createElement(‘button’);
button.type = ‘button’;
button.className = ‘cesium-button’;
button.onclick = function() {
window.Sandcastle.reset();
window.Sandcastle.highlight(onclick);
onclick();
};
button.textContent = ‘Delete’;
document.getElementById(‘toolbar’).appendChild(button);
/**
* Adding the “Delete” button (end)
**/
var promise = Cesium.GeoJsonDataSource.load(‘http://localhost:8080/geojson’);
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var name = entity.name;
var color = Cesium.Color.RED;
if (typeof entity.polygon != "undefined") {
entity.polygon.material = color;
entity.polygon.outline = false;
entity.polygon.extrudedHeight = 10.;
}
}
}).otherwise(function(error){
console.log("alert " + error);
});
viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
</script>
</div>
<div ng-show="!authenticated">
<p>Please login.</p>
</div>
The part for adding the button is located between
/**
* Adding the "Delete" button (start)
**/
and
/**
* Adding the "Delete" button (end)
**/
The above file home.html is part of AngularJS system. It's embedded into index.html page, which looks like this:
<!doctype html>
<html>
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- 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>My app</title>
<link
href="css/angular-bootstrap.css"
rel="stylesheet">
<script src="js/Cesium/Cesium.js"></script>
<style>
@import url(js/Cesium/Widgets/widgets.css);
html, body {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
#cesiumContainer {
width: 70%; height: 70%;
}
</style>
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="hello" ng-cloak class="ng-cloak">
<div ng-controller="navigation" class="container">
<ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#/">home</a></li>
<li><a href="#/login">login</a></li>
<li ng-show="authenticated"><a href="" ng-click="logout()">logout</a></li>
</ul>
</div>
<div ng-view class="container"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/hello.js"></script>
</body>
</html>
But the code doesn't work - the "Delete" button does not appear at the top of the Cesium panel.
How can I modify that code in order for the button to appear inside the Cesium panel?
Thanks in advance
Dmitri Pisarenko