1

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

1

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.

  • thank you. I am afraid this was not the case, I have updated the question. – mohsen hs Oct 8 '17 at 22:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.