examples/map/map.layer.3D.html

﻿<DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2015-2019 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>Layer 3D</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="2.5D/3D buildings on an OL3 map" />
  <meta name="keywords" content="ol3, layer, vector, 3D, buildings, animation" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <link rel="stylesheet" href="../style.css" />
  <style>
    #map {
      position:fixed;
      top: 4em;
      left: 0;
      right:0;
      bottom:0;
      margin:0;
    }
    .info {
      position: fixed;
      right: 0.5em;
      top: 4em;
      width: 300px;
      z-index: 1;
    }
    .loading {
      background: #fff;
      border: 2px solid #369;
      left: 50%;
      margin: -2em -100px;
      padding: 0.5em;
      position: fixed;
      text-align: center;
      top: 50%;
      width: 200px;
      z-index: 1;
      box-sizing: border-box;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
  <a href="../../index.html">
    <h1>Layer 3D</h1>
  </a>
  <div class="info">
    This example add a setRenderer3D function to vector layers that do the job in a postcompose loop.
    <br />
    Buildings from <a href="http://professionnels.ign.fr/bdtopo">BDTopo &copy; IGN-France</a>.
    <br />
    POI informations from <a href="https://www.wikipedia.org/">WikiPedia</a>
    <br/>
    <button onclick="doAnime();">Animate!</button>
  </div>

  <!-- DIV pour la carte -->
  <div id="map"></div>
  <div class="loading">Please wait while loading data...</div>
  
  <script type="text/javascript">
  var layer = new ol.layer.Tile({ name:"OSM", source: new ol.source.OSM() });
  // layer.addFilter(new ol.filter.Colorize('invert'));
  
  // The map
  var map = new ol.Map({
    target: 'map',
    view: new ol.View ({
      zoom: 19,
      center: [-245406, 5986536]// [-245575, 5986863], //[-244777, 5989809]
    }),
    interactions: ol.interaction.defaults(),
    layers: [ layer ]
  });

  // Create layer
  var vectorSource = new ol.source.Vector({
    url: '../data/ignf.json',
    // projection: 'EPSG:3857',
    format: new ol.format.GeoJSON(),
    attributions: [ "&copy; <a href='http://professionnels.ign.fr/bdtopo'>ign.fr</a>" ]
  });
  var vector = new ol.layer.Vector({
    source: vectorSource,
    /*
    style: new ol.style.Style({
      fill: new ol.style.Fill({ color: '#333' })
    }),
    */
    maxResolution: 2
  });
  map.addLayer(vector);

  var dbpSource = new ol.source.Vector({
    url: '../data/dbpedia.json',
    format: new ol.format.GeoJSON(),
    attributions: [ "&copy; DBPedia" ]
  });
  var dbp = new ol.layer.Vector({
    source: dbpSource
  });
  map.addLayer(dbp);
  
  // Set 3D renderer
  var r3D = new ol.render3D({
    /** /
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 2
      }),
      fill: new ol.style.Fill({ color: 'red' })
    }),
    /**/
    // ghost: true,
    height:0, 
    maxResolution:0.6, 
    defaultHeight:3.5 
  });
  vector.setRender3D(r3D);
  var listenerKey = vectorSource.on('change', function(e) {
    if (vectorSource.getState() == 'ready') {
      ol.Observable.unByKey(listenerKey)
      $(".loading").hide();
      setTimeout (doAnime, 200);
    }
  });
  var r3D2 = new ol.render3D({ height:100, maxResolution:10 });
  dbp.setRender3D(r3D2);

  var height = 0;
  function doAnime() {
    if (r3D.animating()) return;
    r3D2.animate({ height: height ? 0:100 });
    height = height ? 0 : "HAUTEUR";
    r3D.animate({ height:height });
  }

  </script>

</body>
</html>