当前位置: 首页 > news >正文

在高德地图上加载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);
}

相关文章:

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

1. 引入必要的库 Three.js:一个用于创建和显示3D图形的JavaScript库。vuemap/three-layer:一个Vue插件,它允许你在高德地图中添加Three.js图层。vuemap/layer-3dtiles:一个用于处理3D Tiles格式数据的Vue插件,可以用来…...

深入浅出负载均衡:理解其原理并选择最适合你的实现方式

负载均衡是一种在多个计算资源(如服务器、CPU核心、网络链接等)之间分配工作负载的技术,旨在优化资源利用率、提高系统吞吐量和降低响应时间。负载均衡的实现方式多种多样,以下是几种常见的实现方式: 1. 硬件负载均衡&…...

STM32的存储结构

STM32F103 芯片是基于 ARM Cortex-M3 内核的微控制器,它集成了多种类型的存储器,每种存储器都有其特定的作用和存储对象。以下是关于 STM32F103 中 Flash、ROM 和 SRAM 的详细介绍: 1. Flash Memory (闪存) 作用:Flash 是非易失性…...

@SneakyThrows 注解详解

SneakyThrows 注解详解 1. 基本介绍 SneakyThrows 是 Lombok 提供的注解,用于简化异常处理,自动生成 try-catch 代码块,将检查型异常转换为非检查型异常。 2. 使用对比 2.1 传统写法 public String readFile(String path) {try {return …...

js监测页面可见性

监测切换页面 检测页面的可见性状态document.visibilityState:document.hiddenvisibilitychange 事件 js 检测页面切换至别的应用 检测页面的可见性状态 在JavaScript中,你可以使用Page Visibility API来检测页面的可见性状态。这个API提供了一组接口,允…...

Android wifi常见问题及分析

参考 Android Network/WiFi 那些事儿 前言 本文将讨论几个有意思的网络问题,同时介绍 Android 上常见WiFi 问题的分析思路。 网络基础Q & A 一. 网络分层缘由 分层想必大家很熟悉,是否想过为何需要这样分层? 网上大多都是介绍每一层…...

EFCore HasDefaultValueSql

今天小伙伴在代码中遇到了有关 HasDefaultValue 的疑问,这里整理澄清下... 在使用 Entity Framework Core (EFCore) 配置实体时,HasDefaultValue 方法会为数据库列设置一个默认值。该默认值的行为取决于以下条件: 1. 配置 HasDefaultValue 的…...

Win10微调大语言模型ChatGLM2-6B

在《Win10本地部署大语言模型ChatGLM2-6B-CSDN博客》基础上进行,官方文档在这里,参考了这篇文章 首先确保ChatGLM2-6B下的有ptuning AdvertiseGen下载地址1,地址2,文件中数据留几行 模型文件下载地址 (注意&#xff1…...

什么叫区块链?怎么保证区块链的安全性?

区块链(Blockchain)是一种分布式数据库或账本技术,它通过去中心化的方式记录交易或其他数据,并确保这些记录是安全、透明和不可篡改的。区块链最初是作为比特币(Bitcoin)加密货币的基础技术而被公众所知&am…...

一、智能体强化学习——强化学习基础

1.1 强化学习与深度学习的基本概念 1.1.1 强化学习的核心思想 什么是强化学习? 强化学习(Reinforcement Learning, RL):指在与环境(Environment)的反复交互中,智能体(Agent&#x…...

【DES加密】

什么是DES DES(Data Encryption Standard) 是一种对称加密算法。它的设计目标是提供高度的数据安全性和性能。 DES的概念 DES使用56位的密钥和64位的明文块进行加密。DES算法的分组大小是64位,因此,如果需要加密的明文长度不足64位,需要进…...

.NET中的框架和运行环境

在.NET生态系统中,框架和运行环境是两个不同的概念,它们各自扮演着重要的角色。 下面我将分别介绍.NET中的框架和运行环境,并解释它们之间的区别。 .NET 框架(Frameworks) 框架提供了一套预定义的类库、工具和服务&…...

探索微软 M365 安全:全方位守护数字世界

在当今这个科技呈井喷式飞速发展,数字化浪潮以汹涌澎湃、锐不可当之势席卷全球的时代,企业与个人仿若置身于一片浩瀚无垠、信息奔涌的海洋之中,尽情畅享着技术革新所带来的无穷无尽便利。然而,恰如平静海面下潜藏着暗礁与汹涌暗流,网络安全问题恰似隐匿在暗处、随时可能给…...

深入探索AI核心模型:CNN、RNN、GAN与Transformer

在人工智能的飞速发展中,众多深度学习模型和算法不断涌现,推动了许多领域的进步。特别是在图像识别、自然语言处理、生成建模等方向,AI模型的应用越来越广泛。本文将介绍几种最常用的AI模型,包括卷积神经网络(CNN&…...

Java - Http 通讯

Java - Http 通讯 PS&#xff1a; 1. Http 协议 POST | GET 请求&#xff1b; 2. 支持 报头、报文、参数 自定义配置&#xff1b; 3. GET 返回支持 String | Stream; 4. 相关依赖&#xff1a; <dependency><groupId>org.apache.httpcomponents</groupId><…...

C++ Qt练习项目 QChar功能测试

个人学习笔记 代码仓库 GitCode - 全球开发者的开源社区,开源代码托管平台 新建项目 设计UI 1、拖入group box去掉名字 2、拖入2个LineEdit 3、拖入两个Label 4、拖入两个PushButton 5、点栅格布局 1、拖入GroupBox 2、拖入4个PushButton 3、点栅格布局 1、拖入GroupBo…...

android 官网刷机和线刷

nexus、pixel可使用google官网线上刷机的方法。网址&#xff1a;https://flash.android.com/ 本文使用google线上刷机&#xff0c;将Android14 刷为Android12 以下是失败的线刷经历。 准备工作 下载升级包。https://developers.google.com/android/images?hlzh-cn 注意&…...

二叉树层序遍历 Leetcode102.二叉树的层序遍历

二叉树的层序遍历相当于图论的广度优先搜索&#xff0c;用队列来实现 &#xff08;二叉树的递归遍历相当于图论的深度优先搜索&#xff09; 102.二叉树的层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右…...

DELTA并联机械手视觉方案荣获2024年度机器人应用典型案例奖

直击现场 2025年1月9日晚&#xff0c;2024深圳市机器人年度评选颁奖典礼在深圳市南山区圣淘沙酒店正式拉开帷幕。本次颁奖活动由中国科学院深圳先进技术研究院指导&#xff0c;深圳市机器人协会与《机器人与智能系统》杂志组织承办。 正运动公司受邀参与此次典礼&#xff0c;…...

Netty 入门学习

前言 学习Spark源码绕不开通信&#xff0c;Spark通信是基于Netty实现的&#xff0c;所以先简单学习总结一下Netty。 Spark 通信历史 最开始: Akka Spark 1.3&#xff1a; 开始引入Netty&#xff0c;为了解决大块数据&#xff08;如Shuffle&#xff09;的传输问题 Spark 1.6&…...

全网SEO推广如何提升网站流量

全网SEO推广如何提升网站流量 在当今互联网时代&#xff0c;网站流量的提升对于任何企业或个人来说都是至关重要的。网站流量直接影响到网站的曝光度、销售转化和品牌知名度。全网SEO推广作为一种有效的提升网站流量的方法&#xff0c;越来越受到关注。全网SEO推广究竟是如何提…...

Qwen3.5-2B轻量模型效果:20亿参数实现92%准确率的通用图文VQA任务

Qwen3.5-2B轻量模型效果&#xff1a;20亿参数实现92%准确率的通用图文VQA任务 1. 模型概述 Qwen3.5-2B是阿里云推出的轻量化多模态基础模型&#xff0c;属于Qwen3.5系列的小参数版本。这个仅20亿参数的模型在保持高性能的同时&#xff0c;显著降低了部署门槛和资源消耗。 核…...

LTE CDRX配置优化与日志解析实战

1. LTE CDRX功能基础与核心参数解析 CDRX&#xff08;Connected Mode DRX&#xff09;是LTE网络中终端设备在连接状态下实现节能的关键技术。想象一下你的手机就像个熬夜加班的程序员&#xff0c;如果一直盯着电脑屏幕&#xff08;持续监听网络信号&#xff09;&#xff0c;电量…...

《AI 小游戏开发(5)|零基础复刻经典贪吃蛇!AI 生成完整代码,支持难度切换》

目录 一、本课目标 二、需要准备的工具 三、超详细操作步骤(分两步:生成基础代码 → 添加难度切换) 第一步:生成基础贪吃蛇游戏(AI 一键生成) 1. 给 AI 的详细提示词(复制完整) 2. 复制 AI 生成的基础代码 3. 保存并运行基础游戏 第二步:给游戏添加难度切换功…...

什么是模型存储

模型存储的理解 模型存储是指将训练好的机器学习模型保存到磁盘&#xff0c;以便后续直接使用而无需重新训练。 为什么需要模型存储&#xff1f; # 没有模型存储&#xff1a;每次使用都要重新训练 model train_model(data) # 可能需要几小时 prediction model.predict(ne…...

vite-plugin-federation实战:构建React+Vue混合应用完整教程

vite-plugin-federation实战&#xff1a;构建ReactVue混合应用完整教程 【免费下载链接】vite-plugin-federation Module Federation for vite & rollup 项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-federation 想要在Vite项目中实现模块联邦&#xf…...

FastBle终极指南:如何快速开发智能家电蓝牙遥控器

FastBle终极指南&#xff1a;如何快速开发智能家电蓝牙遥控器 【免费下载链接】FastBle Android Bluetooth Low Energy (BLE) Fast Development Framework. It uses simple ways to filter, scan, connect, read ,write, notify, readRssi, setMTU, and multiConnection. 项目…...

OpenClaw环境隔离方案:Phi-3-vision-128k-instruct多模态任务专用沙箱配置

OpenClaw环境隔离方案&#xff1a;Phi-3-vision-128k-instruct多模态任务专用沙箱配置 1. 为什么需要环境隔离&#xff1f; 去年我在尝试用OpenClaw处理一批包含敏感客户数据的PDF文件时&#xff0c;曾因为一个错误的鼠标操作指令导致系统临时文件被意外删除。那次经历让我意…...

Vivado Linux版安装空间不足?手把手教你如何优化磁盘空间分配

Vivado Linux版安装空间优化实战指南&#xff1a;从130G到80G的瘦身方案 当你在Linux系统上第一次看到Vivado安装程序提示需要130GB以上的磁盘空间时&#xff0c;那种震惊感我至今记忆犹新。作为一名长期在ThinkPad X1 Carbon上工作的FPGA开发者&#xff0c;我深刻理解空间受限…...

evive嵌入式平台:集成示波器与函数发生器的Arduino Mega开发系统

1. evive嵌入式平台技术解析&#xff1a;面向教育与工程调试的全功能Arduino Mega开发系统evive是一个以Arduino Mega 2560为核心控制器的开源嵌入式硬件平台&#xff0c;专为创客教育、实验教学、原型验证与嵌入式系统调试而设计。其核心价值不在于提供更高主频或更复杂外设&a…...