mirror of
https://github.com/ConnectedHumber/Air-Quality-Web
synced 2024-12-26 11:05:01 +00:00
Work on the voronoi overlay some more
We still need to write some masty rendering code, and lots of other connecting glue
This commit is contained in:
parent
6513530b41
commit
278adb8468
4 changed files with 49 additions and 12 deletions
|
@ -3,15 +3,19 @@
|
|||
// Import leaflet, but some plugins require it to have the variable name 'L' :-/
|
||||
import L from 'leaflet';
|
||||
import 'leaflet-fullscreen';
|
||||
import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.src.withlog.js';
|
||||
// import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.src.withlog.js';
|
||||
|
||||
import Config from './Config.mjs';
|
||||
import LayerDeviceMarkers from './LayerDeviceMarkers.mjs';
|
||||
import LayerHeatmap from './LayerHeatmap.mjs';
|
||||
import LayerHeatmapGlue from './LayerHeatmapGlue.mjs';
|
||||
import VoronoiOverlay from './Overlay/VoronoiOverlay.mjs';
|
||||
// import LayerHeatmap from './LayerHeatmap.mjs';
|
||||
// import LayerHeatmapGlue from './LayerHeatmapGlue.mjs';
|
||||
import DeviceData from './DeviceData.mjs';
|
||||
import UI from './UI.mjs';
|
||||
|
||||
import VoronoiCell from './Overlay/VoronoiCell.mjs';
|
||||
import Vector2 from './Helpers/Vector2.mjs';
|
||||
|
||||
class MapManager {
|
||||
constructor() {
|
||||
console.log(Config);
|
||||
|
@ -53,16 +57,27 @@ class MapManager {
|
|||
.then(this.setup_layer_control.bind(this));
|
||||
|
||||
// Add the heatmap
|
||||
console.info("[map] Loading heatmap....");
|
||||
this.setup_heatmap()
|
||||
.then(() => console.info("[map] Heatmap loaded successfully."))
|
||||
// ...and the time dimension
|
||||
.then(this.setup_time_dimension.bind(this))
|
||||
.then(() => console.info("[map] Time dimension initialised."));
|
||||
// console.info("[map] Loading heatmap....");
|
||||
// this.setup_heatmap()
|
||||
// .then(() => console.info("[map] Heatmap loaded successfully."))
|
||||
// // ...and the time dimension
|
||||
// .then(this.setup_time_dimension.bind(this))
|
||||
// .then(() => console.info("[map] Time dimension initialised."));
|
||||
|
||||
this.ui = new UI(Config, this);
|
||||
this.ui.setup().then(() => console.log("[map] Settings initialised."));
|
||||
|
||||
this.setup_overlay();
|
||||
}
|
||||
|
||||
setup_overlay() {
|
||||
this.overlay = new VoronoiOverlay();
|
||||
this.overlay.addCells(
|
||||
new VoronoiCell(new Vector2(100, 100)),
|
||||
new VoronoiCell(new Vector2(100, 200)),
|
||||
new VoronoiCell(new Vector2(75, 100)),
|
||||
new VoronoiCell(new Vector2(50, 50))
|
||||
);
|
||||
let svg = this.overlay.render();
|
||||
}
|
||||
|
||||
setup_time_dimension() {
|
||||
|
@ -121,7 +136,7 @@ class MapManager {
|
|||
}, { // Overlay(s)
|
||||
"Devices": this.device_markers.layer,
|
||||
// TODO: Have 1 heatmap layer per reading type?
|
||||
"Heatmap": this.heatmap.layer
|
||||
// "Heatmap": this.heatmap.layer
|
||||
}, { // Options
|
||||
|
||||
});
|
||||
|
|
16
client_src/js/Overlay/VoronoiCell.mjs
Normal file
16
client_src/js/Overlay/VoronoiCell.mjs
Normal file
|
@ -0,0 +1,16 @@
|
|||
"use strict";
|
||||
|
||||
import Vector2 from '../Helpers/Vector2.mjs';
|
||||
|
||||
/**
|
||||
* Represents a single Voronoi diagram cell.
|
||||
* @param {Vector2} point The point at which the cell is located.
|
||||
*/
|
||||
class VoronoiCell {
|
||||
constructor(in_point) {
|
||||
this.point = in_point;
|
||||
this.def = null;
|
||||
}
|
||||
}
|
||||
|
||||
export default VoronoiCell;
|
|
@ -60,6 +60,12 @@ class VoronoiOverlay {
|
|||
console.log(VoronoiOverlay.diagram);
|
||||
|
||||
// TODO: Map the generated polygons back onto this.cells
|
||||
for(let their_cell of VoronoiOverlay.diagram.cells) {
|
||||
let our_cell = this.cells.find((el) => el.point.x == their_cell.site.x && el.point.y == their_cell.site.y);
|
||||
our_cell.def = their_cell;
|
||||
}
|
||||
|
||||
console.log(this.cells);
|
||||
|
||||
this.svg = new SvgWriter();
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
"use strict";
|
||||
|
||||
import '../css/main.css';
|
||||
import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css';
|
||||
// import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css';
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
|
|
Loading…
Reference in a new issue