在高德地图上加载3DTilesLayer图层模型/天地瓦片

1. 引入必要的库
  • Three.js:一个用于创建和显示3D图形的JavaScript库。
  • @vuemap/three-layer:一个Vue插件,它允许你在高德地图中添加Three.js图层。
  • @vuemap/layer-3dtiles:一个用于处理3D Tiles格式数据的Vue插件,可以用来加载和渲染3D模型。
npm install three @vuemap/three-layer @vuemap/layer-3dtiles
# 或者
yarn add three @vuemap/three-layer @vuemap/layer-3dtiles

import { AmbientLight } from 'three';
import { ThreeLayer } from '@vuemap/three-layer';
import { Layer3DTiles } from '@vuemap/layer-3dtiles';
2. 使用 AmbientLight 添加环境光

AmbientLight 是Three.js中的一个类,用于为场景提供均匀的光照效果。它不会产生阴影,并且其颜色和强度会均匀地照亮所有对象。这对于增强3D模型的可见性和真实感非常有用。

  • 参数:

    • color (Hexadecimal): 光的颜色,默认是白色(0xffffff)。
    • intensity (Number): 光的强度,默认是1.0。
  • 示例:

const light = new AmbientLight(0xffffff, 2); // 白色光,强度为2
layer.add(light); // 将环境光添加到ThreeLayer实例中
3. 使用 ThreeLayer 创建3D图层

ThreeLayer 是由 @vuemap/three-layer 提供的一个类,它允许你将Three.js场景作为一个图层添加到高德地图中。这个类封装了Three.js的核心功能,并与高德地图API进行了集成,使得我们可以轻松地在地图上展示3D内容。

  • 构造函数参数:

    • map (AMap.Map): 高德地图实例。
  • 方法:

    • on(event, callback): 监听事件,例如complete,当图层加载完成时触发。
    • add(object): 向图层中添加Three.js的对象,如灯光、几何体等。
    • setzIndex(index): 设置图层的z-index,以控制图层的堆叠顺序。
  • 示例:

const layer = new ThreeLayer(map);
layer.on('complete', () => {// 图层加载完成后执行的操作
});
layer.setzIndex(10); // 设置较低的zIndex,确保模型不覆盖其他内容
4. 使用 Layer3DTiles 加载3D模型

Layer3DTiles 是由 @vuemap/layer-3dtiles 提供的一个类,专门用于加载和渲染符合3D Tiles规范的数据。3D Tiles是一种开放标准,旨在高效地传输和渲染大规模三维地理空间数据集。它支持多种几何类型,包括点云、BIM/CAD模型、倾斜摄影等。

  • 构造函数参数:

    • layer (ThreeLayer): 作为父容器的ThreeLayer实例。
    • options (Object): 包含配置选项的对象,如urlposition等。
  • 配置选项:

    • url (String): 指向3D Tiles数据源的URL。
    • position (Array): 模型的位置,通常是[经度, 纬度, 海拔]的形式。
    • rotation (Object): 模型的旋转属性,包含x, y, z轴的旋转角度。
    • scale (Object): 模型的比例因子,用于缩放模型。
    • translate (Object): 模型的平移属性,用于调整模型的位置。
  • 方法:

    • setRotation(rotation): 设置模型的旋转属性。
    • setScale(scale): 设置模型的比例因子。
    • setTranslate(translate): 设置模型的平移属性。
  • 示例:

const tiles = new Layer3DTiles(layer, {url: value.url,position: value.position,
});
tiles.setRotation({ ...value.modelRotation });
tiles.setScale({ ...value.modelScale });
tiles.setTranslate({ ...value.translate });
5. 整合一切
const get3dmap = async (map) => {let data = await mapApi().get3dmap({ }); //请求模型数据if (data.status * 1 == 200) {handleSelectValue.value = data.data.modelInfo.map((item) => ({  //用作下拉框切换模型label: item.modelName,value: JSON.stringify(item.draw_model_config[0].position),}));let models = data.data.modelInfo;let layers = [];for (let model of models) {let modelConfig = model.draw_model_config.filter(config => config.type === '3D');if (modelConfig.length > 0) {let value = modelConfig[0];const layer = new ThreeLayer(map);layer.on('complete', () => {const light = new AmbientLight('#fff', 2);layer.add(light);const tiles = new Layer3DTiles(layer, {url: value.url,position: value.position,});tiles.setRotation({ ...value.modelRotation });tiles.setScale({ ...value.modelScale });tiles.setTranslate({ ...value.translate });});layer.setzIndex(10);layers.push(layer);}}return layers;}
};
6. 初始化地图并添加3D图层

