上篇介绍了:three-tile: 一个开源的轻量级三维瓦片库-CSDN博客
three-tile 是一个开源的轻量级三维瓦片库,它基于threejs使用typescript开发,提供一个三维地形模型,能轻松给你的应用增加三维瓦片地图。
项目地址:https://github.com/sxguojf/three-tile
示例地址:https://github.com/sxguojf/three-tile-example
这篇,我们来使用three-tile编写一个简单示例,它显示一张三维地图,鼠标左键平移,右键旋转,滚轮缩放。
废话不多说,先上代码:
<!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>
将上面代码保存为html文件,不需要web服务,用浏览器打开即可运行。由于地图数据在墙外,加载可能有点慢,多等一会。
懒得复制?那直接到这里体验:https://inscode.csdn.net/@hzgjf/HTML-CSS-JS
代码比较简单,要理解,需要一些threejs或opengl基础知识,没学过也不要紧,我会后面会慢慢讲解。
1. 引入three和three-tile
three-tile是基于threejs开发,先引入这两个包:
<!-- 因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>
引入方式不是常见的写法,这是由于threejs r150+后,已经废弃老式写法了,不得不跟。详情见:
https://threejs.org/docs/index.html#manual/zh/introduction/Installation
为了简单,这里采用CDN方式,后面我们讲解会用NPM方式。
2. 创建数据源
既然是瓦片地图,那肯定先要定义数据源,three-tile内建了mapbox、bing、google、天地图、高德等等数据源定义,这里我们选用mapboxe的:
// 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,
});
不明白啥意思?没关系,抄上就行,后面会讲解,需要注意的是,mapbox的token最好自己申请,不要用我上面的,用的人多超出限额大家都没得玩了。
3. 创建地图
// 创建地图
const map = tt.TileMap.create({
// 影像数据源
imgSource: mapBoxImgSource,
// 地形数据源
demSource: mapBoxDemSource,
// 地图投影中心经度
lon0: 90,
// 最小缩放级别
minLevel: 2,
// 最大缩放级别
maxLevel: 18,
});
// 地图旋转到xz平面
map.rotateX(-Math.PI / 2);
这里,用three-tile的TileMap.create函数,创建了一个地图模型,类型是threejs的Mesh,然后把模型旋转-90°到xz平面,函数参数把刚创建的地图数据源传进去,其它参数先照抄,后面讲解。
4. 初始化三维场景并添加地图
三维场景的初始化,就是threejs套路,创建场景、渲染器、摄像机、控制器、灯光等等,你从threejs中抄过来就行,但为了降低使用难度,three-tile内置了一个GLViewer类封装了这些操作,你只需要传入参数即可:
// 地图中心坐标(经度,纬度,高度)
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);
GLViewer构造参数需要在网页上放置地图的dom的ID,这里是"#map",对应的html中那唯一的一个div,另外,需要地图中心坐标和摄像机坐标,用来控制地图的位置、缩放和旋转,这两坐标需要传入三维场景坐标,我们通过将经纬度高度转换得来:
centerGeo:地图中心经纬度高度,就是地图以哪个点为中心(105°E,30°N,0km)
cameraGeo:摄像机的经纬度高度,就是你站点哪个位置看地图(105°E,0°,5000km)
这两参数为可选参数,如果不清楚耶可以省略。
最后,将地图加入三维场景中,OK,保存看看效果。
第一讲,不需要读懂,复制过去能运行出来就行,后面将持续更新。
雄伟的喜马拉雅,我咋感觉搞辆铲车直接能开上去...