From 52501275b53642f21f1dcb304a4fe5afc49ebdcc Mon Sep 17 00:00:00 2001 From: Fabian Jeglinski Date: Sat, 4 May 2019 17:32:55 +0200 Subject: [PATCH] change cursor if hover over feature; fix highlight isssue --- src/app/map/map.component.ts | 153 ++++++++++++++++++++++++----------- src/app/models/RawLayer.ts | 28 ++++--- 2 files changed, 121 insertions(+), 60 deletions(-) diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index 3d8068c..d486189 100644 --- a/src/app/map/map.component.ts +++ b/src/app/map/map.component.ts @@ -53,26 +53,7 @@ export class MapComponent implements OnInit { * The properties of the current feature. The current layer is the layer beneath the cursor. */ public currentFeatureInfo: any; - - public propertyMockData = JSON.parse('{\n' + - '\t"FL": "345",\n' + - '\t"FLST_LABEL": "93\\/0",\n' + - '\t"FLAECHE_HA": 0.19303757998400001,\n' + - '\t"FBID": "DEHBEE0433450039",\n' + - '\t"FELDBL_NR": "043345-0039",\n' + - '\t"BESCHRIFT": "?",\n' + - '\t"NUTZER": "?",\n' + - '\t"TEILRAUM": "Blockland - Waller Feldmark",\n' + - '\t"BAUM17Code": "-",\n' + - '\t"B_AUM_2017": "-",\n' + - '\t"Parz_Code": "-",\n' + - '\t"Nutzung": "Grünland",\n' + - '\t"Nat_schutz": "-",\n' + - '\t"Gebiet": "Blockland",\n' + - '\t"Thema": "Informationen Agrarflächen",\n' + - '\t"Flurstck": "Flst. 345: 93\\/0"\n' + - '}'); - + /** * A simple cache to save styles */ @@ -91,6 +72,7 @@ export class MapComponent implements OnInit { this.initBaseLayer(); this.initLayerGroup(); this.initMap(); + this.addMockData(); } /** @@ -153,9 +135,11 @@ export class MapComponent implements OnInit { const pixel = this.map.getEventPixel(evt.originalEvent); const features = this.map.getFeaturesAtPixel(pixel); if (features && features.length > 0) { + this.map.getTargetElement().style.cursor = 'pointer'; this.displayFeatureInfo(features[0]); this.highlightFeature(features[0]); } else { + this.map.getTargetElement().style.cursor = ''; // reapply original style to last highlighted feature if (this.featureCache['lastHighlighted']) { this.featureCache['lastHighlighted'].setStyle(this.styleCache['lastHighlightedStyle']); @@ -172,39 +156,18 @@ export class MapComponent implements OnInit { const pixel = this.map.getEventPixel(evt.originalEvent); const features = this.map.getFeaturesAtPixel(pixel); - // TODO - // check which of these are better? - // Both seems to remove style after click was undo - - if (features && features.length > 0) { - // deselect feature that was selected before if (this.featureCache['selectedFeature']) { + // use lastHighlightedStyle because the original style is saved there this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']); - this.styleCache['lastHighlightedStyle'] = null; + // this.styleCache['lastHighlightedStyle'] = null; this.featureCache['selectedFeature'] = null; - } else { + } else if (features && features.length > 0) { + this.map.getTargetElement().style.cursor = ''; this.displayFeatureInfo(features[0]); this.featureCache['selectedFeature'] = features[0]; + this.featureCache['lastHighlighted'] = null; features[0].setStyle(this.styleCache['defaultSelected']); } - } else if (this.featureCache['selectedFeature']) { - // use lastHighlightedStyle because the original style is saved there - this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']); - this.styleCache['lastHighlightedStyle'] = null; - this.featureCache['selectedFeature'] = null; - } - - // if (this.featureCache['selectedFeature']) { - // // use lastHighlightedStyle because the original style is saved there - // this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']); - // this.styleCache['lastHighlightedStyle'] = null; - // this.featureCache['selectedFeature'] = null; - // } else if (features && features.length > 0) { - // this.displayFeatureInfo(features[0]); - // this.featureCache['selectedFeature'] = features[0]; - // features[0].setStyle(this.styleCache['defaultSelected']); - // } - // }); }); } @@ -235,7 +198,6 @@ export class MapComponent implements OnInit { feature.setStyle(this.styleCache['defaultHighlight']); } - /** * Opens a dialog to create a new custom layer */ @@ -337,4 +299,101 @@ export class MapComponent implements OnInit { }) } + /** + * DeBUG DEBUG DBEUG + */ + private addMockData() { + const data = { + "type": "FeatureCollection", + "name": "background", + "crs": { + "type": "name", + "properties": { + "name": "urn:ogc:def:crs:OGC:1.3:CRS84" + } + }, + "features": [{ + "type": "Feature", + "properties": { + "name": "Layer 1" + }, + "geometry": { + "type": "MultiPolygon", + "coordinates": [ + [ + [ + [8.801864395832126, 53.14770721254275], + [8.806370506977146, 53.14770721254275], + [8.806542168354099, 53.14500456859233], + [8.80203605720908, 53.14521049030746] + ] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "Layer 2" + }, + "geometry": { + "type": "MultiPolygon", + "coordinates": [ + [ + [ + [8.807787400997881, 53.1477644198588], + [8.808044893063311, 53.145010298994144], + [8.813452226437335, 53.145010298994144], + [8.813194734371905, 53.1477644198588] + ] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "Layer 3" + }, + "geometry": { + "type": "MultiPolygon", + "coordinates": [ + [ + [ + [8.80207966021419, 53.14392919393571], + [8.802122575558428, 53.138780701270434], + [8.80632827929378, 53.13896090893504], + [8.806542856014971, 53.14410938000193] + ] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "name": "Layer 4" + }, + "geometry": { + "type": "MultiPolygon", + "coordinates": [ + [ + [ + [8.808654874418039, 53.143631496039035], + [8.809770673368234, 53.1391523112723], + [8.816036313627023, 53.13930677369489], + [8.8156071601846, 53.14352853151957] + ] + ] + ] + } + } + ] + }; + const rawLayer = new RawLayer('Mock Data Layer', JSON.stringify(data)); + rawLayer.saveDefaultColor([125,125,125]) + const customLayer = RawLayer.toVectorLayer(rawLayer); + this.centerLayerOnMap(customLayer); + this.customLayerCollection.push(customLayer); + } } diff --git a/src/app/models/RawLayer.ts b/src/app/models/RawLayer.ts index 174454d..5014325 100644 --- a/src/app/models/RawLayer.ts +++ b/src/app/models/RawLayer.ts @@ -7,6 +7,7 @@ import Stroke from 'ol/style/Stroke'; import Fill from 'ol/style/Fill'; import {Config} from "../misc/Config"; import {Feature} from 'ol/Feature'; + /** * Represents a raw (not processed) map layer */ @@ -47,18 +48,19 @@ export class RawLayer { // TODO // determine if this feature has a own color! If so, do not apply default color and use own color. const featureProperties = feature.getProperties(); - const strokeColor = featureProperties[Config.GEO_JSON_PREFIX]['default-style-stroke']; - const fillColor = featureProperties[Config.GEO_JSON_PREFIX]['default-style-fill']; - - feature.setStyle(new Style({ - stroke: new Stroke({ - color: strokeColor, - width: 1 - }), - fill: new Fill({ - color: fillColor - }) - })); + if (featureProperties[Config.GEO_JSON_PREFIX] && featureProperties[Config.GEO_JSON_PREFIX]['default-style-stroke']) { + const strokeColor = featureProperties[Config.GEO_JSON_PREFIX]['default-style-stroke']; + const fillColor = featureProperties[Config.GEO_JSON_PREFIX]['default-style-fill']; + feature.setStyle(new Style({ + stroke: new Stroke({ + color: strokeColor, + width: 1 + }), + fill: new Fill({ + color: fillColor + }) + })); + } }) // add features to source @@ -90,7 +92,7 @@ export class RawLayer { /** * Reads the default color property from geoJSON */ - public getDefaultColor(): number[]{ + public getDefaultColor(): number[] { const features = RawLayer.geoJSONToFeatures(this.data); const featureProperties = features[0].getProperties(); return featureProperties[Config.GEO_JSON_PREFIX]['default-style-stroke'];