Immediate Rendering (Geographic)

Edit

Immediate Rendering (Geographic)

Using the immediate rendering API with geometries in geographic coordinates.

This example uses the "immediate" rendering API with geometries in geographic coordinates. The immediate rendering API lets you draw styled geometries without adding them to a layer first. Use the getVectorContext function to create a rendering context from a render event. Using the context.drawGeometry() and context.setStyle() methods on this rendering context, you can draw any geometry on each render frame. The useGeographic function is used in this example so that geometries can be in geographic coordinates.

Copy

index.html<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Immediate Rendering (Geographic)</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="index.js"></script>
  </body>
</html>

Copy

index.jsimport 'ol/ol.css';
import {Map, View} from 'ol/index';
import {Point} from 'ol/geom';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import {Circle, Fill, Style} from 'ol/style';
import {getVectorContext} from 'ol/render';
import {useGeographic} from 'ol/proj';
import {upAndDown} from 'ol/easing';

useGeographic();

var layer = new TileLayer({
  source: new Stamen({
    layer: 'toner'
  })
});

var map = new Map({
  layers: [layer],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

var image = new Circle({
  radius: 8,
  fill: new Fill({color: 'rgb(255, 153, 0)'})
});

var style = new Style({
  image: image
});

var n = 1000;
var geometries = new Array(n);

for (var i = 0; i < n; ++i) {
  var lon = 360 * Math.random() - 180;
  var lat = 180 * Math.random() - 90;
  geometries[i] = new Point([lon, lat]);
}

layer.on('postrender', function(event) {
  var vectorContext = getVectorContext(event);

  for (var i = 0; i < n; ++i) {
    var importance = upAndDown(Math.pow((n - i) / n, 0.15));
    if (importance < 0.1) {
      continue;
    }
    image.setOpacity(importance);
    image.setScale(importance);
    vectorContext.setStyle(style);
    vectorContext.drawGeometry(geometries[i]);
  }

  var lon = 360 * Math.random() - 180;
  var lat = 180 * Math.random() - 90;
  geometries.push(new Point([lon, lat]));
  geometries.shift();
  map.render();
});

Copy

package.json{
  "name": "immediate-geographic",
  "dependencies": {
    "ol": "6.1.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}