Benutzer-Werkzeuge

  • Angemeldet als: Sykora, Peter (p13653201)
  • Admin

Webseiten-Werkzeuge


administration:workshop_geoinformatik_webgis

Workshop WebGis Basisschulung

  • Schultyp: Berufsschule Geoinformationstechniker
  • Dauer: 1 Tag

Voraussetzungen

  • QGIS 3.4
  • Plugin Tiles XYZ
  • Notepad++
  • Filezilla - je nachdem auf jedem Rechner oder nur auf einem.
  • Schreibrechte auf einem Webserver

Einführung ins Web/HTML

Tilecache Karte mit QGIS erstellen

	// Open Street Map Hike and Bike
	var hikebike = L.tileLayer('https://map1.gpsies.com/{z}/{x}/{y}.png', {
		minZoom: 9,
		maxZoom: 15,
        tms: false,
        attribution: 'Generated by TilesXYZ'
	}).addTo(map);
  • Layerswitcher hinzufügen:
//var osm = L.tileLayer [...] bei osm einfügen
//var mytile = L.tileLayer [...] bei eigenem layer einfügen
 
	// Hintergrundkarten zu einem Gruppenlayer zusammenfassen
	var baseLayers = {
		"OSM": osm,
		"Meine Karte": mytile
	};
 
	// Layer Switcher hinzufügen
	L.control.layers(baseLayers).addTo(map);
  • .addTo(map) bei OSM Layer kann entfernt werden da die Karte erst erscheinen soll wenn im Layerswitcher aktiviert wird.
  • Weitere Tilecaches einbauen: https://mc.bbbike.org/mc/
  • Kartenprojekt auf den Webserver stellen, Pfad auf Kacheln muss von lokal auf Webserver umgestellt werden:
var mytile = L.tileLayer('https://e-gov.ooe.gv.at/dorissrv/test/trophy/{z}/{x}/{y}.png', {
  • Demo dass dieser Tilecache auch in QGIS einbindbar ist (Verbindung über XYZ Tiles in TOC)
    • Kartenbezugssystem auf Pseudo-Mercator umstellen (epsg:3857)

overlay mit Vektordaten

  • in QGIS einen Punktlayer erstellen (z.B.: wichtige Orte - Schulen, Krankenhaus, Hallenbad, …)
  • Alternativ Download FLWI_EINRICHTUNGEN vom OGD Portal https://www.data.gv.at/katalog/dataset/33a027d2-8055-4c32-92c7-ec9e7aefb068
  • Daten so aufbreiten dass eine Unterscheidung (KENNZAHL) möglich ist, evtl. noch ein zusätzliches Textfeld (Anmerkung) hinzufügen
  • Daten in ein geoJSON exportieren über rechte Maustaste auf Layer - Exportieren - Objekt speichern als
    • Format: GeoJSON
    • Dateiname: N:\bavl0u\vorträge\2019_Workshop_Berufsschule\trophy\pois.geojson
    • KBS: EPSG:4326
  • GeoJSON in Notepad editieren und eine Variable aus dem JSON Code machen:
var poi_features = {
"type": "FeatureCollection",
"name": "pois", ...
  • Datei mit der Endung .js speichern
  • GeoJSON Daten in HTML einbinden:
<script src="pois.js" type="text/javascript"></script>
  • Points of interest im Javascriptcode hinzufügen:
	  // GeoJSON Points of interest als overlay hinzufügen
 
	  // Popups konfigurieren
	  function onEachFeature(feature, layer) {
		var popupContent = "<p>Kennzahl: ";
 
		if (feature.properties && feature.properties.KENNZAHL) {
			popupContent += feature.properties.KENNZAHL +"</p>";
		}
 
		layer.bindPopup(popupContent);
	  }
 
	  // Style konfigurieren
	  var pois = L.geoJSON(poi_features, {
 
		onEachFeature: onEachFeature,
 
		pointToLayer: function (feature, latlng) {
			return L.circleMarker(latlng, {
				radius: 8,
				fillColor: "#ff7800",
				color: "#000",
				weight: 1,
				opacity: 1,
				fillOpacity: 0.8
			});
		}
	  }).addTo(map);
 
	  var overlays = {
		"POIs": pois
	  }
  • overlays beim Layer Switcher hinzufügen
  • Symbolisierung anhand eines Wertes in der GeoJSON Datei. Hier am Beispiel der Kennzahl
	// Style konfigurieren für png ICONs mit Filter
 
	// Bilder als Icons definieren
 
	var ambulanceIcon = L.icon({
		iconUrl: 'ambulance.png',
		iconSize: [32, 37],
		iconAnchor: [16, 37],
		popupAnchor: [0, -28]
	});
 
	var fireIcon = L.icon({
		iconUrl: 'firemen.png',
		iconSize: [32, 37],
		iconAnchor: [16, 37],
		popupAnchor: [0, -28]
	});
 
	var informationIcon = L.icon({
		iconUrl: 'information.png',
		iconSize: [32, 37],
		iconAnchor: [16, 37],
		popupAnchor: [0, -28]
	});
 
	// Funktion zur Zuordnung zwischen Kennzahl und ICON
	function iconByKennzahl(feature){
		var icon;
		if (feature.properties.KENNZAHL == 14111) icon = fireIcon;
		else if (feature.properties.KENNZAHL == 14100) icon = ambulanceIcon;
		else icon = informationIcon;
 
		return icon;
	}
 
	var pois_icons = L.geoJSON(poi_features, {
 
		onEachFeature: onEachFeature,
 
		pointToLayer: function (feature, latlng) {
			return L.marker(latlng, {icon: iconByKennzahl(feature)});
		}
	  });
 
	var overlays = {
		"POIs Bilder": pois_icons,
		"POIs": pois
	}
  • evtl. auch mit Linienlayern probieren
  • evtl. Bounding Box definieren

WMS (Web Map Server) einbinden

	var widmungen = L.tileLayer.wms('https://srv.doris.at:443/arcgis/services/Basisdaten/GeoLand/MapServer/WmsServer?', {
		layers: 'Widmungskategorie',
		transparent: 'true',
		format: 'image/png',
		opacity: 0.8
	});
 
//[...] und bei den overlays hinzufügen:
 
	var overlays = {
		"POIs": pois,
		"Widmungen": widmungen
	}

Fertige Applikation siehe https://e-gov.ooe.gv.at/dorissrv/test/trophy/trophy.html

Cloudservices

administration/workshop_geoinformatik_webgis.txt · Zuletzt geändert: 2019/10/21 15:24 von p13653201