Skip to content

D
df-aggregator
Commit 6119bf8c by Corey Koval
Options

You can draw circles now. Prep for the future.

parent ff1eb6ed
Showing with 159 additions and 16 deletions
views/cesium.tpl
......@@ -42,8 +42,16 @@
}
var handler;
function hovercoords() {
var cartesian;
var cartographic
// var center_cartesian;
var rad_cartesian;
var center_lat;
var center_lon;
var radius;
// Pick the center point of a circle
function pickCenter(lat_element_id, radius_element_id, outlineColor) {
var entity = viewer.entities.add({
label: {
show: false,
......@@ -54,41 +62,123 @@
pixelOffset: new Cesium.Cartesian2(15, 0),
},
});
// Mouse over the globe to see the cartographic position
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
// Mouse over the globe to see the cartographic position
handler.setInputAction(function (movement) {
var cartesian = viewer.camera.pickEllipsoid(
cartesian = viewer.camera.pickEllipsoid(
movement.endPosition,
scene.globe.ellipsoid
);
cartographic = Cesium.Cartographic.fromCartesian(cartesian);
if (cartesian) {
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var longitudeString = Cesium.Math.toDegrees(
var center_lon = Cesium.Math.toDegrees(
cartographic.longitude
).toFixed(5);
var latitudeString = Cesium.Math.toDegrees(
var center_lat = Cesium.Math.toDegrees(
cartographic.latitude
).toFixed(5);
lat_element_id.value = center_lat + ", " + center_lon;
// lon_element_id.value = center_lon;
entity.position = cartesian;
entity.label.show = true;
entity.label.text =
"Lon: " +
(" " + longitudeString).slice(-10) +
(" " + center_lon).slice(-10) +
"\nLat: " +
(" " + latitudeString).slice(-10);
(" " + center_lat).slice(-10);
} else {
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function () {
clearHover();
pickRadius(radius_element_id, cartographic, outlineColor);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
//Stop pickng things
function clearHover() {
viewer.entities.removeAll();
handler = handler && handler.destroy();
};
//Pick the outside edge, radius, of a circle.
function pickRadius(radius_element_id, center_carto, outlineColor) {
var area;
var entity = viewer.entities.add({
label: {
show: false,
showBackground: true,
font: "14px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(15, 0),
},
});
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
rad_cartesian = viewer.camera.pickEllipsoid(
movement.endPosition,
scene.globe.ellipsoid
);
var center_lon = Cesium.Math.toDegrees(
center_carto.longitude
).toFixed(5);
var center_lat = Cesium.Math.toDegrees(
center_carto.latitude
).toFixed(5);
cartographic = Cesium.Cartographic.fromCartesian(rad_cartesian);
if (rad_cartesian) {
var ellipsoidGeodesic = new Cesium.EllipsoidGeodesic(center_carto, cartographic);
var distance = ellipsoidGeodesic.surfaceDistance.toFixed(1);
radius_element_id.value = distance;
entity.position = rad_cartesian;
entity.label.show = true;
entity.label.text = distance + " m";
circleGeometry = new Cesium.CircleOutlineGeometry({
center: Cesium.Cartesian3.fromDegrees(center_lon, center_lat),
radius: distance,
height: 0,
// vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
});
// Create a geometry instance using the circle geometry
// created above. Set the color attribute to a solid blue.
var areaSelectorInstance = new Cesium.GeometryInstance({
geometry: circleGeometry,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
outlineColor
),
},
});
// Add the geometry instance to primitives.
scene.primitives.remove(area);
area = scene.primitives.add(
new Cesium.Primitive({
geometryInstances: areaSelectorInstance,
appearance: new Cesium.PerInstanceColorAppearance({
closed: true,
translucent: false,
renderState: {
lineWidth: Math.min(3.0, scene.maximumAliasedLineWidth),
},
}),
})
);
} else {
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function () {
clearHover();
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
function updateParams(parameter) {
fetch("/update?"+parameter)
.then(function(response) {
......@@ -155,7 +245,7 @@
<input id="add_aoi" class="edit-checkbox add-icon" type="checkbox" style="width: 23px; height: 23px;"/>
<span id="add_aoi_icon" class="material-icons add-icon no-select">add_circle_outline</span>
<div style="visibility: hidden; height: 0;" id="new_aoi_div" style="padding: 0;">
<span id="new-aoi">Lat/Lon/Radius:</span>
<span id="new-aoi"></span>
</div>
</div>
<hr>
......@@ -165,7 +255,7 @@
<input id="add_exclusion" class="edit-checkbox add-icon" type="checkbox" style="width: 23px; height: 23px;"/>
<span id="add_exclusion_icon" class="material-icons add-icon no-select">add_circle_outline</span>
<div style="visibility: hidden; height: 0;" id="new_exclusion_div" style="padding: 0;">
<span id="new-exclusion">Lat/Lon/Radius:</span>
<span id="new-exclusion"></span>
</div>
</div>
<script>
......@@ -181,8 +271,8 @@
stationUrlHtml_new.value = "";
document.getElementById("new_rx_div").style.height = 'auto';
document.getElementById("new_rx_div").style.visibility = "visible";
document.getElementById("add_station_icon").innerHTML = "save";
document.getElementById("new_rx_div").style.padding = "5px";
document.getElementById("add_station_icon").innerHTML = "save";
} else {
var newrxurl = stationUrlHtml_new.value
if (newrxurl != "") {
......@@ -190,32 +280,85 @@
}
document.getElementById("new_rx_div").style.height = 0;
document.getElementById("new_rx_div").style.visibility = "hidden";
document.getElementById("add_station_icon").innerHTML = "add_circle_outline";
document.getElementById("new_rx_div").style.padding = "0";
document.getElementById("add_station_icon").innerHTML = "add_circle_outline";
}
}
var aoi_br = document.createElement("br");
var aoi_latlon_label = document.createTextNode("Lat, Lon:");
var aoi_lat_lon = document.createElement('input');
aoi_lat_lon.type = 'text';
aoi_lat_lon.id = 'aoi-new-latlon';
aoi_lat_lon.style.width = '300px';
var new_aoi = document.getElementById("new-aoi");
new_aoi.appendChild(aoi_latlon_label);
new_aoi.appendChild(aoi_lat_lon);
var aoi_radius_label = document.createTextNode("Radius:");
var aoi_radius = document.createElement('input');
aoi_radius.type = 'text';
aoi_radius.id = 'aoi-new-radius';
aoi_radius.style.width = '300px';
new_aoi.appendChild(aoi_br);
new_aoi.appendChild(aoi_radius_label);
new_aoi.appendChild(aoi_radius);
var add_aoi = document.getElementById("add_aoi"); //Button to add new RX
add_aoi.onchange = function() {
if (add_aoi.checked) {
clearHover();
document.getElementById("add_aoi_icon").innerHTML = "save";
hovercoords();
pickCenter(aoi_lat_lon, aoi_radius, Cesium.Color.BLUE);
aoi_lat_lon.value = "";
aoi_radius.value = "";
document.getElementById("new_aoi_div").style.height = 'auto';
document.getElementById("new_aoi_div").style.visibility = "visible";
document.getElementById("new_aoi_div").style.padding = "5px";
} else {
document.getElementById("new_aoi_div").style.height = 0;
document.getElementById("new_aoi_div").style.visibility = "hidden";
document.getElementById("new_aoi_div").style.padding = "0";
document.getElementById("add_aoi_icon").innerHTML = "add_circle_outline";
clearHover();
}
}
var exclusion_br = document.createElement("br");
var exclusion_latlon_label = document.createTextNode("Lat, Lon:");
var exclusion_lat_lon = document.createElement('input');
exclusion_lat_lon.type = 'text';
exclusion_lat_lon.id = 'exclusion-new-latlon';
exclusion_lat_lon.style.width = '300px';
var new_exclusion = document.getElementById("new-exclusion");
new_exclusion.appendChild(exclusion_latlon_label);
new_exclusion.appendChild(exclusion_lat_lon);
var exclusion_radius_label = document.createTextNode("Radius:");
var exclusion_radius = document.createElement('input');
exclusion_radius.type = 'text';
exclusion_radius.id = 'exclusion-new-radius';
exclusion_radius.style.width = '300px';
new_exclusion.appendChild(exclusion_br);
new_exclusion.appendChild(exclusion_radius_label);
new_exclusion.appendChild(exclusion_radius);
var add_exclusion = document.getElementById("add_exclusion"); //Button to add new RX
add_exclusion.onchange = function() {
if (add_exclusion.checked) {
clearHover();
document.getElementById("add_exclusion_icon").innerHTML = "save";
hovercoords();
pickCenter(exclusion_lat_lon, exclusion_radius, Cesium.Color.YELLOW);
exclusion_lat_lon.value = "";
exclusion_radius.value = "";
document.getElementById("new_exclusion_div").style.height = 'auto';
document.getElementById("new_exclusion_div").style.visibility = "visible";
document.getElementById("new_exclusion_div").style.padding = "5px";
} else {
document.getElementById("new_exclusion_div").style.height = 0;
document.getElementById("new_exclusion_div").style.visibility = "hidden";
document.getElementById("new_exclusion_div").style.padding = "0";
document.getElementById("add_exclusion_icon").innerHTML = "add_circle_outline";
clearHover();
}
}
</script>
</ul>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment