其他分享
首页 > 其他分享> > threeJS-geo加载地形的实际应用

threeJS-geo加载地形的实际应用

作者:互联网

Q:threeJs与GIS结合,threeJs中已加载有真实地理位置的三维模型和点线数据,需加载地形和影像数据,与模型数据、矢量数据匹配。

A:

1. 地形影像加载

threeJs-geo已基于threeJS和mapbox封装了地形和影像的加载库,基本用法:

const tgeo = new ThreeGeo({
	tokenMapbox: '', // <---- set your Mapbox API token here
});

const terrain = await tgeo.getTerrainRgb(
	[lat, lng],   // [36, 118], 经纬度
	radius,       // 2, radius of bounding circle (km) , 
	zoom);   // 14,  影像级别
scene.add(terrain);

three-geo是基于mapbox封装的,因此需要mapbox地图的token(官网申请),此处用到的方法是getTerrainRgb,地形作为模型加载而影像是地形模型的贴图,三个参数的含义在代码注释中已经写的很清楚,加载效果:

如果仅仅是看一下某个地方的地形影像,到此处完结!

但是要与真实地理数据匹配,就存在以下问题:

     1)地形位置问题:地形在threeJS加载的默认位置为(0,0,0)点, 需将地形定位到真实地理位置

     2)地形比例问题:地形单位与threejs场景单位不一致,此处获取到地形作为模型加载后,比例缩小(缩小规则未搞清),如加载半径2km范围的地形,获取到的模型大小是长宽均为1.27,明显不对

 

2. 地形位置问题

threeJS使用的是世界坐标,在该问题中,获取地形的经纬度不是凭空捏造的

     1)拾取坐标点:在threeJS场景中拾取模型或矢量数据上的某一个点p1(a, b, c),作为要加载和显示地形的地方

     2)p1为世界坐标,在GIS的概念中,也是投影坐标,通过proj4.js库将p1转为经纬坐标

let lonlat = proj4(poi1Projection, proj4('EPSG:4326'), p1);

p1为地形的加载位置, lonlat为获取地形&影像的经纬度参数

terrain.position.set(p1.x, p1.y, 0)

 

3. 地形比例问题

首先要认识一个问题,three-geo获取到的地形模型的真实大小是否与radius设置的值相符?并不。

假设参数radius设为2,获取到的地形&影像范围长宽并非为4km,而是做了相交处理,以2km为半径获取相交的影像瓦片及瓦片对应的地形范围,如:

radius=0.5, 瓦片数量:1x2,地形模型大小1.27

radius=2,瓦片梳理:2x2,地形模型大小1.27

所以地形初始化加载时的大小与radius设置的半径范围关联不大,加载的地形&影像真实范围屈居于相交的影像瓦片数量。

(以上问题可阅读threeJS-geo源码)

解决方式: 

    1)计算 R(纬度圈所在半径) = 地球半径 * cos(lat)

         (注:  纬度lat在前文算出的lonlat中已获得,JS中Math.cos方法用的是弧度而不是角度, 需把 lat 转为弧度 lat * PI /180)

    2)计算瓦片分辨率 resolution = 2*PI*R/(pixel*Math.pow(2,zoom)) 

         (注: R为所在纬度圈的半径,而非地球半径,dpi为影像瓦片像素,mapbox的瓦片像素为512, zoom为缩放等级)   

    3)计算xy瓦片数量 number: 用的办法比较土,观察terrain模型,它本质上是由瓦片组成,每个瓦片是模型的一个子节点,所以terrain.children.length 其实就是瓦片的数量, 而且存在一个特点: terrain.children.length = numberX * numberY (x方向瓦片数量和y方向瓦片数量, xy很多时候是相等的)。 然后初中数学就可以算出来numberX 和 numberY 了

            let xNum, yNum
			let sqrtSide = Math.sqrt( terrain.children.length )
			if(sqrtSide%1 === 0){
				xNum = yNum = sqrtSide
			}else{
				let n = boxSize.x/boxSize.y // terrain.children.length = (yNum * n) * yNum = n * Math.pow(yNum , 2)
				yNum = Math.round(Math.sqrt(terrain.children.length/n)) // 瓦片数量
				xNum = Math.round(yNum * n)
			}

    4)地形真实大小: width = numberX * resolution * pixel, 

                             height = numberY * resolution * pixel

    5)获取地形缩放比例尺: scale = width/modelWidth

 

