extendsImageOverlay
Overlay that rasterizes a GeoJSON dataset onto 3D tile geometry. Features are drawn using the
Canvas 2D API at the tile's native resolution. Per-feature style overrides can be provided via
the strokeStyle, fillStyle, strokeWidth, and pointRadius properties on each GeoJSON
feature's properties object.
import { TilesRenderer, GlobeControls } from '3d-tiles-renderer/three';
import { GeneratedSurfacePlugin, ImageOverlayPlugin, XYZTilesOverlay, GeoJSONOverlay } from '3d-tiles-renderer/three/plugins';
// scene, camera and renderer are initialized here
const URL = 'https://raw.githubusercontent.com/gkjohnson/three-geojson/v0.0.14/example/world.geojson';
const SATELLITE_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
const tiles = new TilesRenderer();
tiles.registerPlugin( new GeneratedSurfacePlugin( {
overlay: new XYZTilesOverlay( { url: SATELLITE_URL } ),
applyOverlayTexture: true,
} ) );
tiles.registerPlugin( new ImageOverlayPlugin( {
renderer,
overlays: [ new GeoJSONOverlay( { url: URL, fillStyle: 'transparent' } ) ],
} ) );
tiles.setCamera( camera );
tiles.group.rotation.x = - Math.PI / 2;
scene.add( tiles.group );
camera.position.set( 0, 0, 1.75e7 );
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 GeoJSONOverlay(
options?: {
// GeoJSON FeatureCollection or Feature object to render. If not provided, `url` must be set so the data can be fetched on init.
geojson: Object = null,
// URL to a GeoJSON file to fetch on initialization (used when `geojson` is not supplied directly).
url: string = null,
// Canvas resolution (pixels) used when compositing tiles.
resolution: number = 256,
// Per-feature style callback. When provided, overrides `strokeStyle`, `fillStyle`, `strokeWidth`, and `pointRadius`.
getStyle?: ( feature: Object, properties: Object ) => VectorTileStyle | null,
// Radius in pixels used to render Point features.
pointRadius: number = 6,
// Canvas stroke style for feature outlines.
strokeStyle: string = 'white',
// Stroke line width in pixels.
strokeWidth: number = 2,
// Canvas fill style for feature interiors.
fillStyle: string = 'rgba( 255, 255, 255, 0.5 )',
// 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