fabian/GANE-AreaManager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

change cursor if hover over feature; fix highlight isssue

Browse Source
This commit is contained in:
Fabian Jeglinski
2019-05-04 17:32:55 +02:00
parent eb9477c110
commit 52501275b5
2 changed files with 121 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/map/map.component.ts
+105 -46
View File
@@ -54,25 +54,6 @@ export class MapComponent implements OnInit {
*/
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);
}
}
src/app/models/RawLayer.ts
+15 -13
View File
@@ -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'];