three-tile: 1. 第一个three-tile程序

上篇介绍了: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,保存看看效果。

第一讲,不需要读懂,复制过去能运行出来就行,后面将持续更新。

雄伟的喜马拉雅,我咋感觉搞辆铲车直接能开上去...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/791016.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spark-RDD和共享变量

概览 每个Spark应用程序都由一个driver program 组成&#xff0c;该驱动程序运行我们编写的main函数&#xff0c;并在集群上执行各种 并行 操作。Spark提供的主要抽象是一个 弹性分布式数据集&#xff08;RDD&#xff09;&#xff0c;它是一个跨集群节点分区的元素集合&#x…

maven7——(重要,构建项目)maven项目构建(命令)

Maven的常用命令管理项目的生命周期 clean命令 清除编译产生的target文件夹内容&#xff0c;可以配合相应命令在cmd中使用&#xff0c;如mvn clean package&#xff0c; mvn clean test D:\工作\公司培训-4班\day20\day20\untitled1>mvn clean compile命令 该命令可以…

Nginx: Rewrite功能配置/Nginx反向代理/Nginx的安全控制SSL

Rewrite功能配置 Rewrite是Nginx服务器提供的一个重要基本功能&#xff0c;是Web服务器产品中几乎必备的功能。主要的作用是用来实现URL的重写。www.jd.com 注意:Nginx服务器的Rewrite功能的实现依赖于PCRE的支持&#xff0c;因此在编译安装Nginx服务器之前&#xff0c;需要安…

[ICS] Inferno(地狱) ETH/IP未授权访问,远程控制工控设备利用工具

项目地址:https://github.com/MartinxMax/Inferno Inferno $ ./Install.sh $ python Inferno.py -h 模拟服务端 $ sudo python3 -m pip install --upgrade cpppo $ $ python -m cpppo.server.enip SCADAINT[1000] ADMININT[2] -v 创建一个EtherNet/IP设备 扫描设备 $ pyth…

【网络安全】Oracle:SSRF获取元数据

未经许可&#xff0c;不得转载。 文章目录 前言正文漏洞利用 前言 Acme 是一家广受欢迎的播客托管公司&#xff0c;拥有庞大的客户群体。与许多大型运营公司一样&#xff0c;Acme 采用了Apiary的服务&#xff0c;使用户能够安全高效地管理他们的播客。 Apiary 于2017年初被Or…

【Django项目】基于Python+Django+MySQL的音乐网站系统项目

功能介绍 首页&#xff1a;歌曲分类、歌曲搜索、热门歌曲、热门下载、新歌推荐 歌曲排行&#xff1a;歌曲分类、分页功能 用户板块&#xff1a;用户登陆/注册、播放历史 歌曲详情&#xff1a;歌曲播放、当前播放列表、歌曲点评、歌曲播放插件、下载歌曲 系统后台&#xff1a;歌…

如何将Docker镜像源更改为阿里云的镜像加速地址

在使用Docker时&#xff0c;尤其是在国内环境下&#xff0c;由于网络原因&#xff0c;从Docker Hub拉取镜像可能会遇到速度较慢的问题。为了提高拉取速度&#xff0c;我们可以将Docker的镜像源更改为阿里云等国内镜像源。下面详细介绍如何获取并配置阿里云的Docker镜像加速地址…

【中项第三版】系统集成项目管理工程师 | 第 4 章 信息系统架构⑤ | 4.8 - 4.9

前言 第4章对应的内容选择题和案例分析都会进行考查&#xff0c;这一章节属于技术相关的内容&#xff0c;学习要以教材为准。本章分值预计在4-5分。 目录 4.8 云原生架构 4.8.1 发展概述 4.8.2 架构定义 4.8.3 基本原则 4.8.4 常用架构模式 4.8.5 云原生案例 4.9 本章…

docker(六)--创建镜像

六、创建镜像 1.创建镜像两种方式 方式1&#xff1a; 更新镜像 docker commit 方式2&#xff1a;构建镜像 docker build 2.更新镜像 1&#xff09;用法 docker commit -m“描述信息” -a作者 容器id或者容器名 镜像名:tag 2&#xff09;步骤 ①根据镜像运行容器 ②进入容…

栈和队列题目详解

