Giro3D - Custom Terrain + wmts Basemap

giro3d_custom_terrain_wmts_basemap

import "./style.css";

import CoordinateSystem from "@giro3d/giro3d/core/geographic/CoordinateSystem.js";
import Extent from "@giro3d/giro3d/core/geographic/Extent.js";
import Instance from "@giro3d/giro3d/core/Instance.js";
import ColorLayer from "@giro3d/giro3d/core/layer/ColorLayer.js";
import ElevationLayer from "@giro3d/giro3d/core/layer/ElevationLayer.js";
import Map, { defaultMapSubdivisionStrategy } from "@giro3d/giro3d/entities/Map.js";
import { MapLightingMode } from "@giro3d/giro3d/entities/MapLightingOptions.js";
import MapboxTerrainFormat from "@giro3d/giro3d/formats/MapboxTerrainFormat.js";
import Inspector from "@giro3d/giro3d/gui/Inspector.js";
import TiledImageSource from "@giro3d/giro3d/sources/TiledImageSource.js";
import WmtsSource from "@giro3d/giro3d/sources/WmtsSource.js";
import XYZ from "ol/source/XYZ.js";
import TileGrid from "ol/tilegrid/TileGrid.js";
import { MapControls } from "three/examples/jsm/controls/MapControls.js";

const EPSG_28992_DEF =
  "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.2369,50.0087,465.658,-0.406857330322,-0.350732676542,1.870347383606,-4.0812 +units=m +no_defs +type=crs";

const CRS = CoordinateSystem.register("EPSG:28992", EPSG_28992_DEF);

const extent = new Extent(
  CRS,
  180000,
  198000,
  313000,
  323000
);

const instance = new Instance({
  target: "view",
  crs: CRS,
  backgroundColor: 0xf1f4f8,
});

const map = new Map({
  extent,
  subdivisionThreshold: 1.2,
  subdivisionStrategy: defaultMapSubdivisionStrategy,
  terrain: {
    segments: 16,
  },
  lighting: {
    enabled: false,
    mode: MapLightingMode.LightBased,
  },
});

const resolutions = Array.from({ length: 12 }, (_, z) => 3440.64 / 2 ** z);

const rdNewQuadExtent = [
  -285401.92,
  22598.08,
  595401.92,
  903401.92,
];

const tileGrid = new TileGrid({
  extent: rdNewQuadExtent,
  origin: [-285401.92, 903401.92],
  resolutions,
  tileSize: 256,
});

async function addLayers() {
  const elevationLayer = new ElevationLayer({
    name: "ahn5-terrain",
    extent,
    resolutionFactor: 0.25,
    source: new TiledImageSource({
      noDataValue: -10000,
      format: new MapboxTerrainFormat(),
      extent,
      source: new XYZ({
        projection: "EPSG:28992",
        tileGrid,
        crossOrigin: "anonymous",
        url: "./tiles/{z}/{x}/{y}.png",
      }),
    }),
  });

  await map.addLayer(elevationLayer);

  const wmtsSource = await WmtsSource.fromCapabilities(
    "https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0?SERVICE=WMTS&REQUEST=GetCapabilities",
    {
      layer: "standaard",
      matrixSet: "EPSG:28992",
      imageFormat: "image/png",
    },
  );

  const pdokLayer = new ColorLayer({
    name: "pdok-achtergrondkaart",
    extent,
    preloadImages: false,
    source: wmtsSource,
  });

  await map.addLayer(pdokLayer);
}

async function initialize() {
  await instance.add(map);

  const controls = new MapControls(instance.view.camera, instance.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.2;
  controls.maxPolarAngle = Math.PI / 2.25;

  instance.view.setControls(controls);

  const center = extent.centerAsVector3();

  instance.view.camera.position.set(center.x, center.y - 900, 1200);
  controls.target.copy(center);
  controls.update();

  const inspector = Inspector.attach("inspector", instance, {
    title: "Giro3D Inspector",
    width: 420,
  });
  inspector.gui.open();

  await addLayers();
}

void initialize().catch(console.error);