[GIS] 3D Building with Leaflet, OSMBuilding, GeoSever, and GeoWebCache

3dgeoservergeowebcacheleafletopenstreetmap

I am trying to build a spacial 3D tile server with Geoserver and GeoWebCache and visualize the tile on the Leaflet. So far, the followings have been done:

1-Put 3D data in PostGIS

2-Install and configure GeoServer and GeoWebCache

Output:

  1. from:

http://localhost:9090/geoserver/gwc/service/tms/1.0.0

 <TileMap title="3D_sample" srs="EPSG:4326" profile="global-geodetic" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A4326@png"/>
 <TileMap title="3D_sample" srs="EPSG:4326" profile="global-geodetic" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A4326@jpeg"/>
 <TileMap title="3D_sample" srs="EPSG:4326" profile="global-geodetic" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A4326@geojson"/>
 <TileMap title="3D_sample" srs="EPSG:900913" profile="global-mercator" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A900913@utfgrid"/>
<TileMap title="3D_sample" srs="EPSG:900913" profile="global-mercator" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A900913@png"/>
 <TileMap title="3D_sample" srs="EPSG:900913" profile="global-mercator" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A900913@jpeg"/>
 <TileMap title="3D_sample" srs="EPSG:900913" profile="global-mercator" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A900913@geojson"/>

  1. From:

    http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A4326@json

         <TileMap version="1.0.0" 
 tilemapservice="http://localhost:9090/geoserver/gwc/service/tms/1.0.0">
<Title>3D_sample</Title>
<Abstract/>
<SRS>EPSG:4326</SRS>
<BoundingBox minx="174.88723754882812" miny="-36.90788269042969" maxx="174.88792419433594" maxy="-36.907196044921875"/>
<Origin x="174.88723754882812" y="-36.90788269042969"/>
<TileFormat width="256" height="256" mime-type="application/json" extension="json"/>
    <TileSets profile="global-geodetic">
    <TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A4326@json/0" units-per-pixel="0.703125" order="0"/>
     <TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A4326@json/1" units-per-pixel="0.3515625" order="1"/>
     <TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A4326@json/2" units-per-pixel="0.17578125" order="2"/>
     .....
     .....
     </TileSets>
</TileMap>

    For the leaflet code I am following this http://osmbuildings.org/ ->'right click, View page source'

Line 149 says:

   map.addGeoJSONTiles('https://{s}.data.osmbuildings.org/0.2/ph2apjye/tile/{z}/{x}/{y}.json', { fixedZoom: 15 });

Everything works fine here but when I replace the above line with this 

    http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A4326@json/{z}/{x}/{y}.json

nothing appears on the map! I guess the problem is my tileserver url or something related to that.

Update:
What I have tried so far:

Code:

  var map = new L.Map('map');
map.setView([-36.856149, 174.749268], 18, false); //-36.856149, 174.749268

   new L.TileLayer('https://{s}.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png', {

    attribution: 'Demo Version, <a href="https://mapbox.com">MapBox</a>,OSM,          maxZoom: 18,
    maxNativeZoom: 20
}).addTo(map);

 $(function() {
map = new OSMBuildings({
    position: { latitude: -36.856149, longitude: 174.749268 }, // TODO: could be user's location
  tilt: 30,
  baseURL: 'js/lib/OSMBuildings',
  zoom: 16,
  minZoom: 15,
  maxZoom: 20,
  effects: ['shadows'],
  attribution: '© Data <a href="https://openstreetmap.org/copyright/">OpenStreetMap</a> © Map <a href="https://mapbox.com/">Mapbox</a> © 3D <a href="https://osmbuildings.org/copyright/">OSM Buildings</a>'
}).appendTo(document.getElementById('map'));

map.addMapTiles('https://{s}.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png');
   //this works
   map.addGeoJSONTiles('https://{s}.data.osmbuildings.org/0.2/ph2apjye/tile/{z}/{x}/{y}.json', { fixedZoom: 15 });  

     // this does not
 map.addGeoJSONTiles('http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A4326@json/{z}/{x}/{y}.json');  

        // this does not also
        map.addGeoJSONTiles('http://localhost:9090/geoserver/gwc/service/tms/1.0.0/localhost%3A3D_sample@EPSG%3A4326@geojson/{z}/{x}/{y}.geojson');
 // the above two cause the map to freeze and cannot move the map, just zoom in and out without any error

GWC response:

enter image description here

enter image description here

Best Answer

GeoServer is offering 

http://localhost:9090/...host%3A3D_sample@EPSG%3A4326@geojson

but you are using

http://localhost:9090/...host%3A3D_sample@EPSG%3A4326@json/{z}/{x}/{y}.json

Hence you get a 404 response and no data.

Related Question