以上,设置好地形模型的位置,修改比例尺,那么结果就是对的了,当然仍然存在一定的误差,radius越大,加载的面积越大误差越大。

 

关键代码:

var targetProjection = `PROJCS["CGCS2000 / 3-degree Gauss-Kruger CM 120E",
    GEOGCS["China Geodetic Coordinate System 2000",
        DATUM["China_2000",
            SPHEROID["CGCS2000",6378137,298.257222101,
                AUTHORITY["EPSG","1024"]],
            AUTHORITY["EPSG","1043"]],
        PRIMEM["Greenwich",0,
            AUTHORITY["EPSG","8901"]],
        UNIT["degree",0.0174532925199433,
            AUTHORITY["EPSG","9122"]],
        AUTHORITY["EPSG","4490"]],
    PROJECTION["Transverse_Mercator"],
    PARAMETER["latitude_of_origin",0],
    PARAMETER["central_meridian",120],
    PARAMETER["scale_factor",1],
    PARAMETER["false_easting",500000],
    PARAMETER["false_northing",0],
    UNIT["metre",1,
        AUTHORITY["EPSG","9001"]],
    AUTHORITY["EPSG","4549"]]`;

// proj4的定义方式有两种
// proj4.defs([["EPSG:4549","+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"]])
// targetProjection = proj4('EPSG:4549')

		let coord = proj4(targetProjection, proj4('EPSG:4326'), [p1.x, p1.y]);
		camera.position.set(0, 0, 1.5);

		(async () => { // main
			const tgeo = new ThreeGeo({
				tokenMapbox: 'pk.eyJ1IjoibGF2b25uZSIsImEiOiJja2xodXhwN20xeHJrMm9tanQzc2s3dzR1In0.M4qxPgDJDitR7JvmXrUXdQ', // <---- set your Mapbox API token here
			});

			if (tgeo.tokenMapbox === '********') {
				const warning = 'Please set your Mapbox API token in ThreeGeo constructor.';
				alert(warning);
				throw warning;
			}


			let zoomLevel = 16
			const terrain = await tgeo.getTerrainRgb(
					[coord[1], coord[0]], // [lat, lng]
					7,               // radius of bounding circle (km)
					zoomLevel);      // zoom resolution


			// resolution = 2*PI*R/(256*Math.pow(2,zoom)) 256为像素。根据不同地图瓦片像素进行修改
 
            let R = 20037508.34 * Math.cos(coord[0] * 3.1415926 /180)
			let resolution = R * 2 / (512 * Math.pow(2 , zoomLevel))
		
			let box = new THREE.Box3()
			box.setFromObject(terrain)
			let boxSize = box.size()
			let xNum, yNum
			let sqrtSide = Math.sqrt( terrain.children.length )
			if(sqrtSide%1 === 0){
				xNum = yNum = sqrtSide
			}else{
				let n = boxSize.x/boxSize.y // terrain.children.length = (yNum * n) * yNum = n * Math.pow(yNum , 2)
				yNum = Math.round(Math.sqrt(terrain.children.length/n)) // 瓦片数量
				xNum = Math.round(yNum * n)
			}
			let width = resolution * 512 * xNum
			let height = resolution * 512 * yNum
			terrain.scale.multiplyScalar(width/boxSize.x)
            terrain.position.set(p1.x, p1.y, 0);
			scene.add(terrain);

			renderer.render(scene, camera);
		})();

 

标签:threeJS,p1,EPSG,地形,瓦片,geo,影像,加载
来源: https://blog.csdn.net/sf352113939/article/details/117785976