网站美工做确认取消对话框,phpcms v9漏洞,网站建设的作用有哪些,海南省工程建设定额网站作为刚接触 mapvthree 的新手#xff0c;今天我专门学习了 UI 控件模块。这里整理出最常用的控件和实用技巧#xff0c;帮助和我一样的初学者快速上手。控件管理入口#xff1a;engine.widgetsmapvthree 中的控件由 EngineWidgets 管理#xff0c;实例化后可以通过 engine.…作为刚接触 mapvthree 的新手今天我专门学习了 UI 控件模块。这里整理出最常用的控件和实用技巧帮助和我一样的初学者快速上手。控件管理入口engine.widgetsmapvthree 中的控件由 EngineWidgets 管理实例化后可以通过 engine.widgets 访问。控件分两种启用方式初始化时配置在 new Engine() 时通过 widgets 字段设置 enabled运行时控制引擎创建完成后直接修改 engine.widgets.xxx.enabledconst engine new mapvthree.Engine(container, {map: { center: [106.515, 29.639], range: 500 },rendering: {// 导出图片需要开启preserveDrawingBuffer: true,},widgets: {zoom: { enabled: true }, // 缩放控件fullscreen: { enabled: true }, // 全屏控件geoLocate: { enabled: true }, // 定位控件exportImage: { enabled: true }, // 导出图片控件compass: { enabled: true }, // 指南针mapInfo: { enabled: true }, // 显示地理坐标},});// 运行时开启比例尺与 logoengine.widgets.scale.enabled true;engine.widgets.logo.enabled true;小贴士exportImage 必须搭配 rendering.preserveDrawingBuffer true否则截图会是空白。常用控件一览控件 作用 使用建议zoom 显示缩放按钮 与鼠标滚轮配合易用性更高compass 显示方向和倾角 适合 3D 场景便于用户恢复默认视角fullscreen 全屏切换 适合大屏展示或需要沉浸体验的场景geoLocate 定位按钮 搭配获取定位的业务逻辑使用exportImage 导出当前场景为图片 需开启 preserveDrawingBuffermapInfo 显示当前地理坐标 对需要精确定位的业务很有帮助drawer 自定义控件容器如工具面板 可以挂自定义按钮或操作深入配置mapInfo、drawer 与 accessors除了 enabled部分控件还提供更细的参数mapInfotemplate字符串由 C中心点、R视野距离、Hheading、Ppitch等占位符组成默认 CRseparator字段之间的分隔符默认 | 例如mapInfo: { enabled: true, template: CHP, separator: , }drawerdraws 数组描述每个工具项name、defaultChecked、data、onChangeonChange(checked, data, engine) 在开关时触发可用于添加/移除对象访问器accessor每个控件都有对应的 getter例如 engine.widgets.zoom、engine.widgets.scale获取到的是控件实例可以直接读写属性engine.widgets.mapInfo.template CRH自定义 Drawer 控件drawer 类似一个工具抽屉可以配置多个“工具项”。每个工具项的 onChange 回调会在开关时触发可用于添加/移除物体等自定义逻辑。const engine new mapvthree.Engine(container, {...,widgets: {drawer: {enabled: true,draws: [{name: 添加绿盒子,data: { mesh: null },onChange: (checked, data, engine) {if (!data.mesh) {const position engine.map.projectArrayCoordinate([106.515, 29.639]);const geometry new THREE.BoxGeometry(100, 100, 100);const material new THREE.MeshBasicMaterial({color: 0x00ff00});const mesh new THREE.Mesh(geometry, material);mesh.position.set(position[0], position[1], position[2]);data.mesh mesh;}checked ? engine.add(data.mesh) : engine.remove(data.mesh);},},],},},});截图功能别忘了 preserveDrawingBufferexportImage 控件其实是一个“导出当前画面”的按钮但要正常截图必须开启 rendering.preserveDrawingBuffer true。在纯引擎场景下只用设置这一项如果叠加 BMapGL 或 mapbox还需要在对应地图实例初始化时开启同名参数。const engine new mapvthree.Engine(container, {rendering: {preserveDrawingBuffer: true,},widgets: {exportImage: { enabled: true },},});使用建议按需启用控件越多越不一定好按场景需求启用即可统一风格若有自定义 UI尽量与内置控件保持视觉一致与业务逻辑配合控件只是入口核心业务逻辑仍需自行实现如定位、截图结果保存等运行时控制可以根据场景状态动态开启/关闭控件例如进入播放模式时隐藏所有按钮学习笔记就到这里啦内置控件用起来并不复杂关键是理解“初始化配置 运行时控制”这两种方式然后按需组合即可。希望这份笔记能帮你快速把控件用好