Orthographic projection with OpenLayers

Question

Is it possible to have an orthographic projection with OpenLayers?

I didn't find anything specific on the matter.

---

@Mike’s answer is what I needed. As I am using OpenLayers 4.6.5, I had to change the last part of the code, otherwise it doesn't work. I modified the creation of the circle in

var circle = new ol.geom.Circle([0, 0], 6370997);
var style = new ol.style.Fill({
  color: "black"
});

I imagine that the function to trigger the circle, should be changed in

map.on("postrender", function(e){
....
});

However I am not sure how to change the function internal code.

Answer 1

Yes, proj4js supports ortho projections. To get a neat effect you should clip the output with the radius used in the projection definition. https://codesandbox.io/s/orthographic-0v3s3

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import Circle from "ol/geom/Circle";
import { getVectorContext } from "ol/render";
import { Style, Fill } from "ol/style";
import { register } from "ol/proj/proj4";
import proj4 from "proj4";

proj4.defs(
  "ORTHO",
  "+proj=ortho +lat_0=42.5333333333 +lon_0=-72.53333333339999 +x_0=0 +y_0=0 +a=6370997 +b=6370997 +units=m +no_defs "
);
register(proj4);

var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: "map",
  view: new View({
    center: [0, 0],
    projection: "ORTHO",
    zoom: 2
  })
});

var circle = new Circle([0, 0], 6370997);
var style = new Style({
  fill: new Fill({
    color: "black"
  })
});

map
  .getLayers()
  .getArray()[0]
  .on("postrender", function(e) {
    var vectorContext = getVectorContext(e);
    e.context.globalCompositeOperation = "destination-in";
    vectorContext.setStyle(style);
    vectorContext.drawCircle(circle);
    e.context.globalCompositeOperation = "source-over";
  });