- 综合排序
- 最热优先
- 最新优先
百度地图MapVThree Editor：地图编辑
MapVThree Editor类 是一个功能强大超好用的地图编辑工具，让你用几行代码就能实现专业的地图绘制和编辑功能！ 为什么要聊这个？ 今天想跟大家聊聊 MapVThree Editor 这个好东西。它把复杂的地图编辑功能都封装好了，你只需要调用几个简单的 API，就能实现专业级的地图编辑体验。是不是听起来就很棒？ const editor = engine.add(new mapvthree.Editor({ type: mapvthree.Editor.DrawerType.POLYGON, // 默认画多边形 MapVThree Editor 支持 5 种常用的几何图形，基本上能满足日常所有需求了：1️⃣ 多边形 (Polygon)editor.type = mapvthree.Editor.DrawerType.POLYGON 这时候可以用单要素模式：const editor = new mapvthree.Editor({ type: mapvthree.Editor.DrawerType.POLYGON, singleMode
24110编辑于 2025-12-26- 来自专栏JSAPIThree
JSAPIThree 加载 WMS、WMTS 和通用栅格图学习笔记：标准地图服务与切图规则
今天就来学习一下如何在 mapvthree 中使用这些服务，以及理解不同的瓦片切图规则。 基本使用import * as mapvthree from '@baidumap/mapv-three';const container = document.getElementById('container ');const engine = new mapvthree.Engine(container, { map: { center: [120.628, 27.786], 基本使用const mapView = engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.WMTSImageryTileProvider 基本使用const mapView = engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.XYZImageryTileProvider
31910编辑于 2025-12-11 - 来自专栏JSAPI THREE
百度地图JSAPI THREE 热力图开发教程
在 MapVThree 中，提供了两种热力图组件：Heatmap（2D 热力图）和 Heatmap3D（3D 热力图）。一、环境准备在使用热力图之前，需要先创建一个 MapVThree 引擎实例。 import * as mapvthree from '@baidu/mapv-three';// 创建引擎实例const engine = new mapvthree.Engine(document.getElementById const heatmap = engine.add(new mapvthree.Heatmap({ radius: 30, // 热力点的影响半径 keepSize MapVThree 支持通过 GeoJSONDataSource 来加载数据。 六、总结MapVThree 提供了强大而灵活的热力图功能，无论是 2D 还是 3D 版本，都能满足不同场景下的数据可视化需求。
33500编辑于 2025-11-27 - 来自专栏JSAPIThree
JSAPIThree 天空和天气系统学习笔记：营造真实的环境氛围
作为一个刚开始学习 mapvthree 的小白，今天要学习天空和天气系统了！听说这个系统可以让场景更有氛围感，还能模拟真实的天气效果！想想就期待！ import * as mapvthree from '@baidumap/mapv-three';const container = document.getElementById('container ');const engine = new mapvthree.Engine(container, { map: { center: [116.404, 39.915], import * as mapvthree from '@baidumap/mapv-three';const container = document.getElementById('container ');const engine = new mapvthree.Engine(container, { map: { center: [116.404, 39.915],
18610编辑于 2025-11-28 百度地图JSAPI THREE Label 组件使用指南，轻松实现地图标签渲染
MapVThree 的 Label 组件正是为此而生，它提供了丰富的功能和灵活的配置选项，让开发者能够轻松实现各种标签渲染需求。 一、Label 组件简介Label 组件是 MapVThree 中用于批量渲染标签的核心组件，它支持三种渲染类型：文本标签（text）：纯文本渲染，适用于地名、POI 名称等场景图标标签（icon）：图标渲染 创建 Label 实例const textLabel = engine.add(new mapvthree.Label({ type: 'text', textSize: 16, textFillStyle 准备数据const data = mapvthree.GeoJSONDataSource.fromGeoJSON([ { type: 'Feature', geometry 引擎配置});// 创建标签组件const label = engine.add(new mapvthree.Label({ type: 'icontext', vertexIcons: true
30610编辑于 2025-12-04MapV-Three地图检索服务：三个API搞定90%的搜索需求
基础用法import {useRef} from 'react';import * as mapvthree from '@baidu/mapv-three';const ref = useRef(); (mapvthree.services.API_SOURCE_TIANDITU); // 创建本地搜索服务实例 const localSearch = new mapvthree.services.LocalSearch ({ imageryProvider: new mapvthree.TiandituImageryTileProvider() })); return engine;}注意事项 正向解析：地址转坐标将地址字符串转换为经纬度坐标：import {useRef} from 'react';import * as mapvthree from '@baidu/mapv-three'; (mapvthree.services.API_SOURCE_TIANDITU); // 创建地理编码服务实例 const geocoder = new mapvthree.services.Geocoder
19710编辑于 2025-11-20- 来自专栏JSAPIThree
JSAPIThree 加载 Mapbox 数据学习笔记：使用 Mapbox 矢量瓦片地图
作为一个刚开始学习 mapvthree 的小白，今天要学习加载 Mapbox 数据了！听说这个功能可以加载 Mapbox 的矢量瓦片地图，还能自定义样式！想想就期待！ import * as mapvthree from '@baidumap/mapv-three';const container = document.getElementById('container ');const engine = new mapvthree.Engine(container, { map: { center: [113.266, 23.131], const mapView = engine.add(new mapvthree.MapView({ terrainProvider: null, vectorProvider: new mapvthree.MapboxVectorTileProvider ({ vectorProvider: new mapvthree.MapboxVectorTileProvider({ style: 'mapbox://styles/mapbox/
25710编辑于 2025-12-05 - 来自专栏mapvthree
JSAPI Three（mapvthree）与百度其他地图引擎的区别
百度地图推出了基于 Three.js 的 JSAPI Three（mapvthree）引擎，为开发者提供了全新的二三维一体化地图解决方案。 一、技术架构差异1.1 JSAPI Three（mapvthree）核心技术栈：底层渲染引擎：基于 Three.js 开发命名空间：@baidumap/mapv-three（对外统一命名）渲染方式：WebGL ());const weather = engine.add(new mapvthree.DynamicWeather(sky));weather.weather = 'rainy'; // clear (csvData);// JSON 数据源const jsonSource = new mapvthree.JSONDataSource.fromJSON(jsonData);数据源与可视化组件解耦：/ / 数据源可以灵活切换const point = engine.add(new mapvthree.SimplePoint());point.dataSource = geoJsonSource; /
31510编辑于 2025-11-21 - 来自专栏JSAPIThree
JSAPIThree 地图投影学习笔记：理解坐标系统
作为一个刚开始学习 mapvthree 的小白，今天要学习地图投影了！听说这个系统可以控制地图的坐标系统，不同的投影方式有不同的效果！想想就好奇！ 第二步：发现引擎支持的投影类型文档说 mapvthree 支持多种投影方式，我数了数，主要有这几种：投影 1：Web 墨卡托投影（EPSG:3857）const engine = new mapvthree.Engine 投影 2：ECEF 投影（EPSG:4978）const engine = new mapvthree.Engine(container, { map: { projection: 投影 4：UTM 投影const engine = new mapvthree.Engine(container, { map: { projection: 'EPSG:32633' 投影 5：高斯克吕格投影const engine = new mapvthree.Engine(container, { map: { projection: 'EPSG:4491'
20710编辑于 2025-11-24 - 来自专栏mapvthree
mapvthree 地理投影设计分析——自动转换与统一接口的设计理念
mapvthree 的地理投影系统是二三维一体化架构的重要组成部分，其设计理念既不同于传统地图引擎的单一投影限制，也不同于需要手动处理投影转换的通用 3D 引擎。 本文将从设计理念、支持能力、架构设计等角度，深入分析 mapvthree 投影系统的创新设计。 注： mapvthree 是 JSAPI Three（百度地图 JavaScript API Three）在代码中的命名空间。 1.3 与通用 3D 引擎投影系统的区别通用 3D 引擎的投影特点：通常使用世界坐标系，缺乏地理投影概念需要开发者自行实现地理坐标到世界坐标的转换不同数据源需要手动处理投影转换缺乏统一的地理坐标系统支持mapvthree 、总结mapvthree 的地理投影系统通过自动化转换机制和统一接口设计，实现了多投影支持与数据一致性，为二三维一体化场景提供了灵活的投影解决方案。
17410编辑于 2025-11-25 - 来自专栏JSAPIThree
JSAPIThree 加载天地图学习笔记：使用天地图影像服务
作为一个刚开始学习 mapvthree 的小白，今天要学习加载天地图了！听说这个功能可以加载天地图的影像服务，作为场景的底图！想想就期待！ 获取天地图 Token访问 天地图控制台 获取 token在项目中配置全局配置 Token获取 token 后，在项目的入口处进行配置，全局执行一次即可：import * as mapvthree from 临时配置 Token如果没有全局配置，可以在构造函数参数中临时配置：const mapView = engine.add(new mapvthree.MapView({ imageryProvider import * as mapvthree from '@baidumap/mapv-three';const container = document.getElementById('container ');const engine = new mapvthree.Engine(container, { map: { center: [120.628, 27.786],
21410编辑于 2025-12-09 - 来自专栏JSAPIThree
JSAPIThree 时间系统学习笔记：让场景随时间变化
作为一个刚开始学习 mapvthree 的小白，今天要学习时间系统了！听说这个系统可以让场景根据时间变化，实现真实的昼夜交替效果，就像真实世界一样！想想就激动！ import * as mapvthree from '@baidumap/mapv-three';const container = document.getElementById('container ');const engine = new mapvthree.Engine(container);// 时钟对象已经自动创建了！ 我的尝试：我写了个简单的测试：import * as mapvthree from '@baidumap/mapv-three';const container = document.getElementById ('container');const engine = new mapvthree.Engine(container, { map: { center: [116.404, 39.915
18510编辑于 2025-11-20 第一次接触 JSAPIThree（百度地图 JSAPI Three）学习笔记
作为一个前端小白，今天要开始学习百度地图的 JSAPI Three（也叫 mapvthree）了！听说这是一个超强的 3D 地图渲染引擎，可以做出很酷炫的三维地图效果。想想就激动！ 看了文档才知道，mapvthree 在初始化时需要加载一些资源文件（比如着色器、纹理等）。 -- index.html --><script> window.MAPV_BASE_URL = 'mapvthree/';</script>我的理解：这个变量告诉引擎，资源文件在 mapvthree 第三步：配置百度地图 AK文档说 mapvthree 默认展示百度地图矢量数据，需要配置百度地图开发者密钥（AK）。我的疑问：什么是 AK？为什么要配置？ 我选择一次性引入，简单直接：import * as mapvthree from '@baidumap/mapv-three';我的想法：先全部引入，等熟悉了再考虑按需引入优化。
34210编辑于 2025-11-17- 来自专栏JSAPI THREE
百度地图JSAPI THREE Icon 组件完使用指南
MapVThree 提供了功能强大的 Icon 组件，支持多种配置方式和渲染效果。本文将深入介绍 Icon 组件的使用方法，帮助开发者快速掌握其核心功能。 一、Icon 组件基础1.1 创建 Icon 实例Icon 组件通过 mapvthree.Icon 类创建，需要传入配置对象。 基础配置包括图标尺寸、图片路径等：const icon = engine.add( new mapvthree.Icon({ width: 100, // 图标宽度（像素） MapVThree 支持 GeoJSON 格式的数据源：const dataSource = mapvthree.GeoJSONDataSource.fromGeoJSON([ { 2.3 颜色与样式Icon 组件支持全局颜色设置和顶点颜色：// 全局颜色const icon = engine.add( new mapvthree.Icon({ color: '
22010编辑于 2025-12-10 - 来自专栏JSAPIThree
JSAPIThree 加载 Cesium 数据学习笔记：使用 Cesium 地形和影像服务
作为一个刚开始学习 mapvthree 的小白，今天要学习加载 Cesium 数据了！听说这个功能可以加载真实的地形数据，还能使用 Cesium 的影像服务！想想就期待！ import * as mapvthree from '@baidumap/mapv-three';const container = document.getElementById('container ', // 如果没有全局配置，可以在这里直接传入 }), imageryProvider: new mapvthree.BingImageryTileProvider(),}));我的发现： 如果需要使用自定义地形服务：const mapView = engine.add(new mapvthree.MapView({ terrainProvider: new mapvthree.CesiumTerrainTileProvider const mapView = engine.add(new mapvthree.MapView({ terrainProvider: new mapvthree.CesiumTerrainTileProvider
18810编辑于 2025-12-04 - 来自专栏JSAPIThree
JSAPIThree 数据源系统学习笔记：让数据在地图上可视化
作为一个刚开始学习 mapvthree 的小白，今天要学习数据源系统了！听说这个系统可以把各种格式的数据加载到地图上，还能让数据可视化！想想就实用！ // 创建一个点数据const dataItem = new mapvthree.DataItem([116.404, 39.915, 10]);// 添加到数据源dataSource.add(dataItem import * as mapvthree from '@baidumap/mapv-three';const container = document.getElementById('container ');const engine = new mapvthree.Engine(container, { map: { center: [116.404, 39.915], range: 2000, },});// 创建点图层const point = engine.add(new mapvthree.SimplePoint({ size: 15,}));//
19310编辑于 2025-12-02 - 来自专栏JSAPIThree
JSAPIThree 加载 3D Tiles 学习笔记：大规模三维场景渲染
今天就来学习一下如何在 mapvthree 中使用 3D Tiles。 基本使用import * as mapvthree from '@baidumap/mapv-three';const container = document.getElementById('container ');const engine = new mapvthree.Engine(container, { map: { center: [105.931, 29.349, 280], 使用 fromAssetId// 从 Cesium Ion asset ID 加载const tileset = await mapvthree.Default3DTiles.fromAssetId(' ('container');const engine = new mapvthree.Engine(container, { map: { center: [105.931, 29.349
23610编辑于 2025-12-16 - 来自专栏JSAPI THREE
百度地图MapvTHREE Rendering渲染管理器的核心API
深入理解MapvTHREE Rendering渲染管理器的核心API一句话总结engine.rendering 是mapvthree的渲染管理中枢，掌握它的核心API，你就能精确控制3D场景的每一帧渲染 Rendering（渲染管理器）是mapvthree引擎的核心组件之一，它随着Engine初始化自动创建，通过engine.rendering访问。 每一帧的渲染大致分为这几个阶段：准备阶段(Prepare) → 更新阶段(Update) → 渲染阶段(Render)mapvthree为我们提供了两个关键的钩子函数，让我们能在不同阶段插入自己的逻辑： ';// 创建引擎（使用地球投影）const engine = new mapvthree.Engine(document.getElementById('map_container'), { map （初始不带矢量图层）const mapView = window.mapview = engine.add(new mapvthree.MapView({ terrainProvider: null
16410编辑于 2025-12-24 mapvthree Engine 设计分析——二三维一体化的架构设计
mapvthree Engine 作为二三维一体化渲染引擎的核心，其设计理念既不同于传统地图引擎，也不同于纯粹的 3D 渲染引擎。 注： mapvthree 是 JSAPI Three（百度地图 JavaScript API Three）在代码中的命名空间。 一、设计理念概述1.1 核心设计思想mapvthree Engine 的设计核心在于融合而非替代：保留地图引擎能力：完整保留传统地图引擎的 LBS（基于位置的服务）和 GIS（地理信息系统）能力引入 3D ，而非简单的功能叠加1.2 与传统地图引擎的区别传统地图引擎的设计特点：以地图为中心，所有功能围绕地图展开渲染系统封闭，无法直接访问底层渲染对象主要面向二维或有限的 2.5D 场景功能模块与地图强耦合mapvthree ());const line = engine.add(new mapvthree.Polyline());const model = engine.add(new mapvthree.SimpleModel
18910编辑于 2025-11-24JSAPIThree之Bloom 效果学习笔记：让我的 3D 场景发光发亮！
作为一个刚开始学习 mapvthree 的小白，今天我要学习一个超酷的效果——Bloom（泛光）！听说这个效果能让场景里的物体发光，就像游戏里的特效一样，想想就激动！ 尝试 1：初始化时就开启我照着文档写了个最简单的例子：import * as mapvthree from '@baidumap/mapv-three';// 先获取容器（这个我熟悉）const container = document.getElementById('container');// 创建引擎，顺便把 Bloom 打开const engine = new mapvthree.Engine(container 尝试 2：运行时开启文档说也可以在创建引擎后再开启，我试试：// 先创建引擎（不开启 Bloom）const engine = new mapvthree.Engine(container, { 第七步：做一个完整的对比测试我想看看三种方法的效果对比，就写了个完整的测试：import * as mapvthree from '@baidumap/mapv-three';import {Mesh,
14110编辑于 2025-11-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号