OpenLayers med 3D

Igår testade jag Boundless OpenGeo Suite 4.5 med deras Webapp-SDK och byggde en helt standardiserad webbtjänst med OpenLayers 3.

Idag tänkte jag följa Andreas Hocevars instruktioner för att anpassa denna tjänst så att det även går att växla till 3D, vilket är ett nytt tillägg i OpenGeo Suite, tack vare tillägget CesiumJS.

I filen ”src/app/app.js” redigerar jag och lägger till följande:

Screenshot from 2014-12-30 17:06:13Raderna infogas vid rad 129 före map.on(‘singleclick’)-funktionen. Sist i filen lägger jag även till följande:

$('#toggle-globe').click(function() {
  ol3d.setEnabled(!ol3d.getEnabled());
});

Detta för att det skall gå att växla mellan 2D och 3D, när man väljer i menyn. På tal om menyn, så måste även ”index.html” i apptest-roten redigeras och en rad för detta menyalternativ läggas till:

<li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="toggle-globe"><i class="fa fa-globe"></i>&nbsp;&nbsp;Toggle globe view</a></li>

Det är efter rad 58 som ovanstående skall läggas till, vilket ger två ”<li>” rader totalt, den redan befintliga inräknad.

Nu skulle det då fungera att testa, men se det gör det inte…

Han har nämligen glömt något i instruktionen. Det måste finnas med hänvisningar till Cesium skripten…

Screenshot from 2014-12-30 18:21:32I ”index.html” så skall man före ”</head>” taggen lägga till de två raderna med hänvisning till ”ol3-cesium”, annars kommer det aldrig att fungera.

När jag ändå höll på lite så ändrade jag på en rubrik och några menyalternativ, vilket var barnsligt enkelt.

Screenshot from 2014-12-30 18:33:15När man väl börjar bryta lite i javascript-koden så är det inte särskilt krångligt och med mallarna i OpenGeo Suite Webapp-SDK, eller enbart med OpenLayers3 och CesiumJS för den delen, så är det inte så hemskt svårt att få till en 3D visning av geodata på en glob så här.

Är det felfritt och utan problem? Nej det är det inte, i alla fall inte direkt från ett exempel. Man måste skruva och anpassa koden lite mera och det är nog speciellt viktigt med en bra Tile-server för att det skall uppdatera rimligt snabbt. Med de länkar som används i exemplet så går det lite väl långsamt. Men bara det att det går att skapa en webbkarta där det är enkelt att växla mellan 2D och 3D, utan att det för den skull skall krävas en massa plug-in i webbläsaren är mycket värdefullt.

Du hittar mitt halvskakiga exempel på http://geosupportsystem.altervista.org/ol3cesium/ men du får klicka bort ”overlays” om du vill att kartan skall uppdateras i 3D (fungerar ändå inte utan min lokala geoserver).

Annonser

Taggar:, , ,

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

%d bloggare gillar detta: