change cursor if hover over feature; fix highlight isssue
This commit is contained in:
Fabian Jeglinski
+108
-49
@@ -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']) {
|
||||
this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']);
|
||||
this.styleCache['lastHighlightedStyle'] = null;
|
||||
this.featureCache['selectedFeature'] = null;
|
||||
} else {
|
||||
this.displayFeatureInfo(features[0]);
|
||||
this.featureCache['selectedFeature'] = features[0];
|
||||
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']);
|
||||
// }
|
||||
// });
|
||||
this.featureCache['selectedFeature'] = null;
|
||||
} 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']);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,9 +48,9 @@ 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();
|
||||
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,
|
||||
@@ -59,6 +60,7 @@ export class RawLayer {
|
||||
color: fillColor
|
||||
})
|
||||
}));
|
||||
}
|
||||
})
|
||||
|
||||
// add features to source
|
||||
|
||||
Reference in New Issue
Block a user