优化修复场景

src/plugins/simpleGIS/components/tileMapBuildingsMesh.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-02-29 10:48:53
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-02-29 18:50:25
+-->
 <template>
 	<OrbitControls v-bind="controlsState" ref="orbitControlRef" />
 	<primitive :object="map" />
@@ -38,6 +46,8 @@ mapProvider.source = 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size
 // mapProvider.source = 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
 mapProvider.showTileNo = false
 mapProvider.useWorker = true
+//滤镜效果
+mapProvider.filter = 'invert(100%) hue-rotate(321deg) grayscale(80%) brightness(120%)'
 // mapProvider.debug = true
 
 const meshProvider = new TerrainMeshProvider(planProvider, mapProvider)
@@ -60,9 +70,27 @@ watchEffect(() => {
 	}
 	if (orbitControlRef.value && !firstOrbitControlRef) {
 		firstOrbitControlRef = true
+
+		// camera.value.lookAt(0, 0, 0)
+		// camera.value.position.x += 200
+		// camera.value.position.y -= 200
+		// camera.value.position.z = 600
+
 		orbitControlRef.value.value.target.x = camera.value.position.x
 		orbitControlRef.value.value.target.y = camera.value.position.y
 		orbitControlRef.value.value.target.z = 0
+
+		// camera.value.position.x = 187083.29118444995
+		// camera.value.position.y = 2493066.0481375763
+		// camera.value.position.z = 919.9993174713077
+
+		// camera.value.rotation.x = 0.5773496316950935
+		// camera.value.rotation.y = 0.35860567370955987
+		// camera.value.rotation.z = 0.4942056703070541
+		// map.camera = camera.value
+		// orbitControlRef.value.value.target.x = 186088.2115110314
+		// orbitControlRef.value.value.target.y = 2494148.892637813
+		// orbitControlRef.value.value.target.z = -0.000018780958164596405
 	}
 })
 

src/plugins/simpleGIS/components/tilesBuildings.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-02-28 14:45:57
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-02-29 12:40:18
+ * @LastEditTime: 2024-02-29 18:06:35
 -->
 <template>
 	<TresGroup>
@@ -22,6 +22,10 @@ import CustomShaderMaterial from 'three-custom-shader-material/vanilla'
 import vertexShader from '../shaders/buildingsShaderMaterial.vert?raw'
 import fragmentShader from '../shaders/buildingsShaderMaterial.frag?raw'
 
