Update projection demo, remove unneeded geojson plugin

Author: gkjohnson

example/geojson.js

@@ -2,7 +2,7 @@ import { StrictMode, useEffect, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Canvas, useFrame } from '@react-three/fiber';
 import { TilesPlugin, TilesRenderer, EnvironmentControls } from '3d-tiles-renderer/r3f';
-import { TilesFadePlugin, CesiumIonOverlay, EnforceNonZeroErrorPlugin } from '3d-tiles-renderer/plugins';
+import { TilesFadePlugin, EnforceNonZeroErrorPlugin, GeoJSONOverlay } from '3d-tiles-renderer/plugins';
 import { BoxGeometry, EdgesGeometry, Euler, Matrix4, Quaternion, Vector3 } from 'three';
 import { PivotControls } from '@react-three/drei';
 import { ImageOverlay, ImageOverlayPlugin } from './plugins/ImageOverlayPlugin.jsx';
@@ -11,6 +11,26 @@ import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeome
 
 const tilesetUrl = 'https://raw.githubusercontent.com/NASA-AMMOS/3DTilesSampleData/master/msl-dingo-gap/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize_tileset.json';
 
+// construct a shape via geojson
+const shape = [];
+for ( let i = 0; i < 100; i ++ ) {
+
+	const x = Math.sin( Math.PI * 2 * i / 100 );
+	const y = Math.cos( Math.PI * 2 * i / 100 );
+	const len = Math.sin( 10 * 2 * Math.PI * i / 100 ) * 10 + 75;
+
+	shape.push( [ x * len, y * len ] );
+
+}
+
+const geojson = {
+	type: 'Feature',
+	geometry: {
+		type: 'Polygon',
+		coordinates: [ shape ],
+	},
+};
+
 function Scene() {
 
 	const [ transformRoot, setTransformRoot ] = useState( null );
@@ -74,13 +94,15 @@ function Scene() {
 
 			{/* 3D Tiles renderer tileset */}
 			<group rotation-x={ Math.PI / 2 }>
-				<TilesRenderer url={ tilesetUrl }>
+				<TilesRenderer url={ tilesetUrl } errorTarget={ 6 }>
 					<TilesPlugin plugin={ TilesFadePlugin } fadeDuration={ 500 } />
 					<ImageOverlayPlugin>
 						<ImageOverlay
-							type={ CesiumIonOverlay }
-							assetId='3954'
-							apiToken={ import.meta.env.VITE_ION_KEY }
+							type={ GeoJSONOverlay }
+							geojson={ geojson }
+							color={ 'red' }
+							strokeWidth={ 10 }
+							fillStyle={ 'rgba( 255, 255, 255, 0.25 )' }
 							worldToProjection={ worldToProjectionMatrix }
 							ref={ setOverlay }
 						/>

example/r3f/projection.jsx

@@ -6,7 +6,6 @@ import { XYZImageSource } from './sources/XYZImageSource.js';
 import { TMSImageSource } from './sources/TMSImageSource.js';
 import { WMTSImageSource } from './sources/WMTSImageSource.js';
 import { WMSImageSource } from './sources/WMSImageSource.js';
-import { GeoJSONImageSource } from './sources/GeoJSONImageSource.js';
 
 // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
 export class XYZTilesPlugin extends EllipsoidProjectionTilesPlugin {
@@ -77,19 +76,6 @@ export class WMTSTilesPlugin extends EllipsoidProjectionTilesPlugin {
 
 }
 
-export class GeoJSONTilesPlugin extends EllipsoidProjectionTilesPlugin {
-
-	constructor( options = {} ) {
-
-		super( options );
-
-		this.name = 'GEOJSON_TILES_PLUGIN';
-		this.imageSource = new GeoJSONImageSource( options );
-
-	}
-
-}
-
 export class WMSTilesPlugin extends EllipsoidProjectionTilesPlugin {
 
 	constructor( options = {} ) {

src/three/plugins/images/EPSGTilesPlugin.js

@@ -38,7 +38,7 @@ export class XYZTilesOverlay extends ImageOverlay {
 
 }
 
-export class GeoJSONTilesOverlay extends ImageOverlay {
+export class GeoJSONOverlay extends ImageOverlay {
 
 	constructor( options: {
 		// rasterize GeoJSON per tile (forwarded to GeoJSONImageSource)

src/three/plugins/images/ImageOverlayPlugin.d.ts

@@ -1476,7 +1476,7 @@ export class XYZTilesOverlay extends ImageOverlay {
 
 }
 
-export class GeoJSONTilesOverlay extends ImageOverlay {
+export class GeoJSONOverlay extends ImageOverlay {
 
 	constructor( options = {} ) {
 

src/three/plugins/images/ImageOverlayPlugin.js

@@ -17,7 +17,7 @@ export class GeoJSONImageSource extends TiledImageSource {
 		pointRadius = 6,
 		strokeStyle = 'white',
 		strokeWidth = 2,
-		fillStyle = 'rgba( 255, 255, 255, 0.65 )',
+		fillStyle = 'rgba( 255, 255, 255, 0.5 )',
 	} = {} ) {
 
 		super();