three-tile-example 给大家提供一个 three-tile 最小化应用示例

不用web服务器，将下面代码保存为html，用浏览器打开即可运行

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
		/>
		<title>three-tile最小化应用</title>
	</head>
	<style>
		html,
		body {
			background-color: #333;
			height: 100%;
			width: 100%;
			padding: 0;
			margin: 0;
			display: flex;
		}
		#map {
			flex: 1;
		}
	</style>

	<!-- 因[email protected]+废弃了普通导入方式，需要改为使用importmap导入 -->
	<script type="importmap">
		{
			"imports": {
				"three": "https://unpkg.com/[email protected]/build/three.module.js",
				"three-tile": "https://unpkg.com/[email protected]/dist/three-tile.js"
			}
		}
	</script>

	<body>
		<div id="map"></div>
		<script type="module">
			import * as THREE from "three";
			import * as tt from "three-tile";

			console.log(`three-tile v${tt.version} start!`);

			// MapBoxToken 请更换为你自己申请的key
			const MAPBOXKEY =
				"pk.eyJ1Ijoic3ZjLW9rdGEtbWFwYm94LXN0YWZmLWFjY2VzcyIsImEiOiJjbG5sMnBoMm0xeWZzMmtyaWl0b2wyN2FuIn0.-zx1KP3Oy-7YzWcvhbv22Q";

			// mapbox影像数据源
			const mapBoxImgSource = new tt.plugin.MapBoxSource({
				token: MAPBOXKEY,
				dataType: "image",
				style: "mapbox.satellite",
			});
			// mapbox地形数据源
			const mapBoxDemSource = new tt.plugin.MapBoxSource({
				token: MAPBOXKEY,
				dataType: "terrain-rgb",
				style: "mapbox.terrain-rgb",
				maxLevel: 15,
			});

			// 创建地图
			const map = tt.TileMap.create({
				// 影像数据源
				imgSource: mapBoxImgSource,
				// 地形数据源
				demSource: mapBoxDemSource,
				// 地图投影中心经度
				lon0: 90,
				// 最小缩放级别
				minLevel: 2,
				// 最大缩放级别
				maxLevel: 18,
			});
			// 地图旋转到xz平面
			map.rotateX(-Math.PI / 2);

			// 地图中心坐标(经度，纬度，高度)
			const centerGeo = new THREE.Vector3(105, 30, 0);
			// 摄像坐标(经度，纬度，高度)
			const camersGeo = new THREE.Vector3(105, 0, 5000);
			// 地图中心转为世界坐标
			const centerPostion = map.localToWorld(map.geo2pos(centerGeo));
			// 摄像机转为世界坐标
			const cameraPosition = map.localToWorld(map.geo2pos(camersGeo));
			// 初始化场景
			const viewer = new tt.plugin.GLViewer("#map", { centerPostion, cameraPosition });

			// 地图添加到场景
			viewer.scene.add(map);
		</script>
	</body>
</html>

操作：鼠标左键平移；右键旋转；滚轮缩放

Jul 10 '24 03:07 sxguojf

你好能够添加比例尺吗

Jul 15 '24 01:07 zenghaiy

你好能够添加比例尺吗

三维环境下由于透视关系，地图上每一点缩放都不同，没法用一个固定比例来衡量。比例尺只能是个装饰品。

如果你一定要一个，可以参考step1.3，用摄像机离地图中点的距离，它与缩放比例线性相关，可以给它乘个系数来估算。

上图红色标记的为摄像机离地图中心的距离

Jul 15 '24 01:07 sxguojf