前言&#xff1a; 在前面我们学习了栈和队列&#xff0c;栈的特性是后进先出&#xff0c;队列的特性是先进先出&#xff0c;当我们了解了这些之后&#xff0c;我们就可以用到栈和队列的特性来简单的做一些题目了。 1. 有效的括号 有效的括号&#xff1a;. - 力扣&#xff08…

YOLOv10改进 | Conv篇 | 利用FasterBlock二次创新C2f提出一种全新的结构(全网独家首发,参数量下降70W)

一、本文介绍 本文给大家带来的改进机制是利用FasterNet的FasterBlock改进特征提取网络&#xff0c;将其用来改进ResNet网络&#xff0c;其旨在提高计算速度而不牺牲准确性&#xff0c;特别是在视觉任务中。它通过一种称为部分卷积&#xff08;PConv&#xff09;的新技术来减少…

火柴棒图python绘画

使用Python绘制二项分布的概率质量函数&#xff08;PMF&#xff09; 在这篇博客中&#xff0c;我们将探讨如何使用Python中的scipy库和matplotlib库来绘制二项分布的概率质量函数&#xff08;PMF&#xff09;。二项分布是统计学中常见的离散概率分布&#xff0c;描述了在固定次…

夏日智启:我的Datawhale AI夏令营探索之旅

前言 最近几年&#xff0c;AI&#xff08;人工智能&#xff09;的发展呈现出了前所未有的迅猛势头&#xff0c;其影响力和应用范围不断扩大&#xff0c;深刻地改变着我们的生活、工作和社会结构。尤其是AI大模型技术&#xff0c;国内外可谓是“百模大战”&#xff0c;百舸争流…

ESP32网络开发:1.创建一个基于TCP网络协议的网站

一、TCP协议的介绍 TCP&#xff08;传输控制协议&#xff0c;Transmission Control Protocol&#xff09;是互联网协议套件中的一种核心协议&#xff0c;主要用于在网络中的计算机之间可靠地传输数据。TCP协议位于OSI模型&#xff08;开放系统互联模型&#xff09;的传输层&…

虚拟机内安装vue-dev-tools

前言 项目开发调试都需要在Citrix在虚拟机环境下&#xff0c;Citrix内连接不到外网&#xff0c;在这边文章&#xff0c;我将介绍自己在Citrix环境内安装 vue-dev-tools的经验 环境 vue 步骤 1. 下载.crx文件 百度网盘里的 .crx文件的 下载链接 2. 加载.crx文件 打开浏览…

软件兼容性测试重要吗?有哪些测试流程和注意事项?

软件兼容性测试是指测试软件在不同硬件、操作系统、网络环境和软件环境下的稳定性和可用性的能力&#xff0c;也就是说&#xff0c;软件在不同的平台上是否能正常运行&#xff0c;是否能与其他软件和系统兼容。 兼容性问题是影响软件用户体验的重要因素之一&#xff0c;如果软…

学习大数据DAY13 PLSQL基础语法2

目录 选择结构 IF语句 简单判断语句 带判断不成立语句 多判断语句 IF语句注意事项&#xff1a; CASE 语句 简单CASE语句 搜索型CASE语句 作业 循环语句 循环结构 简单循环 属性 描述 位置 场景 WHILE循环 属性 FOR循环 数值型for循环 数值型for循环的特性…

【Redis】简单了解Redis中常用的命令与数据结构

希望文章能给到你启发和灵感&#xff5e; 如果觉得文章对你有帮助的话&#xff0c;点赞 关注 收藏 支持一下博主吧&#xff5e; 阅读指南 开篇说明一、基础环境说明1.1 硬件环境1.2 软件环境 二、Redis的特点和适用场景三、Redis的数据类型和使用3.1字符串&#xff08;String&…

谷粒商城实战笔记-24-分布式组件-SpringCloud Alibaba-Nacos配置中心-命名空间与配置分组

文章目录 一&#xff0c;命名空间1&#xff0c;简介1.1&#xff0c;命名空间的主要功能和特点1.2&#xff0c;使用场景1.3&#xff0c;如何指定命名空间 2&#xff0c;命名空间实战2.1&#xff0c;环境隔离2.2&#xff0c;服务隔离 二&#xff0c;配置集三&#xff0c;配置集ID…

HTML+CSS+JS 实现3D风吹草动效果(B站视频)

效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>3D effect&…