Home
Welcome to the three-tile-example wiki!
不用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>
<!-- 因three@v0.150+废弃了普通导入方式，需要改为使用importmap导入 -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.165.0/build/three.module.js",
"three-tile": "https://unpkg.com/three-tile@0.6.1/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>
