Docs con4gis-Maps
Entwicklerschnittstellen
Generelle Informationen
con4gis-Maps bietet die Möglichkeit, eigene JavaScript-Funktionen als "hooks", die die Funktionalität von Maps modifizieren, einzubinden.
Einen neuen Hook zu con4gis-Maps hinzufügen
Um einen neuen Hook zu Maps hinzuzufügen muss die Funktion
import {utils} from "./c4g-maps-utils";
utils.callHookFunctions(window.c4gMapsHooks."hook_name", params);
aufgerufen werden.
Hooks sollten als Array im Object window.c4gMapsHooks vorliegen. Die Parameter unterscheiden sich zwischen den Hooks.
Hook Layer
Dieser Hook wird nach dem Laden der Layer vom Server ausgeführt. Als Parameter wird dieser LayerService als Referenz übergeben.
Somit kannst Du bestehende Layer modifizieren und/oder weitere Layer hinzufügen.
Dieses Snippet ist eigener Code, der über eigenen JavaScript-Code des Seitenlayouts ausgeführt werden kann:
<script>
window.c4gMapsHooks = window.c4gMapsHooks || {};
window.c4gMapsHooks.hook_layer = []; /* Zuerst wird gesichert, dass das Object mit den Hooks sowie das Array für den spezifischen Hook vorhanden ist */
var hookFunction = function(data) {
data.config.countAll++; /* Hochzählen des Zählers der Layer, da ein Layer hinzugefügt wird */
data.layer.push({
activeForBaselayers: 'all', /* Zeige den Layer nur für spezifische Baselayer (Array von Ids). Bei 'all' wird der Layer immer angezeigt */
content: [
{
data: { /* Valides GeoJSON*/
geometry: {
coordinates: [9.5, 52],
type: 'Point'
},
type: 'Feature',
properties: {
graphicTitle: "TestHook",
projection: "EPSG:4326",
popup: {
async: false,
content: '<ul><li class="name">TestHook</li><li class="type">Test</li><li class="description"><p>This is a test.</p></li></ul>' /* HTML mit dem, dass Popup gefüllt werden soll */
},
tooltip: "TestHook" /* Tooltip, der beim Hovern über die Lokation angezeigt werden soll */
}
},
type: "GeoJSON",
id: 9999, /* IDs sollten einmalig sein */
locationStyle: "1" /* Hier solltest Du die ID eines passenden Lokationsstils einfügen. */
}
],
childs: [
/* Hier kannst du ein Array von passenden Kindern des Layers in der gleichen Struktur einfügen. */
],
childsCount: 0, /* Zum Array von Kindern passendern Zähler */
display: true, /* Hierüber kannst du festlegen, ob der Layer initial dargestellt werden soll. */
id: 9999, /* IDs sollten einmalig sein */
name: "TestHook",
noFilter: "", /* Layer vom Filter im Starboard ausnehmen. */
noRealFilter: false, /* Layer vom Karten-Filter ausnehmen. */
type: "GeoJSON"
});
};
window.c4gMapsHooks.hook_layer.push(hookFunction); /* Füge den Hook dem Array hinzu: */
</script>Hook Map Zoom
Dieser Hook wird ausgeführt, wenn in der Karte gezoomt wird. Als Parameter wird der Proxy übergeben.
Hiermit ist der Zugriff auf sämtliche Funktionen von Maps möglich. Unter proxy.options.mapController.map besteht auch der Zugriff auf die ol/Map.
Dieses Beispiel verhindert das Reinzoomen über die Zoom-Stufe 15 hinaus.
<script>
window.c4gMapsHooks = window.c4gMapsHooks || {};
window.c4gMapsHooks.hook_map_zoom = window.c4gMapsHooks.hook_map_zoom || [];
window.c4gMapsHooks.hook_map_zoom.push(function (proxy) {
var view = proxy.options.mapController.map.getView();
if (view.getZoom() > 15) {
view.setZoom(15);
}
});
</script>Hook Map Click
Dieser Hook wird ausgeführt, wenn in die Karte geklickt wird. Als Parameter wird ein clickEvent mitgegeben.
Darüber kannst Du beispielsweise die Karte auf das geklickte Element zoomen lassen. In folgendem Beispiel passiert das nur bei LineStrings, Polygonen, MultiLinestrings und MultiPolygone.
<script>
window.c4gMapsHooks = window.c4gMapsHooks || {};
window.c4gMapsHooks.hook_map_click = window.c4gMapsHooks.hook_map_click || [];
window.c4gMapsHooks.hook_map_click.push(function (clickEvent) {
var feature = clickEvent.map.forEachFeatureAtPixel(clickEvent.pixel,
function (feature, layer) {
return feature;
});
if (feature && "MultiLineString,LineString,Polygon,MultiPolygon".includes(feature.getGeometry().getType())) {
clickEvent.map.getView().fit(feature.getGeometry()/*,{padding:[50,50,50,50]}*/);
}
});
</script>Hook Search
Dieser Hook wird ausgeführt, wenn eine Suche ausgegeben wird. Übergeben werden die Sucheigenschaften und die GeoSearch-Komponente.
Das Beispiel durchsucht alle eigenen Vectorlayer nach Features, wo der Name mit der Suche übereinstimmt. Zurückgegeben wird ein Array mit Nominatim-Ergebnissen.
Wird "false" zurückgegeben, wird die normale Suche über den eingestellten Suchdienst ausgeführt.
<script>
window.c4gMapsHooks = window.c4gMapsHooks || {};
window.c4gMapsHooks.hook_search = [];
var hookFunction =function (properties) {
var data = properties[0],
geoSearch = properties[1],
mapController = geoSearch.props.mapController,
layerController = mapController.proxy.layerController,
arrLayers = layerController.arrLayers,
result = [];
for (var i in arrLayers) {
if (arrLayers.hasOwnProperty(i)){
layer = arrLayers[i];
if (layer.features) { //kombinierter Layer
for (var l in layer.features) {
if (layer.features.hasOwnProperty(l)) {
var feature = layer.features[l];
if (feature.get('name') == data.q) { // Ergebnis nur gegeben, wenn die eingebene Suche gleich dem Namen des Feature ist
var geometry = feature.getGeometry().clone().transform("EPSG:3857", "EPSG:4326");
var extent = geometry.getExtent();
result.push({
display_name: feature.get('name'),
lon: (extent[0] + extent[2]) / 2,
lat: (extent[1] + extent[3]) / 2
})
}
}
}
}
else if (layer.vectorLayer) { //eigener Layer
var source = layer.vectorLayer.getSource();
var features = source.getFeatures();
for (var l in features) {
if (features.hasOwnProperty(l)) {
var feature = features[l];
if (feature.get('name') == data.q) { // Ergebnis nur gegeben, wenn die eingebene Suche gleich dem Namen des Feature ist
var geometry = feature.getGeometry().clone().transform("EPSG:3857", "EPSG:4326");
var extent = geometry.getExtent();
result.push({
display_name: feature.get('name'),
lon: (extent[0] + extent[2]) / 2,
lat: (extent[1] + extent[3]) / 2
})
}
}
}
}
}
}
if (result.length) {
return result;
}
else {
return false; //ohne Ergebnis wird false zurückgegeben, damit die Nominatim-Suche ausgeführt wird
}
};
window.c4gMapsHooks.hook_search.push(hookFunction);
</script>