映射三插图
maplibre-three-plugin 是一个巧妙的桥接插件
连接 MapLibre GL 联合来文 与 3个J,启用
在地图上执行3D渲染和动画.
安装
npm install @dvt3d/maplibre-three-plugin
----------------------------------------
yarn add @dvt3d/maplibre-three-plugin
快开始
maplibre-three-plugin 取决于3,请在使用前确定安装了3个.
<div id="map-container"></div>
import maplibregl from 'maplibre-gl'
import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import * as MTP from '@dvt3d/maplibre-three-plugin'
const map = new maplibregl.Map({
container: 'map-container', // container id
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key=get_access_key',
zoom: 18,
center: [148.9819, -35.3981],
pitch: 60,
canvasContextAttributes: { antialias: true },
maxPitch: 85,
})
//init three scene
const mapScene = new MTP.MapScene(map)
//add light
mapScene.addLight(new THREE.AmbientLight())
// add model
const glTFLoader = new GLTFLoader()
glTFLoader.load('./assets/34M_17/34M_17.gltf', (gltf) => {
let rtcGroup = MTP.Creator.createRTCGroup([148.9819, -35.39847])
rtcGroup.add(gltf.scene)
mapScene.addObject(rtcGroup)
})
实例
| 
| 
| 
| 
|
QQ:------------------------------------------------------------------------- ----------- --- -- -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
| 模式 | 日光灯 | 点 | 点集 |
| 
| 
| 
| 
|
| 广告牌 | divi- icon (英语) | 3d-平面图 | 3d-平面图 |
| 
| 
| 
| 
|
| 3d-平方厘米离子 | 3d-克-ce离子 | 3d- gs- splate (3d- gs- splate) (英语) | 热映射 |
文档
地图景
实例
const mapScene = new MapScene(map)
创建
- 构造器( 映射, [选项])
- 段落
{Map} map: 映射实例{Object} options: 配置
- 段落
// config
Object({
/**
* Existing THREE.Scene instance.
* If not provided, an internal default scene will be created.
*/
scene: null,
/**
* Existing THREE.Camera instance.
* If not provided, an internal default camera will be created.
*/
camera: null,
/**
* Existing THREE.WebGLRenderer instance.
* If not provided, an internal default renderer will be created.
*/
renderer: null,
/**
* Whether to preserve the drawing buffer.
* When enabled, the canvas content will be retained after rendering,
* which is useful for screenshots or readPixels operations.
* Note: Enabling this may have a performance impact.
*/
preserveDrawingBuffer: false,
/**
* Whether to enable post-processing rendering.
* When enabled, Three.js content will be rendered through
* an offscreen render target before being composited onto the map.
* When disabled, Three.js renders directly into the shared MapLibre canvas
* for maximum performance and stability.
*/
enablePostProcessing: false,
/**
* Custom frame render loop.
*
* This function will be called every frame.
* If not provided, the internal default render loop will be used.
*
* ⚠️ Note:
* Providing a custom renderLoop means you take full control
* of the render lifecycle. The built-in rendering pipeline
* will be bypassed.
*
* As a result, the following internal event hooks will
* NOT be triggered automatically:
*
* - preReset
* - postReset
* - preRender
* - postRender
*
* If needed, you must manually call the corresponding logic
* inside your custom renderLoop.
*
* @param {MapScene} ins - The current MapScene instance
*/
renderLoop: (ins) => {
}
})
事件钩子
这些钩子只在使用内部渲染回路时被触发.
preReset: 一个召唤的钩子renderer.resetState每个动画框之前postReset: 一个召唤的钩子renderer.resetState每个动画框之后preRender: 一个召唤的钩子renderer.render每个动画框之前postRender: 一个召唤的钩子renderer.render每个动画框之后
属性
{maplibregl.Map} map数字 :readonly{HTMLCanvasElement} canvas数字 :readonly{THREE.Camera} camera数字 :readonly{THREE.Sence} scene数字 :readonly{THREE.Group} lights数字 :readonly{THREE.Group} world数字 :readonly{THREE.WebGLRenderer} renderer数字 :readonly{EffectComposer} composer数字 :readonly{RenderPass} renderPass数字 :readonly{OutputPass} outputPass数字 :readonly
方法
-
添加光( 光)
在场景中添加光线,支持自定义光线对象,但自定义光线对象需要支持
delegate财产,以及delegate类型是THREE.Object3D- 段落
{THREE.Object3D | Sun | CustomLight } light
- 返回时
this
- 段落
-
删除光( 光)
从现场取出光
- 段落
{THREE.Object3D | Sun | CustomLight } light
- 返回时
this
- 段落
-
添加对象(对象)
添加对象到世界,支持自定义对象,但自定义对象需要支持
delegate财产,以及delegate类型是THREE.Object3D- 段落
{THREE.Object3D | CustomObject} object
- 返回时
this
- 段落
-
删除对象(对象)
从世界中删除对象
- 段落
{THREE.Object3D | CustomObject} object
- 返回时
this
- 段落
-
flyto(目标,[完成],[期限])
在一段时间内将地图飞到提供的目标,当飞行时将触发完成回调 完成后,目标需要控制
position属性- 段落
{THREE.Object3D | CustomObject} target{Function} completed{Number} duration
- 返回时
this
- 段落
-
缩放为( 目标, [完成])
将地图缩放到提供的目标
- 段落
{Ojbect} target{Function} completed
- 返回时
this
- 段落
-
打开( 类型, 回调)
注册指定事件类型的事件听众
- 段落
{String} type{Function} callback
- 返回时
this
- 段落
-
关闭( 类型, 回调)
删除先前为指定事件类型的已注册事件听众
- 段落
{String} type{Function} callback
- 返回时
this
- 段落
-
层到( [Id] 之前)
将 3 移动到不同的 Z- 位置, 如果省略前的 Id , 则图层将附加到图层的末尾 数组,并显示在地图上所有其他图层之上.
- 段落
{String} beforeId
- 返回时
this
- 段落
-
添加Pass( 通过)
向内部效应计算器添加处理后通行证。 通行证将在最后输出通过前插入 确保正确的渲染顺序.
- 段落
{THREE.Pass} pass
- 返回时
this
- 段落
-
删除 Pass( 通过)
从内部EffectComposer中删除先前添加的后处理通道.
- 段落
{THREE.Pass} pass
- 返回时
this
- 段落
场景变形
实例
const scale = new SceneTransform.projectedUnitsPerMeter(24)
静态方法
-
预测计算器单元PerMeter ()
- 段落
- 返回时
{Number} value
-
预测的单位
- 段落
{Number} lat
- 返回时
{Number} value
- 段落
-
ingLatToVector3 (lng, [lat], [alt]) (英语)
- 段落
{Array | Number} lng{Number} lat{Number} alt
- 返回时
{THREE.Vector3} v
- 段落
-
向量 3ToLngLat( v)
- 段落
{THREE.Vector3} v
- 返回时
{Array} value
- 段落
太阳
实例
const sun = new Sun()
创建
- 构造器( )
- 段落
属性
{THREE.Group} delegate数字 :readonly{Boolean} castShadow{Date | String} currentTime{THREE.DirectionalLight} sunLight数字 :readonly{THREE.HemisphereLight} hemiLight数字 :readonly
方法
- 更新(框架状态)
- 段落
{Object} frameState数字 :
- 返回时
this
- 段落
创建者
实例
const rtcGroup = Creator.createRTCGroup([-1000, 0, 0])
静态方法
-
创建RTC Group( 中心, [旋转], [比例)
- 段落
{Array} center{Array} rotation: 默认值为 [0, 0]{Array} scale: 与当前纬度相对应的尺度
- 返回时
{THREE.Group} group
- 段落
-
创建MercatorRTC Group( 中心, [旋转], [比例])
- 段落
{Array} center{Array} rotation: 默认值为 [0, 0]{Array} scale: 与当前纬度相对应的尺度
- 返回时
{THREE.Group} group
- 段落
-
创建 ShadowGround( 中心, [宽], [高])
- 段落
{THREE.Vector3} center{Number} width: 默认值为 100{Number} height: 默认值为 100
- 返回时
{THREE.Mesh} mesh
- 段落