-
+
{{ message.key }}: {{ message.value }} (see console)
-
+
-
+
@@ -172,6 +186,10 @@ import {coreLib} from "./wasm";
Press Esc to quit without saving
+
+
@@ -195,8 +213,11 @@ export class MapPanelComponent {
savedStyleDataSubscription: Subscription = new Subscription();
dataWasModified: boolean = false;
- osmEnabled: boolean;
- osmOpacityValue: number;
+ osmEnabled: boolean = true;
+ osmOpacityValue: number = 30;
+
+ @ViewChild('menu') toggleMenu!: Menu;
+ toggleMenuItems: MenuItem[] | undefined;
@ViewChild('styleUploader') styleUploader: FileUpload | undefined;
@ViewChild('editorDialog') editorDialog: Dialog | undefined;
@@ -204,21 +225,137 @@ export class MapPanelComponent {
constructor(public mapService: MapService,
private messageService: InfoMessageService,
public styleService: StyleService,
- public parameterService: ParametersService) {
- this.osmEnabled = this.parameterService.osmEnabled.getValue();
- this.osmOpacityValue = this.parameterService.osmOpacityValue.getValue();
+ public parameterService: ParametersService,
+ private sidePanelService: SidePanelService)
+ {
+ this.parameterService.parameters.subscribe(parameters => {
+ this.osmEnabled = parameters.osm;
+ this.osmOpacityValue = parameters.osmOpacity;
+ });
this.mapService.maps.subscribe(
mapItems => this.mapItems = mapItems
);
+ this.sidePanelService.observable().subscribe(activePanel => {
+ if (activePanel != SidePanelState.MAPS) {
+ this.layerDialogVisible = false;
+ }
+ })
+ }
+
+ get osmOpacityString(): string {
+ return 'Opacity: ' + this.osmOpacityValue;
+ }
+
+ showStylesToggleMenu(event: MouseEvent, styleId: string) {
+ this.toggleMenu.toggle(event);
+ this.toggleMenuItems = [
+ {
+ label: 'Toggle All off but This',
+ command: () => {
+ for (const id of this.styleService.styleData.keys()) {
+ this.styleService.styleData.get(id)!.enabled = styleId == id;
+ this.parameterService.setStyleConfig(id, styleId == id);
+ }
+ this.styleService.reapplyAllStyles();
+ this.mapService.update();
+ }
+ },
+ {
+ label: 'Toggle All on but This',
+ command: () => {
+ for (const id of this.styleService.styleData.keys()) {
+ this.styleService.styleData.get(id)!.enabled = styleId != id;
+ this.parameterService.setStyleConfig(id, styleId != id);
+ }
+ this.styleService.reapplyAllStyles();
+ this.mapService.update();
+ }
+ },
+ {
+ label: 'Toggle All Off',
+ command: () => {
+ for (const id of this.styleService.styleData.keys()) {
+ this.styleService.styleData.get(id)!.enabled = false;
+ this.parameterService.setStyleConfig(id, false);
+ }
+ this.styleService.reapplyAllStyles();
+ this.mapService.update();
+ }
+ },
+ {
+ label: 'Toggle All On',
+ command: () => {
+ for (const id of this.styleService.styleData.keys()) {
+ this.styleService.styleData.get(id)!.enabled = true;
+ this.parameterService.setStyleConfig(id, true);
+ }
+ this.styleService.reapplyAllStyles();
+ this.mapService.update();
+ }
+ }
+ ];
+ }
+
+ showLayersToggleMenu(event: MouseEvent, mapName: string, layerName: string) {
+ this.toggleMenu.toggle(event);
+ this.toggleMenuItems = [
+ {
+ label: 'Toggle All off but This',
+ command: () => {
+ if (this.mapItems.has(mapName)) {
+ for (const id of this.mapItems.get(mapName)!.layers.keys()!) {
+ this.mapItems.get(mapName)!.layers.get(id)!.visible = id == layerName;
+ this.toggleLayer(mapName, layerName);
+ }
+ }
+ }
+ },
+ {
+ label: 'Toggle All on but This',
+ command: () => {
+ if (this.mapItems.has(mapName)) {
+ for (const id of this.mapItems.get(mapName)!.layers.keys()!) {
+ this.mapItems.get(mapName)!.layers.get(id)!.visible = id != layerName;
+ this.toggleLayer(mapName, layerName);
+ }
+ }
+ }
+ },
+ {
+ label: 'Toggle All Off',
+ command: () => {
+ if (this.mapItems.has(mapName)) {
+ for (const id of this.mapItems.get(mapName)!.layers.keys()!) {
+ this.mapItems.get(mapName)!.layers.get(id)!.visible = false;
+ this.toggleLayer(mapName, layerName);
+ }
+ }
+ }
+ },
+ {
+ label: 'Toggle All On',
+ command: () => {
+ if (this.mapItems.has(mapName)) {
+ for (const id of this.mapItems.get(mapName)!.layers.keys()!) {
+ this.mapItems.get(mapName)!.layers.get(id)!.visible = true;
+ this.toggleLayer(mapName, layerName);
+ }
+ }
+ }
+ }
+ ];
}
showLayerDialog() {
this.layerDialogVisible = !this.layerDialogVisible;
+ if (this.layerDialogVisible) {
+ this.sidePanelService.panel = SidePanelState.MAPS;
+ }
}
focus(tileId: bigint, event: any) {
event.stopPropagation();
- this.mapService.zoomToWgs84PositionTopic.next(
+ this.mapService.moveToWgs84PositionTopic.next(
coreLib.getTilePosition(BigInt(tileId))
);
}
@@ -229,25 +366,23 @@ export class MapPanelComponent {
toggleOSMOverlay() {
this.osmEnabled = !this.osmEnabled;
- this.parameterService.osmEnabled.next(this.osmEnabled);
this.updateOSMOverlay();
}
updateOSMOverlay() {
- if (this.parameterService.osmEnabled.getValue()) {
- this.parameterService.osmOpacityValue.next(this.osmOpacityValue);
- } else {
- this.parameterService.osmOpacityValue.next(0);
- }
const parameters = this.parameterService.parameters.getValue();
if (parameters) {
- parameters.osmEnabled = this.osmEnabled;
+ parameters.osm = this.osmEnabled;
parameters.osmOpacity = this.osmOpacityValue;
this.parameterService.parameters.next(parameters);
}
}
- toggleLayer(mapName: string, layerName: string) {
+ toggleTileBorders(mapName: string, layerName: string) {
+ this.mapService.toggleLayerTileBorderVisibility(mapName, layerName);
+ }
+
+ toggleLayer(mapName: string, layerName: string = "") {
this.mapService.toggleMapLayerVisibility(mapName, layerName);
}
@@ -284,7 +419,7 @@ export class MapPanelComponent {
})
.catch((error) => {
this.messageService.showError(`Error occurred while trying to import style: ${styleId}`);
- console.log(error);
+ console.error(error);
});
}
}
diff --git a/erdblick_app/app/map.service.ts b/erdblick_app/app/map.service.ts
index ba17dd44..0de11cdd 100644
--- a/erdblick_app/app/map.service.ts
+++ b/erdblick_app/app/map.service.ts
@@ -1,12 +1,14 @@
import {Injectable} from "@angular/core";
import {Fetch} from "./fetch.model";
-import {FeatureTile} from "./features.model";
+import {FeatureTile, FeatureWrapper} from "./features.model";
import {coreLib, uint8ArrayToWasm} from "./wasm";
import {TileVisualization} from "./visualization.model";
import {BehaviorSubject, Subject} from "rxjs";
import {ErdblickStyle, StyleService} from "./style.service";
-import {FeatureLayerStyle, TileLayerParser} from '../../build/libs/core/erdblick-core';
+import {FeatureLayerStyle, TileLayerParser, Feature} from '../../build/libs/core/erdblick-core';
import {ParametersService} from "./parameters.service";
+import {SidePanelService, SidePanelState} from "./sidepanel.service";
+import {InfoMessageService} from "./info.service";
export interface LayerInfoItem extends Object {
canRead: boolean;
@@ -19,6 +21,7 @@ export interface LayerInfoItem extends Object {
zoomLevels: Array
;
level: number;
visible: boolean;
+ tileBorders: boolean;
}
export interface MapInfoItem extends Object {
@@ -28,6 +31,8 @@ export interface MapInfoItem extends Object {
maxParallelJobs: number;
nodeId: string;
protocolVersion: {major: number, minor: number, patch: number};
+ addOn: boolean;
+ visible: boolean;
}
const infoUrl = "/sources";
@@ -58,8 +63,7 @@ type ViewportProperties = {
export class MapService {
public maps: BehaviorSubject> = new BehaviorSubject>(new Map());
-
- private loadedTileLayers: Map;
+ public loadedTileLayers: Map;
private visualizedTileLayers: Map;
private currentFetch: any;
private currentViewport: ViewportProperties;
@@ -67,14 +71,29 @@ export class MapService {
private currentHighDetailTileIds: Set;
private tileStreamParsingQueue: any[];
private tileVisualizationQueue: [string, TileVisualization][];
+ private selectionVisualizations: TileVisualization[];
tileParser: TileLayerParser|null = null;
tileVisualizationTopic: Subject;
tileVisualizationDestructionTopic: Subject;
- zoomToWgs84PositionTopic: Subject;
+ moveToWgs84PositionTopic: Subject<{x: number, y: number}>;
allViewportTileIds: Map = new Map();
-
- constructor(public styleService: StyleService, public parameterService: ParametersService) {
+ selectionTopic: BehaviorSubject = new BehaviorSubject(null);
+ selectionTileRequest: {
+ remoteRequest: {
+ mapId: string,
+ layerId: string,
+ tileIds: Array
+ },
+ tileKey: string,
+ resolve: null|((tile: FeatureTile)=>void),
+ reject: null|((why: any)=>void),
+ }|null = null;
+
+ constructor(public styleService: StyleService,
+ public parameterService: ParametersService,
+ private sidePanelService: SidePanelService,
+ private messageService: InfoMessageService) {
this.loadedTileLayers = new Map();
this.visualizedTileLayers = new Map();
this.currentFetch = null;
@@ -91,6 +110,7 @@ export class MapService {
this.currentHighDetailTileIds = new Set();
this.tileStreamParsingQueue = [];
this.tileVisualizationQueue = [];
+ this.selectionVisualizations = [];
// Triggered when a tile layer is freshly rendered and should be added to the frontend.
this.tileVisualizationTopic = new Subject(); // {FeatureTile}
@@ -99,7 +119,7 @@ export class MapService {
this.tileVisualizationDestructionTopic = new Subject(); // {FeatureTile}
// Triggered when the user requests to zoom to a map layer.
- this.zoomToWgs84PositionTopic = new Subject(); // {.x,.y}
+ this.moveToWgs84PositionTopic = new Subject<{x: number, y: number}>();
}
public async initialize() {
@@ -119,7 +139,7 @@ export class MapService {
});
this.styleService.styleAddedForId.subscribe(styleId => {
this.visualizedTileLayers.set(styleId, []);
- for (let [_, tileLayer] of this.loadedTileLayers.entries()) {
+ for (let [_, tileLayer] of this.loadedTileLayers) {
this.renderTileLayer(tileLayer, this.styleService.styleData.get(styleId)!, styleId);
}
});
@@ -136,6 +156,31 @@ export class MapService {
})
await this.reloadDataSources();
+
+ this.selectionTopic.subscribe(selectedFeatureWrapper => {
+ this.selectionVisualizations.forEach(visu => this.tileVisualizationDestructionTopic.next(visu));
+ this.selectionVisualizations = [];
+
+ if (this.sidePanelService.panel != SidePanelState.FEATURESEARCH) {
+ this.sidePanelService.panel = SidePanelState.NONE;
+ }
+ if (!selectedFeatureWrapper)
+ return;
+
+ // Apply additional highlight styles.
+ for (let [_, styleData] of this.styleService.styleData) {
+ if (styleData.featureLayerStyle && styleData.enabled) {
+ let visu = new TileVisualization(
+ selectedFeatureWrapper!.featureTile,
+ (tileKey: string)=>this.getFeatureTile(tileKey),
+ styleData.featureLayerStyle,
+ true,
+ selectedFeatureWrapper.peek((f: Feature) => f.id()));
+ this.tileVisualizationTopic.next(visu);
+ this.selectionVisualizations.push(visu);
+ }
+ }
+ });
}
private processTileStream() {
@@ -209,19 +254,25 @@ export class MapService {
}, infoBuffer);
})
.withJsonCallback((result: Array) => {
- let mapLayerLevels = new Array<[string, number]>();
- let maps = new Map(result.map(mapInfo => {
+ let mapLayerLevels = new Array<[string, number, boolean, boolean]>();
+ let maps = new Map(result.filter(m => !m.addOn).map(mapInfo => {
let layers = new Map();
let defCoverage = [0n];
for (let [layerId, layerInfo] of Object.entries(mapInfo.layers)) {
if (layerInfo.coverage.length == 0) {
layerInfo.coverage = defCoverage;
}
- [layerInfo.visible, layerInfo.level] = this.parameterService.mapLayerConfig(mapInfo.mapId, layerId, 13);
- mapLayerLevels.push([mapInfo.mapId + '/' + layerId, 13]);
+ [layerInfo.visible, layerInfo.level, layerInfo.tileBorders] = this.parameterService.mapLayerConfig(mapInfo.mapId, layerId, 13);
+ mapLayerLevels.push([
+ mapInfo.mapId + '/' + layerId,
+ layerInfo.level,
+ layerInfo.visible,
+ layerInfo.tileBorders
+ ]);
layers.set(layerId, layerInfo);
}
mapInfo.layers = layers;
+ mapInfo.visible = true;
return [mapInfo.mapId, mapInfo];
}));
this.maps.next(maps);
@@ -234,10 +285,6 @@ export class MapService {
});
}
- ///////////////////////////////////////////////////////////////////////////
- // MAP UPDATE CONTROLS //
- ///////////////////////////////////////////////////////////////////////////
-
getMapLayerVisibility(mapId: string, layerId: string) {
const mapItem = this.maps.getValue().get(mapId);
if (!mapItem)
@@ -245,17 +292,35 @@ export class MapService {
return mapItem.layers.has(layerId) ? mapItem.layers.get(layerId)!.visible : false;
}
- toggleMapLayerVisibility(mapId: string, layerId: string, visible: boolean|undefined=undefined) {
+ toggleMapLayerVisibility(mapId: string, layerId: string) {
+ const mapItem = this.maps.getValue().get(mapId);
+ if (mapItem === undefined) {
+ return;
+ }
+ if (layerId) {
+ const layer = mapItem.layers.get(layerId);
+ if (layer !== undefined) {
+ this.parameterService.setMapLayerConfig(mapId, layerId, layer.level, layer.visible, layer.tileBorders);
+ }
+ } else {
+ mapItem.layers.forEach(layer => {
+ this.parameterService.setMapLayerConfig(mapId, layer.layerId, layer.level, mapItem.visible, layer.tileBorders);
+ });
+ }
+ this.update();
+ }
+
+ toggleLayerTileBorderVisibility(mapId: string, layerId: string) {
const mapItem = this.maps.getValue().get(mapId);
if (!mapItem)
return;
if (mapItem.layers.has(layerId)) {
- visible = visible !== undefined ? visible : !mapItem.layers.get(layerId)!.visible;
- mapItem.layers.get(layerId)!.visible = visible;
- this.parameterService.setMapLayerConfig(
- mapId, layerId, mapItem.layers.get(layerId)!.level, mapItem.layers.get(layerId)!.visible);
+ const layer = mapItem.layers.get(layerId)!;
+ const hasTileBorders = !layer.tileBorders;
+ mapItem.layers.get(layerId)!.tileBorders = hasTileBorders;
+ this.parameterService.setMapLayerConfig(mapId, layerId, layer.level, layer.visible, hasTileBorders);
+ this.update();
}
- this.update();
}
setMapLayerLevel(mapId: string, layerId: string, level: number) {
@@ -263,9 +328,8 @@ export class MapService {
if (!mapItem)
return;
if (mapItem.layers.has(layerId)) {
- mapItem.layers.get(layerId)!.level = level;
- this.parameterService.setMapLayerConfig(
- mapId, layerId, mapItem.layers.get(layerId)!.level, mapItem.layers.get(layerId)!.visible);
+ const layer = mapItem.layers.get(layerId)!;
+ this.parameterService.setMapLayerConfig(mapId, layerId, level, layer.visible, layer.tileBorders);
}
this.update();
}
@@ -283,18 +347,25 @@ export class MapService {
return mapItem.layers.has(layerId) ? mapItem.layers.get(layerId)!.level : 13;
}
- update() {
- console.log("Update")
+ getMapLayerBorderState(mapId: string, layerId: string) {
+ const mapItem = this.maps.getValue().get(mapId);
+ if (!mapItem) {
+ return false;
+ }
+ return mapItem.layers.has(layerId) ? mapItem.layers.get(layerId)!.tileBorders : false;
+ }
+ update() {
// Get the tile IDs for the current viewport.
this.currentVisibleTileIds = new Set();
this.currentHighDetailTileIds = new Set();
- // Map from level to array of tileIds
+ // Map from level to array of tileIds.
let tileIdPerLevel = new Map>();
for (let level of this.allLevels()) {
if (!tileIdPerLevel.has(level)) {
const allViewportTileIds = coreLib.getTileIds(
- this.currentViewport, level,
+ this.currentViewport,
+ level,
this.parameterService.parameters.getValue().tilesLoadLimit) as bigint[];
tileIdPerLevel.set(level, allViewportTileIds);
this.currentVisibleTileIds = new Set([
@@ -311,9 +382,13 @@ export class MapService {
// Evict present non-required tile layers.
let newTileLayers = new Map();
+ let evictTileLayer = (tileLayer: FeatureTile) => {
+ return !tileLayer.preventCulling && (!this.currentVisibleTileIds.has(tileLayer.tileId) ||
+ !this.getMapLayerVisibility(tileLayer.mapName, tileLayer.layerName) ||
+ tileLayer.level() != this.getMapLayerLevel(tileLayer.mapName, tileLayer.layerName))
+ }
for (let tileLayer of this.loadedTileLayers.values()) {
- if (!tileLayer.preventCulling && (!this.currentVisibleTileIds.has(tileLayer.tileId) ||
- !this.getMapLayerVisibility(tileLayer.mapName, tileLayer.layerName))) {
+ if (evictTileLayer(tileLayer)) {
tileLayer.destroy();
} else {
newTileLayers.set(tileLayer.id, tileLayer);
@@ -321,11 +396,12 @@ export class MapService {
}
this.loadedTileLayers = newTileLayers;
- // Update visualizations
+ // Update visualizations.
for (const styleId of this.visualizedTileLayers.keys()) {
const tileVisus = this.visualizedTileLayers.get(styleId)?.filter(tileVisu => {
- if (!tileVisu.tile.preventCulling && (!this.currentVisibleTileIds.has(tileVisu.tile.tileId) ||
- !this.getMapLayerVisibility(tileVisu.tile.mapName, tileVisu.tile.layerName))) {
+ const mapName = tileVisu.tile.mapName;
+ const layerName = tileVisu.tile.layerName;
+ if (tileVisu.tile.disposed) {
this.tileVisualizationDestructionTopic.next(tileVisu);
return false;
}
@@ -337,17 +413,18 @@ export class MapService {
this.tileVisualizationDestructionTopic.next(tileVisu);
return false;
}
+ tileVisu.showTileBorder = this.getMapLayerBorderState(mapName, layerName);
tileVisu.isHighDetail = this.currentHighDetailTileIds.has(tileVisu.tile.tileId) || tileVisu.tile.preventCulling;
return true;
});
- if (tileVisus !== undefined && tileVisus.length) {
+ if (tileVisus && tileVisus.length) {
this.visualizedTileLayers.set(styleId, tileVisus);
} else {
this.visualizedTileLayers.delete(styleId);
}
}
- // Update Tile Visualization Queue
+ // Update Tile Visualization Queue.
this.tileVisualizationQueue = [];
for (const [styleId, tileVisus] of this.visualizedTileLayers) {
tileVisus.forEach(tileVisu => {
@@ -360,6 +437,16 @@ export class MapService {
// Request non-present required tile layers.
// TODO: Consider tile TTL.
let requests = [];
+ if (this.selectionTileRequest) {
+ requests.push(this.selectionTileRequest.remoteRequest);
+
+ if (this.currentFetch) {
+ // Disable the re-fetch filtering logic by setting the old
+ // fetches' body to null.
+ this.currentFetch.bodyJson = null;
+ }
+ }
+
for (const [mapName, map] of this.maps.getValue()) {
for (const [layerName, _] of map.layers) {
if (!this.getMapLayerVisibility(mapName, layerName)) {
@@ -429,6 +516,12 @@ export class MapService {
addTileFeatureLayer(tileLayerBlob: any, style: ErdblickStyle | null, styleId: string, preventCulling: any) {
let tileLayer = new FeatureTile(this.tileParser!, tileLayerBlob, preventCulling);
+ // Consider, if this tile is a selection tile request.
+ if (this.selectionTileRequest && tileLayer.id == this.selectionTileRequest.tileKey) {
+ this.selectionTileRequest.resolve!(tileLayer);
+ this.selectionTileRequest = null;
+ }
+
// Don't add a tile that is not supposed to be visible.
if (!preventCulling) {
if (!this.currentVisibleTileIds.has(tileLayer.tileId))
@@ -484,11 +577,15 @@ export class MapService {
if ((style as ErdblickStyle).enabled !== undefined && !(style as ErdblickStyle).enabled) {
return;
}
+ const mapName = tileLayer.mapName;
+ const layerName = tileLayer.layerName;
let visu = new TileVisualization(
tileLayer,
(tileKey: string)=>this.getFeatureTile(tileKey),
wasmStyle,
- tileLayer.preventCulling || this.currentHighDetailTileIds.has(tileLayer.tileId));
+ tileLayer.preventCulling || this.currentHighDetailTileIds.has(tileLayer.tileId),
+ "",
+ this.getMapLayerBorderState(mapName, layerName));
this.tileVisualizationQueue.push([styleId, visu]);
if (this.visualizedTileLayers.has(styleId)) {
this.visualizedTileLayers.get(styleId)?.push(visu);
@@ -505,4 +602,53 @@ export class MapService {
getFeatureTile(tileKey: string): FeatureTile|null {
return this.loadedTileLayers.get(tileKey) || null;
}
+
+ async loadTileForSelection(tileKey: string) {
+ if (this.loadedTileLayers.has(tileKey)) {
+ return this.loadedTileLayers.get(tileKey)!;
+ }
+
+ let [mapId, layerId, tileId] = coreLib.parseTileFeatureLayerKey(tileKey);
+ this.selectionTileRequest = {
+ remoteRequest: {
+ mapId: mapId,
+ layerId: layerId,
+ tileIds: [Number(tileId)],
+ },
+ tileKey: tileKey,
+ resolve: null,
+ reject: null,
+ }
+
+ let selectionTilePromise = new Promise((resolve, reject)=>{
+ this.selectionTileRequest!.resolve = resolve;
+ this.selectionTileRequest!.reject = reject;
+ })
+
+ this.update();
+ return selectionTilePromise;
+ }
+
+ async selectFeature(tileKey: string, typeId: string, idParts: Array, focus: boolean=false) {
+ let tile = await this.loadTileForSelection(tileKey);
+ let feature = new FeatureWrapper(
+ tile.peek(layer => layer.findFeatureIndex(typeId, idParts)),
+ tile);
+ if (feature.index < 0) {
+ let [mapId, layerId, tileId] = coreLib.parseTileFeatureLayerKey(tileKey);
+ this.messageService.showError(
+ `The feature ${typeId+idParts.map((val, n)=>((n%2)==1?val:".")).join("")}`+
+ `does not exist in the ${layerId} layer of tile ${tileId} of map ${mapId}.`);
+ return;
+ }
+ this.selectionTopic.next(feature);
+ if (focus) {
+ this.focusOnFeature(feature);
+ }
+ }
+
+ focusOnFeature(feature: FeatureWrapper) {
+ const position = feature.peek((parsedFeature: Feature) => parsedFeature.center());
+ this.moveToWgs84PositionTopic.next(position);
+ }
}
diff --git a/erdblick_app/app/parameters.service.ts b/erdblick_app/app/parameters.service.ts
index 158c0f21..ab63cc88 100644
--- a/erdblick_app/app/parameters.service.ts
+++ b/erdblick_app/app/parameters.service.ts
@@ -1,21 +1,25 @@
import {Injectable} from "@angular/core";
-import {BehaviorSubject} from "rxjs";
-import {Cartesian3, Cartographic, Math, Camera} from "./cesium";
+import {BehaviorSubject, Subject} from "rxjs";
+import {Cartesian3, Cartographic, CesiumMath, Camera} from "./cesium";
import {Params, Router} from "@angular/router";
export const MAX_NUM_TILES_TO_LOAD = 2048;
export const MAX_NUM_TILES_TO_VISUALIZE = 512;
interface ErdblickParameters extends Record {
+ marker: boolean,
+ markedPosition: Array,
+ markedPositionLabels: Array,
+ selected: Array,
heading: number,
pitch: number,
roll: number,
lon: number,
lat: number,
alt: number,
+ osm: boolean,
osmOpacity: number,
- osmEnabled: boolean,
- layers: Array<[string, number]>,
+ layers: Array<[string, number, boolean, boolean]>,
styles: Array,
tilesLoadLimit: number,
tilesVisualizeLimit: number
@@ -31,6 +35,26 @@ interface ParameterDescriptor {
}
const erdblickParameters: Record = {
+ marker: {
+ converter: val => val === 'true',
+ validator: val => typeof val === 'boolean',
+ default: false
+ },
+ markedPosition: {
+ converter: val => JSON.parse(val),
+ validator: val => Array.isArray(val) && val.every(item => typeof item === 'number'),
+ default: []
+ },
+ markedPositionLabels: {
+ converter: val => JSON.parse(val),
+ validator: val => Array.isArray(val) && val.every(item => typeof item === 'string'),
+ default: []
+ },
+ selected: {
+ converter: val => JSON.parse(val),
+ validator: val => Array.isArray(val) && val.every(item => typeof item === 'string'),
+ default: []
+ },
heading: {
converter: Number,
validator: val => typeof val === 'number' && !isNaN(val),
@@ -66,14 +90,14 @@ const erdblickParameters: Record = {
validator: val => typeof val === 'number' && !isNaN(val) && val >= 0 && val <= 100,
default: 30
},
- osmEnabled: {
+ osm: {
converter: val => val === 'true',
validator: val => typeof val === 'boolean',
default: true
},
layers: {
converter: val => JSON.parse(val),
- validator: val => Array.isArray(val) && val.every(item => Array.isArray(item) && item.length === 2 && typeof item[0] === 'string' && typeof item[1] === 'number'),
+ validator: val => Array.isArray(val) && val.every(item => Array.isArray(item) && item.length === 4 && typeof item[0] === 'string' && typeof item[1] === 'number' && typeof item[2] === 'boolean' && typeof item[3] === 'boolean'),
default: []
},
styles: {
@@ -96,11 +120,10 @@ const erdblickParameters: Record = {
@Injectable({providedIn: 'root'})
export class ParametersService {
+ private _replaceUrl: boolean = true;
parameters: BehaviorSubject;
initialQueryParamsSet: boolean = false;
- osmEnabled: BehaviorSubject = new BehaviorSubject(true);
- osmOpacityValue: BehaviorSubject = new BehaviorSubject(30);
cameraViewData: BehaviorSubject<{destination: Cartesian3, orientation: {heading: number, pitch: number, roll: number}}> =
new BehaviorSubject<{destination: Cartesian3, orientation: {heading: number, pitch: number, roll: number}}>({
destination: Cartesian3.fromDegrees(22.837473, 38.490817, 16000000),
@@ -122,11 +145,17 @@ export class ParametersService {
});
}
+ get replaceUrl() {
+ const currentValue = this._replaceUrl;
+ this._replaceUrl = true;
+ return currentValue;
+ }
+
p() {
return this.parameters.getValue();
}
- setInitialMapLayers(layers: Array<[string, number]>) {
+ setInitialMapLayers(layers: Array<[string, number, boolean, boolean]>) {
// Only set map layers, if there are no configured values yet.
if (this.p().layers.length) {
return;
@@ -144,25 +173,57 @@ export class ParametersService {
this.parameters.next(this.p());
}
- mapLayerConfig(mapId: string, layerId: string, fallbackLevel: number): [boolean, number] {
- const conf = this.p().layers.find(ml => ml[0] == mapId+"/"+layerId);
- if (conf) {
- return [true, conf[1]];
+ setSelectedFeature(mapId: string, featureId: string) {
+ const currentSelection = this.p().selected;
+ if (currentSelection && (currentSelection[0] != mapId || currentSelection[1] != featureId)) {
+ this.p().selected = [mapId, featureId];
+ this._replaceUrl = false;
+ this.parameters.next(this.p());
}
- return [!this.p().layers.length, fallbackLevel];
}
- setMapLayerConfig(mapId: string, layerId: string, level: number, visible: boolean) {
- let mapLayer = mapId+"/"+layerId;
- let conf = this.p().layers.find(val => val[0] == mapLayer);
- if (conf && visible) {
- conf[1] = level;
+ unsetSelectedFeature() {
+ this.p().selected = [];
+ this.parameters.next(this.p());
+ }
+
+ setMarkerState(enabled: boolean) {
+ this.p().marker = enabled;
+ if (enabled) {
+ this.parameters.next(this.p());
+ } else {
+ this.setMarkerPosition(null);
+ }
+ }
+
+ setMarkerPosition(position: Cartographic | null) {
+ if (position) {
+ const longitude = CesiumMath.toDegrees(position.longitude);
+ const latitude = CesiumMath.toDegrees(position.latitude);
+ this.p().markedPosition = [longitude, latitude];
+ } else {
+ this.p().markedPosition = [];
}
- else if (conf) {
- this.p().layers = this.p().layers.filter(val => val[0] !== mapLayer);
+ this.parameters.next(this.p());
+ }
+
+ mapLayerConfig(mapId: string, layerId: string, fallbackLevel: number): [boolean, number, boolean] {
+ const conf = this.p().layers.find(ml => ml[0] == mapId+"/"+layerId);
+ if (conf !== undefined && conf[2]) {
+ return [true, conf[1], conf[3]];
}
- else if (visible) {
- this.p().layers.push([mapLayer, level]);
+ return [!this.p().layers.length, fallbackLevel, false];
+ }
+
+ setMapLayerConfig(mapId: string, layerId: string, level: number, visible: boolean, tileBorders: boolean) {
+ let mapLayerName = mapId+"/"+layerId;
+ let conf = this.p().layers.find(val => val[0] == mapLayerName);
+ if (conf !== undefined) {
+ conf[1] = level;
+ conf[2] = visible;
+ conf[3] = tileBorders;
+ } else if (visible) {
+ this.p().layers.push([mapLayerName, level, visible, tileBorders]);
}
this.parameters.next(this.p());
}
@@ -181,13 +242,9 @@ export class ParametersService {
}
setCameraState(camera: Camera) {
- const currentPositionCartographic = Cartographic.fromCartesian(
- Cartesian3.fromElements(
- camera.position.x, camera.position.y, camera.position.z
- )
- );
- this.p().lon = Math.toDegrees(currentPositionCartographic.longitude);
- this.p().lat = Math.toDegrees(currentPositionCartographic.latitude);
+ const currentPositionCartographic = Cartographic.fromCartesian(camera.position);
+ this.p().lon = CesiumMath.toDegrees(currentPositionCartographic.longitude);
+ this.p().lat = CesiumMath.toDegrees(currentPositionCartographic.latitude);
this.p().alt = currentPositionCartographic.height;
this.p().heading = camera.heading;
this.p().pitch = camera.pitch;
@@ -224,8 +281,7 @@ export class ParametersService {
console.warn(`Invalid query param ${params[key]} for ${key}, using default.`);
updatedParameters[key] = descriptor.default;
}
- }
- catch (e) {
+ } catch (e) {
console.warn(`Invalid query param ${params[key]} for ${key}, using default.`);
updatedParameters[key] = descriptor.default;
}
diff --git a/erdblick_app/app/preferences.component.ts b/erdblick_app/app/preferences.component.ts
index 673bebdd..5efc81b3 100644
--- a/erdblick_app/app/preferences.component.ts
+++ b/erdblick_app/app/preferences.component.ts
@@ -41,7 +41,7 @@ import {MAX_NUM_TILES_TO_LOAD, MAX_NUM_TILES_TO_VISUALIZE, ParametersService} fr