Overlay that renders WMS (Web Map Service) image tiles on top of 3D tile geometry. See the WMS specification.
import { TilesRenderer, GlobeControls } from '3d-tiles-renderer/three';
import { GeneratedSurfacePlugin, WMSTilesOverlay } from '3d-tiles-renderer/three/plugins';
// scene, camera and renderer are initialized here
const URL = 'https://basemap.nationalmap.gov/arcgis/services/USGSHydroCached/MapServer/WMSServer';
const tiles = new TilesRenderer();
tiles.registerPlugin( new GeneratedSurfacePlugin( {
overlay: new WMSTilesOverlay( {
url: URL,
layer: '0',
styles: 'default',
crs: 'EPSG:4326',
format: 'image/png',
} ),
applyOverlayTexture: true,
} ) );
tiles.setCamera( camera );
tiles.group.rotation.x = - Math.PI / 2;
scene.add( tiles.group );
camera.position.set( - 1880498, 10914841, 13380436 );
camera.lookAt( 0, 0, 0 );
const controls = new GlobeControls( scene, camera, renderer.domElement );
controls.setEllipsoid( tiles.ellipsoid, tiles.group );
controls.enableDamping = true;
renderer.setAnimationLoop( () => {
controls.update();
camera.updateMatrixWorld();
tiles.setResolutionFromRenderer( camera, renderer );
tiles.update();
renderer.render( scene, camera );
} );On this page
Methods
new WMSTilesOverlay(
options?: {
// WMS base URL.
url?: string,
// WMS layer name.
layer?: string,
// Coordinate reference system, e.g. `'EPSG:4326'`.
crs?: string,
// Image MIME type, e.g. `'image/png'`.
format?: string,
// Tile pixel size.
tileDimension: number = 256,
// WMS styles parameter.
styles?: string,
// WMS version string.
version: string = '1.3.0',
// Whether to request a transparent image.
transparent: boolean = false,
// Number of zoom levels.
levels: number = 18,
// Content bounding box in radians `[west, south, east, north]`. If null, uses full projection bounds.
contentBoundingBox: Array<number> | null = null,
// Overlay opacity (0–1).
opacity: number = 1,
// Tint color.
color: number | Color = 0xffffff,
// Planar projection frame. If null, cartographic projection is used.
frame: Matrix4 = null,
// URL rewriting callback.
preprocessURL: function = null,
// Use alpha channel as a surface mask.
alphaMask: boolean = false,
// Invert the alpha channel.
alphaInvert: boolean = false
}
)Inherited
From ImageOverlay
- Properties