Detta är första delen av, jag vet inte hur många, eller ens var det kommer att sluta, där jag tänker experimentera med QGIS-Server, OpenLayers, Leaflet, JavaSkript och Python.
Målet är att skapa en metod för att via skript publicera OGC-tjänster på en kartportal.
Det kan tyckas att jag inte är särskilt tydlig i alla steg i denna och kommande artiklar, men anledningen är att jag vill hålla artiklarna korta och det som inte tas upp har jag visat på ett eller annat sätt tidigare.
Här i första delen så tänker jag repetera lite OpenLayers och Leaflet, för att se om någon av metoderna passar bättre eller sämre för ändamålet.
Jag använder min hederliga virtuella geoserver (instruktioner och skript för installation finns under ”Testa själv”) där QGIS-Server finns med, men även utdelade kataloger, PostGIS, OpenLayers, Leaflet, GeoServer, med mera.
Jag börjar med att skapa ett QGIS-Projekt och publicera detta via QGIS-Server genom att helt enkelt spara projektfilen i rätt katalog.
Jag läser tillbaka projektet som WMS-tjänst för att bekräfta att det fungerar, där sökvägen i mitt fall ser ut ungefär såhär:
http://Server/cgi-bin/qgis_mapserv.fcgi?VERSION=1.3.0&map=/qgis/projektnamn.qgs
Jag kan även konstatera att QGIS-Server stödjer legend via WMS (se bild ovan).
En rudimentär Leaflet sida för att få fram motsvarande ser ut som bilden nedan, och koden kommer under sedan.
<html>
<head>
<title>Leaflet Layers Control Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="script/leaflet.css" />
</head>
<body>
<div id="map" style="width:100%; height:850px"></div>
<script src="script/leaflet.js"></script>
<script>
var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: 'Open Street Map'
});
var sverige = L.tileLayer.wms("http://192.168.0.121/cgi-bin/qgis_mapserv.fcgi?VERSION=1.3.0&map=/qgis/Sverige.qgs", {
layers: 'Sverige',
format: 'image/png',
transparent: true
});
var map = L.map('map', {
center: [57.66634,14.97231],
zoom: 12,
layers: [osm, sverige]
});
var baseMaps = {
"Open Street Map": osm
};
var overLays = {
"Sverige QGIS": sverige
};
L.control.layers(baseMaps, overLays).addTo(map);
</script>
</body>
</html>
Mitt lager skapas av fem rader i mitten (var Sverige = ) och läggs till som ett valbart lager i variabeln ”overLays”.
Om jag gör motsvarande med OpenLayers så blir resultatet detta:
<html>
<head>
<script src="openlayers/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script type="text/javascript">
var options = {projection: new OpenLayers.Projection("EPSG:3857")}
var map = new OpenLayers.Map('map', options);
var osm = new OpenLayers.Layer.OSM("OpenStreetMap");
var sverige = new OpenLayers.Layer.WMS(
"Sverige QGIS", "http://192.168.0.121/cgi-bin/qgis_mapserv.fcgi?VERSION=1.3.0&map=/qgis/Sverige.qgs",
{ layers: "Sverige", transparent: "true", format: "image/png" },
{isBaseLayer: false}
);
map.addLayers([osm, sverige]);
map.setCenter(new OpenLayers.LonLat(14.97, 57.67).transform("EPSG:4326","EPSG:3857"), 14);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
</script>
</body>
</html>
Resultatet är snarlikt med OpenLayers. Lite snyggare med Leaflet, men OpenLayers har något som Leaflet inte har som jag kommer att vilja ha senare: GetFeatureInfo! Det ser dessutom lite ”renare” ut i koden med OpenLayers och känslan inför fortsättningen med skript för att skapa koden är att OpenLayers blir lite enklare.
Jag kommer således att fortsätta mitt experimenterande med OpenLayers som utgångspunkt.
0 svar på ”Experimentet börjar”