+import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2.js'
+import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js'
+
 const props = withDefaults(defineProps<{
 	bulidingsColor?: string
 	topColor?: string
@@ -45,6 +49,7 @@ const setEffectMaterial = (mesh: any) => {
 		vertexShader: vertexShader,
 		fragmentShader: fragmentShader,
 		silent: true,
+		// wireframe: true,
 		uniforms: {
 			uMax: { value: max },
 			uMin: { value: min },
@@ -84,6 +89,23 @@ tiles.onLoadModel = (scene: any) => {
 			setEffectMaterial(c)
 			c.receiveShadow = false
 			c.castShadow = false
+
+			// 增加线轮廓
+			const edges = new THREE.EdgesGeometry(c.geometry.clone())
+			let geometry = new LineSegmentsGeometry()
+			let wideEdges = geometry.fromEdgesGeometry(edges)
+			let edgesmaterial = new LineMaterial({
+				color: 0x000000,
+				linewidth: 1,
+				opacity: 1,
+				transparent: true,
+				depthWrite: true,
+				depthTest: true,
+			})
+			edgesmaterial.resolution.set(window.innerWidth, window.innerHeight)
+			const line = new LineSegments2(wideEdges, edgesmaterial)
+			line.applyMatrix4(c.matrix.clone())
+			c.parent.add(line)
 		}
 	})
 }

src/plugins/simpleGIS/lib/threeSatelliteMap/Providers/MapProvider/MapProvider.ts

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-02-26 18:58:32
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-02-29 11:05:45
+ * @LastEditTime: 2024-02-29 17:51:12
  */
 import { Texture } from 'three';
 import { Provider } from '../Provider';
@@ -17,6 +17,7 @@ class MapProvider implements Provider<Texture>{
     maxZoom = 20;
     source = 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&x=[x]&y=[y]&z=[z]';
     showTileNo = false;
+    filter = ''
     private _useWorker = false;
     private _worker?: PromiseWorker;
 
@@ -44,14 +45,14 @@ class MapProvider implements Provider<Texture>{
                 this._worker = new PromiseWorker(MapWorker);
             }
             const id = this.getId(tileNo);
-            const data = await this._worker.postMessage({ id, tileNo, url, debug: this.showTileNo });
+            const data = await this._worker.postMessage({ id, tileNo, url, debug: this.showTileNo, filter: this.filter });
             // @ts-ignore
             texture.image = data!.bitmap as ImageBitmap;
         } else {
             const fetch = new Fetch(url, { cache: 'force-cache', mode: 'cors' });
             this.fetching.set(tileNo, fetch);
             try {
-                texture.image = await getTileBitmap(tileNo, fetch, this.showTileNo);
+                texture.image = await getTileBitmap(tileNo, fetch, this.showTileNo, this.filter);
             } finally {
                 this.fetching.delete(tileNo);
             }

src/plugins/simpleGIS/lib/threeSatelliteMap/Providers/MapProvider/MapWorker.ts

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-02-26 18:58:32
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-02-29 11:05:49
+ * @LastEditTime: 2024-02-29 17:46:18
  */
 import { Fetch } from '../../Utils/Fetch';
 import { getTileBitmap } from './getTileBitmap';
@@ -14,13 +14,14 @@ type MessageType = MessageEvent<{
     tileNo: number[],
     url: string;
     debug?: boolean;
+    filter: string;
     abort?: boolean;
 }>;
 
 const fetchingMap = new Map<string, Fetch>();
 
 self.onmessage = async (e: MessageType) => {
-    const { id, tileNo, url, debug, abort } = e.data;
+    const { id, tileNo, url, debug, filter, abort } = e.data;
 
     if (abort) {
         fetchingMap.get(id)?.abort();
@@ -32,7 +33,7 @@ self.onmessage = async (e: MessageType) => {
     try {
         const fetch = new Fetch(url, { cache: 'force-cache', mode: 'cors' });
         fetchingMap.set(id, fetch);
-        const bitmap = await getTileBitmap(tileNo, fetch, debug);
+        const bitmap = await getTileBitmap(tileNo, fetch, debug, filter);
         // @ts-ignore
         self.postMessage({ id, bitmap }, [bitmap]);
     } catch (e) {

src/plugins/simpleGIS/lib/threeSatelliteMap/Providers/MapProvider/getTileBitmap.ts

@@ -4,37 +4,44 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-02-26 18:58:32
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-02-29 12:39:48
+ * @LastEditTime: 2024-02-29 17:53:19
  */
 import { Fetch } from '../../Utils/Fetch';
 
 let offscreencanvas: OffscreenCanvas;
 
-export async function getTileBitmap(tileNo: number[], fetch: Fetch, debug = false): Promise<ImageBitmap> {
+export async function getTileBitmap(tileNo: number[], fetch: Fetch, debug = false, filter: string): Promise<ImageBitmap> {
     const res = await fetch.ready();
     const blob = await res.blob();
     const bitmap = await createImageBitmap(blob, debug ? undefined : { imageOrientation: 'flipY' });
 
-    // if (!debug) {
-    //     return bitmap;
-    // }
+    if (filter && !debug) {
+        if (!offscreencanvas) {
+            offscreencanvas = new OffscreenCanvas(256, 256);
+        }
+        const ctx = offscreencanvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Offscreencanvas.getContext("2d") error!');
+        }
+        ctx.drawImage(bitmap, 0, 0)
+        // 应用模糊滤镜效果
+        ctx.filter = filter
+        return await createImageBitmap(offscreencanvas)
+    }
+
+    if (!debug) {
+        return bitmap;
+    }
 
     if (!offscreencanvas) {
-        offscreencanvas = new OffscreenCanvas(256, 256); // 256
+        offscreencanvas = new OffscreenCanvas(256, 256);
     }
     const ctx = offscreencanvas.getContext('2d');
     if (!ctx) {
         throw new Error('Offscreencanvas.getContext("2d") error!');
     }
-    const { width, height } = offscreencanvas
-    ctx.drawImage(bitmap, 0, 0)
-    // 应用模糊滤镜效果
-    ctx.filter = 'invert(100%) hue-rotate(321deg) grayscale(80%) brightness(120%)' // 这里可以调整模糊程度
-
-
-    if (!debug) {
-        return await createImageBitmap(offscreencanvas);
-    }
+    const { width, height } = offscreencanvas;
+    ctx.drawImage(bitmap, 0, 0);
     ctx.rect(0, 0, width, height);
     ctx.strokeStyle = '#00FFFF';
     ctx.font = '20px Arial';

src/plugins/simpleGIS/pages/mapBuildings.vue

@@ -1,8 +1,7 @@
 
 <template>
 	<TresCanvas v-bind="state" window-size>
-		<TresPerspectiveCamera :position="mapCenter" :fov="60" :near="1" :far="1e8" :look-at="[mapCenter[0], mapCenter[1], 0]"
-			:up="[0, 0, 1]" />
+		<TresPerspectiveCamera :position="mapCenter" :fov="60" :near="1" :far="1e8" :up="[0, 0, 1]" />
 
 		<TresAmbientLight color="#ffffff" />
 		<TresDirectionalLight :position="[100, 100, 0]" :intensity="0.5" color="#ffffff" />