完善了高德地图的gis场景。 待优化一个小问题

src/plugins/AMapGIS/components/buildingModels.vue

@@ -1,10 +1,9 @@
 
 <template>
-	<TresGroup :position="tgPosition" :rotate-z="-Math.PI / 2">
+	<TresGroup>
 		<TresMesh v-for="(item, index) in meshList" :key="`${index}`">
 			<TresBufferGeometry ref="tbgRef" :position="[item.positionArray, 3]" :faceUv="[item.uvArray, 2]"
 				:normal="[item.normalArray, 3]" />
-			<!-- <TresMeshBasicMaterial color="orange" /> -->
 			<TresShaderMaterial v-bind="tsMaterialConfig" />
 		</TresMesh>
 	</TresGroup>
@@ -12,7 +11,7 @@
 
 <script lang="ts" setup>
 import { loadGeojson } from 'PLS/digitalCity/common/utils'
-import { shallowRef, watchEffect, reactive } from 'vue'
+import { watchEffect, reactive } from 'vue'
 import vertexShader from '../shaders/buildingModels.vert?raw'
 import fragmentShader from '../shaders/buildingModels.frag?raw'
 import { useMapStore } from '../stores/mapStore'
@@ -50,16 +49,22 @@ const transP2 = (arr: Array<number>) => {
 		arr[i + 1] = outP[1]
 	}
 }
+const transP3 = (arr: Array<number>) => {
+	for (let i = 0; i < arr.length; i += 3) {
+		const s = [arr[i], arr[i + 1]]
+		const outP = mapStore.mapHandle.customCoords.lngLatToCoord(s)
+		arr[i] = outP[0]
+		arr[i + 1] = outP[1]
+		arr[i + 2] = arr[i + 2]*0.2
+	}
+}
 
 const meshList = reactive([] as any)
-
 const markBuildingsPrimary = async () => {
-	const buildingsPrimary = await loadGeojson('plugins/AMapGIS/geojson/buildings.geojson', 'buildings')
+	const buildingsPrimary = await loadGeojson('https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/json/AMapGIS/latlngbuildings.geojson', 'buildings')
 	for (let index = 0; index < buildingsPrimary.length; index++) {
 		const element = buildingsPrimary[index]
-		// debugger
-		transP(element.geometry)
-		// debugger
+		transP3(element.geometry)
 		const positionArray = new Float32Array(element.geometry)
 		const uvArray = new Float32Array(element.faceUv)
 		const normalArray = new Float32Array(element.geometry.length)
@@ -81,24 +86,11 @@ const tsMaterialConfig = {
 	fragmentShader,
 }
 
-const tbgRef = shallowRef()
 watchEffect(() => {
-	if (tbgRef.value) {
-		// tbgRef.value.computeVertexNormals()
-		// tbgRef.value.computeBoundingBox()
-	}
 	if (mapStore.cameraState) {
 		markBuildingsPrimary()
-		tsMaterialConfig.uniforms.u_zoom.value = mapStore.mapHandle.getZoom()
-		tsMaterialConfig.uniforms.u_near.value = mapStore.cameraState.near
-		tsMaterialConfig.uniforms.u_far.value = mapStore.cameraState.far
 	}
 })
-
-const tgPosition = [0, 0, 0]
-// 9336520.282000005
-// 2987338.3369999975
-
 const { onLoop } = useRenderLoop()
 onLoop(() => {
 	if (mapStore.cameraState) {

src/plugins/AMapGIS/components/mapContainer.vue

@@ -19,26 +19,29 @@ const props = withDefaults(defineProps<{
 	center?: Array<Number>
 	zoom?: Number
 	pitch?: Number
+	mapStyle?: String
 }>(), {
 	center: [0, 0],
 	zoom: 14,
-	pitch: 50
+	pitch: 50,
+	mapStyle: 'normal',
 })
 
 const mapStore = useMapStore()
 let map = null
 onMounted(async () => {
 	await AMapLoader.load({
-		key: "0c7222955570f1b434c4adfcc1e955e8",
+		key: "0c7222955570f1b434c4adfcc1e955e8", //可自行修改成自己得高德API key
 		version: "2.0",
 	})
 		.then((_AMap) => {
 			map = new _AMap.Map('mapContainer', {
 				center: props.center,
-				zooms: [2, 20],
+				zooms: [1, 20],
 				viewMode: '3D',
 				zoom: props.zoom,
 				pitch: props.pitch,
+				mapStyle: 'amap://styles/'+props.mapStyle,
 			})
 			map.on('click', (e) => {
 				const text = `您在 [ ${e.lnglat.getLng()},${e.lnglat.getLat()} ] 的位置单击了地图！`

src/plugins/AMapGIS/config.js

@@ -9,7 +9,7 @@ export default {
 	"state": "active",
 	"require": [],
 	"preview": [
-		{ "src": "plugins/basic/base/preview/theBasic.png", "type": "img", "name": "cubeMesh", "title": "正方体实例" },
-		{ "src": "plugins/basic/base/preview/theBasic.png", "type": "img", "name": "buildings", "title": "建筑物" },
+		{ "src": "plugins/AMapGIS/preview/cubeMesh.png", "type": "img", "name": "cubeMesh", "title": "正方体实例" },
+		{ "src": "plugins/AMapGIS/preview/buildings.png", "type": "img", "name": "buildings", "title": "建筑物" },
 	]
 }

src/plugins/AMapGIS/pages/buildings.vue

@@ -7,15 +7,11 @@
  * @LastEditTime: 2024-02-22 17:38:18
 -->
 <template>
-	<mapContainer :center="mapCenter" :zoom="18" :pitch="65.59312320916906" />
+	<mapContainer :center="mapCenter" :zoom="19" :pitch="65.59312320916906" mapStyle="darkblue"/>
 	<TresCanvas id="tresCanvas" ref="tcRef" v-bind="state">
 		<TresPerspectiveCamera :fov="60" :near="0.1" :far="2000" />
 		<TresAmbientLight :intensity="0.5" />
 
-		<!-- <TresMesh :position="[-100, -100, 500]">
-			<TresBoxGeometry :args="[1000, 1000, 1000]" />
-			<TresMeshNormalMaterial />
-		</TresMesh> -->
 		<mergeTres :center="mapCenter" />
 
 		<Suspense>
@@ -32,7 +28,7 @@ import mergeTres from "../components/mergeTres.vue"
 
 import buildingModels from '../components/buildingModels.vue'
 
-const mapCenter = [121.449463, 31.174848]
+const mapCenter = [121.407867,31.157717]
 
 const state = reactive({
 	// windowSize: true,