最后,我们需要初始化高德地图,并在地图加载完成后调用 get3dmap 函数来获取3D模型并将其添加到地图中。同时,还可以添加其他类型的图层,比如瓦片图层,来丰富地图的内容。

function onMapInit(map) {mapInstance = map;get3dmap(map).then(layers => {layers.forEach(layer => {map.add(layer);});});const key = window.KEY || ''; //天地瓦片keyconst wmts = new AMap.TileLayer({tileUrl: `http://t0.tianditu.gov.cn/DataServer?T=img_w&tk=${key}&x=[x]&y=[y]&l=[z]`,zIndex: 1,});map.add(wmts);
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 高级路由 —— 筑梦之路

Linux 高级路由详解 本文将基于您提供的 Linux 高级路由极简教程 文章,深入探讨 Linux 高级路由的概念、配置方法以及应用场景。 一、什么是 Linux 高级路由? Linux 高级路由是指利用 Linux 内核提供的强大网络功能,实现超越传统路由表和默…

IP 地址与蜜罐技术

基于IP的地址的蜜罐技术是一种主动防御策略,它能够通过在网络上布置的一些看似正常没问题的IP地址来吸引恶意者的注意,将恶意者引导到预先布置好的伪装的目标之中。 如何实现蜜罐技术 当恶意攻击者在网络中四处扫描,寻找可入侵的目标时&…

【Word_笔记】Word的修订模式内容改为颜色标记

需求如下:请把修改后的部分直接在原文标出来,不要采用修订模式 步骤1:打开需要转换的word后,同时按住alt和F11 进入(Microsoft Visual Basic for Appliations) 步骤2:插入 ---- 模块 步骤3&…

[0405].第05节:搭建Redis主从架构

Redis学习大纲 一、3主3从的集群配置: 1.1.集群规划 1.分片集群需要的节点数量较多,这里我们搭建一个最小的分片集群,包含3个master节点,每个master包含一个slave节点,结构如下: 2.每组是一主一从&#x…

科研绘图系列:R语言绘制分组箱线图(boxplot)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据数据预处理画图输出系统信息介绍 科研绘图系列:R语言绘制分组箱线图(boxplot) 加载R包 library(ggpubr) library(ggplot2) library(tidyverse) # dev…

Hadoop - MapReduce编程

文章目录 前言一、创建mapreduce-demo项目1. 在idea上创建maven项目2. 导入hadoop相关依赖 二、MapReduce编程1. 相关介绍1.1 驱动类(Driver Class)1.1.1 驱动类的定义1.1.2 驱动类的功能1.1.3 驱动类的作用 1.2 Mapper1.2.1 Mapper 的定义1.2.2 Mapper …

原码的乘法运算>>>只有0,1

MQ : 乘数 X : 被乘数 ACC : 乘积高位 [当前位是1,加上被乘数; 当前位是 0,加上0] 例如: MQ的最低位是1,所以要加上被乘数(01101) >>>> 得出 01101 >>>>> ACC MQ 需要整体逻辑右移 (原本01101 01011 >>> 001101 0101) 现在的次低位是…

第四、五章图论和网络爬虫+网络搜索

第四章 图论和网络爬虫 4.1 构建网络爬虫工程重点 构建网络爬虫的重点 用BFS还是DFS 在不考虑时间的情况下,这两种不同的搜索方法都可以在相同的时间下爬下整个静态的互联网内容,但是在现实中肯定是需要考虑时间以及互联网动态变化的。所以重点应该是如…

mapbox基础,style样式汇总,持续更新

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言二、🍀根属性2.1 so…

《通过财报看企业》

“借贷关系”“净资产收益率”“财务报表”、净利润、盈利能力、现金流 第1章 净利润:决定一家公司的股价能涨多高 企业经营:存货周转率 企业市值:市值净利润市盈率 龙头企业:行业内收入规模最大、盈利能力最强,…

人工智能知识分享第九天-机器学习_集成学习

集成学习 概念 集成学习是机器学习中的一种思想,它通过多个模型的组合形成一个精度更高的模型,参与组合的模型称为弱学习器(基学习器)。训练时,使用训练集依次训练出这些弱学习器,对未知的样本进行预测时…

《量子比特大阅兵:不同类型量子比特在人工智能领域的优劣势剖析》

在科技的前沿,量子比特与人工智能的融合正开启一扇全新的大门。不同类型的量子比特,如超导、离子阱、光量子等,在与人工智能结合时展现出独特的优势与劣势。 超导量子比特 超导量子比特是目前应用较为广泛且研究相对成熟的量子比特类型。它…

【HTML+CSS+JS+VUE】web前端教程-10-列表标签之无序列表

无序列表实现 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记 无序列表始于<ul>标签,每个列表项始于<li>标签。<ul><li>苹果

页面滚动下拉时,元素变为fixed浮动,上拉到顶部时恢复原状,js代码以视频示例

页面滚动下拉时,元素变为fixed浮动js代码 以视频示例 <style>video{width:100%;height:auto}.div2,#float1{position:fixed;_position:absolute;top:45px;right:0; z-index:250;}button{float:right;display:block;margin:5px} </style><section id"abou…

微信小程序中调用阿里云 OSS(Object Storage Service)上传文件

在微信小程序中调用阿里云 OSS&#xff08;Object Storage Service&#xff09;上传文件&#xff0c;可以通过以下步骤实现。由于微信小程序的运行环境是浏览器环境的一个子集&#xff0c;因此需要使用适合小程序的 OSS SDK 或手动实现上传逻辑。 1. 准备工作 1.1 获取阿里云 …

排序算法——堆排序

什么是堆 堆就是一种特殊的二叉树&#xff0c;他有以下特点&#xff1a; 堆中某个节点的值总是不大于或不小于其父节点的值&#xff1b; 堆总是一棵完全二叉树。 堆又可以分为大根堆和小根堆 大根堆&#xff1a;根节点最大&#xff0c;每个节点都小于或等于父节点 小跟堆&am…

OpenCV相机标定与3D重建(51)对 3x3 矩阵进行 RQ 分解(RQ Decomposition)函数RQDecomp3x3()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算3x3矩阵的RQ分解。 cv::RQDecomp3x3 是 OpenCV 库中的一个函数&#xff0c;用于对 3x3 矩阵进行 RQ 分解&#xff08;RQ Decomposition&…

前端React Router从入门到进阶实战

React Router 是 React 应用中的一个重要库&#xff0c;它用于实现客户端的路由管理&#xff0c;能够将 URL 路径与 React 组件关联起来&#xff0c;从而实现页面之间的导航。React Router 不会像传统的多页面应用那样重新加载页面&#xff0c;而是通过组件切换来呈现不同的视图…

[备忘.OFD]OFD是什么、OFD与PDF格式文件的互转换

‌OFD&#xff08;Open Fixed-layout Document&#xff09;是一种由工业和信息化部软件司牵头中国电子技术标准化研究院制定的版式文档国家标准&#xff0c;属于中国的一种自主格式‌‌。OFD旨在打破政府部门和党委机关电子公文格式不统一的问题&#xff0c;以方便电子文档的存…

机器学习无处不在,AI顺势而为,创新未来

机器学习无处不在&#xff1a; 1、推荐广告和搜索&#xff1a;推广搜不分家&#xff0c;属于数据科学中&#xff0c;对人的行为进行理解 2、计算机视觉CV&#xff1a;对人看到的东西进行理解 3、自然语言处理&#xff1a;对人交流的东西进行理解 4、数据挖掘和数据分析&…