3D WebGIS development using Cesium JS (Google Earth like Application)

[Music] hello friends welcome back to my channel again and welcome back to another tutorial video so today in this tutorial video we will gonna discuss about the web gis but this video is slightly different from my other videos like as you can see on the screen that in this video we're gonna see how to basically develop a three dimensional webgis 3d webgis in my earlier videos uh most of the videos was about the web gis basically those were the 2d web gis only in x and y but in this we will want to see how to develop a application just like google earth as you must all must have been explored the google earth so as you can see this we will gonna see how to develop this kind of 3d application and how to overlay your own geospatial data shape files and any other files over the globe as you can see here i have overlaid the indian boundary over the globe so for that basically we will what we will do we will use a javascript library that is free called uh czm js so first we need to download this javascript library so just go on google and type cesium so just click on the download and just click here download cesium 1.81 version and you will be able to download the zip file so i have already downloaded it so you will get the zip file download it and one very most important thing which you have to remember that you have to run you have to run this application inside any web server you so you need a web server for that so we what we will gonna do we will want to use tomcat web server so you just go on google type tomcat and you can download the tomcat you can go through my earlier video like web gs development from the scratch or earlier video also how to install tomcat with jio server so you can go through that video so in detail you will be able to install the tomcat and jio server inside there so otherwise very quickly i will show you how to download and how to install tomcat just on google go and type tomcat and just click on download and here there are so many versions so i prefer version 9 because my jio server is compatible you do not need to have jio server for developing this kind of 3d gis you can uh you don't do not need geo server but i'm using jsr because i'm fetching some geojson data from the jio server you can directly convert your shift file data into json geojson format and then you can use so i prefer version 9 so just click on the version 9 here and then click on 32-bit 64-bit windows service installer so once you will click you will be able to download the exe file so after that very quickly i'll show you just double click the exe file just go on next next just click the examples in host manager next and here you have to give the port number if your paid port number 8080 is free you have not installed any service on this port you can let it be 8080 but in my case i have i had installed uh jio server so i had changed to 802 it depends on you you can let it be 8080 and then you can give the username and password for accessing the host manager you have to give any username and password and you have to remember that and just click next next night you will be installed you will be able to install the tomcat application uh so i will not install because i have already installed it so i'll show you after the installation what you have to do your service will automatically start otherwise you will be able to see this kind of icon just double click and you have to click start here and basically you need to have java on your machine otherwise you will not be able to download install the tomcat because you need java for that here there is a link for java so when you have successfully installed just go on your browser and type local host and whatever port you have installed like localhost colon8082 i have installed tomcat on 802. so you should be able to see this page if you are able to see this page it means you have successfully installed the tomcat web server so now you are ready to go and next step is basically we have to copy you have to go to your c drive program files apache software formulation this folder will be created then this tomcat folder there will be one folder in your case i have installed two two version nine point four nine point zero four point four four so you you you will be able to see only one folder just double click that and there's a folder called web apps just go inside that here what you have to do in that you have to create any new folder like i have created a folder called 3d so you have to create a new folder and just create another folder library to keep your all the libraries there so i have created a live libs folder double click and i have pasted my cesium library which we have already earlier downloaded and just unzip it so you this is the folder which will be created so you have in inside web apps when 3d folder then libs folder inside that the cesium you have to unzip this okay now we will create one html file and then we'll see the code but first i will give you the overview of the application then i will explain the code odcl with me this is not a big code very small code so i'll explain line by line how to you can modify uh this code according to your need so first we will see this is the basically cesium viewer [Music] as you can see so how i i am accessing this application localhost 8082 this is the port this port may be different for you just change it according to you need then this folder 3d inside the web apps as i already explained you from cad web apps there is a folder called 3d and inside there is one uh html page test1.html so just i am accessing this page like this so this is the overview of this page this is basically my layers all the layers which i have published using this and this is the geocoder so you need to have a good internet connection for using this if you do if you you do not have internet connection you will not be able to see this globe and nothing will come so this is the geocoder you can search any location on earth basically it by default use the bing geocoder this is the home button if you click on home let me show you if you click on home it will go it will go on this location basically this is if you want to see the map in 2d so it will convert this globe into 2d so i'll make again a globe okay and these are the basically base maps these all are base maps are available such as bing map bing mac area with labels if you click on this area basically the locations the labels will also come you can zoom in let me show you so as you can see this is the base map of bing you can change it to such as history world imagery so you click on that so you'll be able to see the history basement now this is the history based map okay this is a very high resolution based map then again you can click on open street map so you you will be able to see the open street base map then bing naps roads these are the basically the waste map then there is the terran if you want to see the elevation undulation then you can click terran so i'll show you what terran will do let me just first search some place let me search himachal pradesh in india change the base map first the bing map now let me go to some any mountain area so now which we are seeing this boundary is my data this is my data i have overlaid over the globe so i will i will explain you and how to overlay your own data if you have any river boundaries your boundaries your points your buildings so you can overlay the data over this globe in 3d also so i will explain you how to basically publish your data over this in three dimension as you can see when i'm clicking here to showing the future information himachal pradesh so this is basically wms service right now you can you can publish gsm data kml data i'll explain later on this so first i will zoom in so yeah this question mark is also for the basically this will help you how to rotate the globe how to zoom in zoom out pan so it will give you the information about that if you are using the mouse just use this if you are using touch touchpad you use this so you can take a help of it let me go to someone someplace here yes this is so as you can see right now let me tilt it a bit so you will be able to see the flat surface flat earth right now undulation so there is no 3d in this now let me now if i'll change it to cesium world terrain if you click here now tilt it you can check this or how to tell how to rotate you can check this okay so now you can see you will be able to see the elevation also so there will be some buildings also here because i have added open layers building uh sorry open street map buildings in 3d as you can see here when the two buildings are there click here so you'll get the information about the buildings these are the 3d buildings you have overlaid you have extruded one has excluded the height of this building so you can over this is the osm data right now but you can overlay your own data i'll show you later in the video how to do that my internet that's why it's just taking some time to load the imagery but if you if you have a very good internet connection this image will load very very quickly so you can create animations and lot of things you can rotate around a single point so lot of options are there in cesium yes if you go on the website you you can find a lot of examples so you can see the very nice 3d is coming new delhi india i'll show you some of the buildings also like osm buildings are already available in 3d as you can see lot of grey color let me zoom it to some place here it is you can see this is the 3d buildings you can give the colors to it you can different height i'll show you how to give colors and how to extrude based on the elevations i'll explain later in this video let me show you some other such as new york lot of boundaries are there a lot so these are the by default osm buildings are available with different colors so you can make your own buildings like this and you can publish it i'll show you so this is basically about this is basically about the ui of this basically cesium js here i have created some of this like if i click here usa population so it will zoom into the usa and based on the population it will extrude the polygon like this as you can see this is my data i have overlaid over group like this you can see based on the population i have a population field in in a shape file in our vector data so it can exclude it based on that value if you click click on any feature it will give you the information about that feature also as you can see there is this persons i have used for excluding the height i have published my data let me show you some buildings also just digitize few of the buildings and i just wanted to show you how to how it will look the osm building otherwise it will confuse you let me make a comment as you can see now these are the four five buildings which i have randomly i have digitized and i have extruded based on the if i click on any building i have given any random random height and i have extruded based on that as you can you can have any polygon line point and you have any field inside the population or area or anything so you can extrude based on that and you will you can i have added any digital number basically any number and based on that i have extruded the height of the polygon feature so this boundary is my data this is coming as wms service from the jio server and now uh the polygon files polygon data will be loaded that is wfs basically features are loaded this is the indian boundaries you can see based on a field called gid so like this and if you want to simply overlay you can do that like simple style if you go for the simple style you'll be able to see the data like this one pretty simple no color nothing but if you want to extrude based on that based on any if just you can do that like this okay now i will go to the code so i think so one thing you you need to do either you have to you need geojson data for this because i have used gsn data so one thing you can do if you have any your vector files so you can convert those shape files to the json data using qgis such like this building i have let me zoom to layer so what i have done just right click over this and export save feature as qgis is a free software you can see my earlier tutorial video how to use qgis then select the format geojson and give the name and just export it give the epsg four through six the projection any position you can use and just export it so you will be able to export into geojson format and just keep that file in that folder only like i have captioned building.geojson like this just keep that file there only okay just export it and keep it here or you can fetch the data from jio server i will show you how to fetch the data okay so now we'll go to the code and this page simultaneously so one by one i'll i will explain you so this is the basic html file as you can see html tag is their head so these are the two scripts which we are importing into our html page this is csdm.js so as you can see localhost 8082 this port number may be different for you then this is the 3d folder and libs folder inside which we have extracted this cesium 1.81 so this path you you may have to change according to your folder if you have created some other name like 3d maybe gis then inside that library so you have to change that according to this much you have to change according to your similarly in this okay otherwise this should remain same then the style also you have to css file you have to import similarly this 3d up to this and up to this you have to modify according to your folder name then this should remain same body and everything then now this is our javascript code from here like this is the viewer which you are able to see this viewer is called cesium viewer so you have to define new cesium viewer cesium container means this is the html element element inside which it is rendering this two name should be same if you change this name just change the name here also okay and this is the viewer if you add this code only so you will be able to see a viewer with the globe and every base map and everything nothing nothing you have to simple these five lines of code you will be able to see this much apart from this drop down you you will be able to see everything only using this five line of code then this i have made comment this is basically osm buildings if you add this viewer viewer means this dot scene dot primitive add cesium dot create osm buildings so basically you are adding the osm buildings with the height here okay so let me i will comment it later on i will you can uncomment this then for adding the wms service like if you have jio server installed if you have gone through my earlier videos you you must be aware of the jio servers and you can put your data inside the geo server you can put the jio server inside the tomcat deploy and then you can put your data inside the jio server like i have published few of my share files in the jio server like here if you go to the layer preview so i am using one of the layers here like i have created one variable called where image layers is equal to vr dot image layers okay this is my function now i will keep on adding there in this image layers dot add imagery provider new csm web web map service this is wms service and then this is the url of my jio server you can change the port here 8 0 8 0 according to your and this is my layer name india india state means from here i am taking this name once i have published this is the india state okay that's why you are able to see this boundary let me show you this boundary is wms this is basically tiles only png or jpeg tiles like image png type so if i uncomment this you will be able to see usa boundary now i'll show you will be able to see the usa boundary simple boundary with colors with the style already defined the jio server so this is the usb boundary if i click here open layer so similar thing you will just the layer will be overlaid over the group like this layer already in the jio server this is overlaid over the this one this is a very simple thing you can overlay and click on that you will get the information okay so let me uncomment let me make a comment of this again how to publish just you have to give the name here from jio server and you have to give the jio server wbms so this is how you can add the ums layer on your globe cesium globe now it will be gone yes now this is the start of looking at usa basically when you load your application so it is looking at as you can see sorry you can see you you can see the usa so this is the start of location destination using rectangle from degrees this is the basically the extent of usa so you what you have to see you have to take latitude longitude of this point below left and upper right here from here to here so i have given these coordinates here so if you you can change it according to your location according to your data so globe will come at your location whatever extent you will get so you can use qgis for that like what i have done i have basically use qgis only checking the extent this is my usa layer i will zoom it to so that's how from here i have taken this minus 125 21 something so as you can see minus 125.49 like this i have i'm just taking from here so you can take the extent from here okay so this is how you can set the initial view of the globe then this is the toolbar now toolbar has started this is this toolbar so one by one we will add the layers one one two three four layer then remove all removal means it will remove all the layers so as you can see this is bracket this is bracket so this is our first layer so in text i have written select layer function it will do nothing this select layer will do nothing then second layer if you see is usa population with the very normal style so this much code only from 81 to this as you can see 106 so text you can give anything function this is the function for adding any data data sources dot add cesium dot geojson data source load so here you have to give the link of the your geo json data so if you have like you have exported as i earlier told you you can export any shape file here right click export say feature as you can export any format here and you can copy and paste that anywhere like here and just you have to give the name yeah but right now i'm showing you how to fetch if you have already data inside the jio server so how to fetch from there like here in jio server as you can see this is my this layer so inside if you go on this is layer preview click on layer preview and this layer you select one here there will be option for geo json so click on geo json so you will be able to see that this link and this is the geo json data so just one thing you have to do you have to remove this and max feature 50. so it is currently showing only 50 features out of all the features so just remove this and click so now all features will be loaded just copy copy this link and just paste it here so now you will be able to the same data over here so that's why this data is coming from jio server and i'll show you how to if you don't want to fetch data from user what you can do directly just give building layer json datasource.load i am giving building.geojson so i have exported the dart shape file to the geojson and i have copied it to the same folder web apps 3d this is so that's why i am just directly written this if you if you you can create any new folder here like geojson or something then you have to give here that folder name suppose i create test folder then slash like this okay so i have directly copied it there that's why i'm giving only building.json so it is taking data from there so you if you have your share files you don't want to publish into the jio server you just export it using the qgis or any other software just copy in that folder and give the name here so both the options for you then after adding this simple style this thing is basically what you fly to basically when you click it will fly your camera angle will fly let me show you how suppose i select this simple style so it will fly now so you're looking from some angle because it is three dimension so you can modify according to this like cesium cartesian cartesian three from degrees this is the latitude longitude and height from from where you want to see so suppose for what i am doing for us i am watching it from somewhere here as you can see this this pen my mouse i am watching it from here so the relative longitude is from somewhere here and height from how much height because i want to see the whole usc that's why this i'm giving that much height in meter but if you give 430 so it will zoom it to somewhere else but i want to see the whole usa that's why the height is high so this is for setting your camera basically your viewpoint this is my viewpoint i'm watching it at this latitude longitude and height from 43 i don't know how much once 4.3 million meters something i think so i am watching it from that much far and this is the orientation basically north if you know about photogrammetry xyz so there is your page row three things are there so this is roll heading pitch and roll in this so from northing and easting i'm making it constant from roll also i make it constant only pitch i'm making this so if i suppose if i make it 90 i'll show you watch it from exactly perpendicular let me show you suppose if i click this so see somewhere here i am watching and from the top exactly from the 90 degree so as i already explained you i am watching it from somewhere here but not with any angle exactly from the top so here it is basically minus 90 from minus 90 degree exactly so i have to change it to something else let me make it 65 so now it will i will watch some degrees at this location at this height so let me do this again so height is very important this is for camera angle simple style so now it's okay now you are not watching at perpendicular you are watching us when 65 degree something in radians so this you can modify according to your name and this you have to modify from which you you may want to watch from here so you can give the latitude longitude of this point like here minus 69 or 26.94 and some height if you want to watch it from here you can give that so it will be 5 to that now again for extrude now this is the example of simple polygon layer now we want to extrude the polygon height based on symmetry so this is next is for that from this 108 line so this is again the link is same i'm taken from this or you can give the you can export the file uh jojson file and you can give the name here you can copy inside that folder but this code is for giving the colors like you just see this one where name is called to entity dot name so name is my field so according to this naming field it will give the color so name is unique so for every different name it will give different color like random color so you can change this field dot name suppose you want to give four polygons same color so you have to give the same [Music] attribute to those four polygons and you have to give the name here so it will give the color to the same color to all those polygons so it will take the unique name and it will give the different colors and for extruding here entity dot properties persons this is the person field i based on this i want to extrude divide by 50 because population is very high in lags and mil in millions okay so that's why if i take directly person i will not divide it so the height will be very basically huge so you will you will not be able to see the data very good that's why i have divided by 50 times i've reduced it by the 50 times so if you click here now the camera angle is same because for usa i've given the same now it is extruding but if i remove this 50 so this height will be very high very huge very large that's why you have to manipulate this you have to scale your extruding based on the value okay so now it is giving the different color for different polygons because i have given the color based on this name you can change this field name according to your need okay so this is regarding this uh extruding and then another example again the similar i have given the fly camera and s65 and this duration is five basically in how much duration it will fly to that that location let me show you if i click here and see so it will fly in that much time with that location okay this is time for that then third is my buildings which i have created and this is this is coming from geojson file directly which i have exported using qgis building.geojson and on the base of id i am giving the color this is entity dot id so it is different from different buildings it will give different colors and then based on the height i am giving i am not multi i have not multiplied or divided anything because height is in meters 10 meter 20 meter 100 meter so it is okay for extruding based on those values so if i click to buildings will take some time this and it will go but like this is iod is different for all the buildings so it is giving the diff it is given the different colors and it has extruded based on this height let me show you one more thing if you want to extrude it more what you do you can time you multiply it with 10 times so now extrusion will be 10 times more so you can increase or decrease your extrusion based on the based on the values okay so let me again change it to let me delete this okay this is fine now so this flyer now in this case what i as you can see this cesium rectangle from degrees so i am watching it let me go to my building shift file i am watching it from somewhere here and height as you can see is significantly reduced now here 77 this is my latitude longitudinal viewpoint 1500 only so i am watching it from the 1500 meter only because my area of interest is very small if i keep it 43 000 50 000 so my viewpoint will be somewhere i'll tell you somewhere here from here you will not be able to see those building so based on your data you have to give the viewpoint and this is the angle of that i have modified the angle also this is about these buildings then for india i have this is india this data geojson format is coming from jio server again then based on this name only i have given the color and here i have multiplied by 5000 because my value is very small gid is one two three something so the extrusion was very less so i have multiplied it the five thousand times so it will give you a good extrusion a good elevation but in this fly as you can see what i am doing let me show you india here so i am watching it from somewhere here let me explain you from somewhere here and with this much height because i want to see the whole india that's why i'm watching it from very far away so if i change it to zero again you can again watch it from some uh somewhat uh somewhat some other height so this height and this latitude longitude depend upon your viewpoint where from where you want to see and what at what angles this orientation you have to modify according to your need so this this is the extrusion as you can see okay five thousand times only you want to extrude more you can multiply one you can give six thousand or seven thousand here then this is the remove wall removal means if i click here remove also it will remove all buildings similarly you can as i already told you you can you can go on the world terrain and you can see the buildings and everything a lot of other tutorials are on the website of cesium js where you can overlay the contours of here contours also that this much is the code only so hope i have explained the code pretty well you can modify this code according to your data and just if you want to see the osm building just uncomment this viewer.scene primitive this one so you will be able to see the osm whatever osm building data is there so you will be able to see all those building as i already shown you some of the buildings buildings will come yeah many buildings are already there in 3d you can create the shape files you can you can extrude based on some height and you can different colors based on any field as you can see this is 3d pretty nice 3d you can see here get the information so what you can do you can go to the cesium this there will be i think some examples will be available you click on cesium js here a lot of examples will be there i think yeah as you can see here i have only shown you here that basic vector data if you have any point line polygons you have how to overlay those data over the globe and you can show in the third dimension there are a lot of examples i have only this component i have shown you data sources here this is json kml also you can make those also you can custom database you can make so many things like for this kind of data also like satellite you can show the revolution of the satellite also see this like this so you can go through these so many examples are given here you can create buildings you know only there and you can modify this code here and you can run here also so i have just given you the for like basic gis data if you have how to show on the basically 3d web gis your data so that's it from this video i hope this you must have liked this video if you like this video kindly give a thumbs up and also do subscribe to this channel for the more videos i will i will try to upload more and more videos on the weekly basis so what i will do basically i will give i will upload this html file in my google drive and i will give the link in the description so you can download and you can modify this according to your data sets so thank you thanks a lot for watching

Channel: OpenGeo Lab

Views: 1,429

Rating: 5 out of 5

Keywords: WebGIS, 3d, cesium JS, development, GIS, web based GIS

Id: wDPY3lRfhVo

Length: 42min 35sec (2555 seconds)

Published: Mon May 24 2021