ThingJS:3D版PUSH开发方法简略

简介: 经常用手机,我们都会收到很多PUSH,那在3D开发中,ThingJS如何进行弹窗信息显示呢?

经常用手机,我们都会收到很多PUSH,那在3D开发中,ThingJS如何进行弹窗信息显示呢?

无论是2D地图还是3D地图,经常会有展示信息面板的需求,可以用来表示物体对象的位置,也可以实时展示某物体的状态。在ThingJS开发教程中,这些有地理位置的坐标,我们称之为“信息弹窗InfoWindow”。
2.png

thingjs开发中支持使用layer来显示Web界面的信息弹窗。为了更加方便前端用户操作,我们使用THING.Utils.dynamicLoad引用layer的官方JS文件,可在场景上2D界面创建一个按钮,点击按钮既可出现layer弹窗。
1.png

ThingJS底层内置了三种信息面板的标准形式,会根据对象userData身上的属性自动生成信息面板,这是我们底层定义的界面样式,用户无法修改。此外用户还可以自定义信息面板,通过代码自行开发,自行规划界面样式和操作。
标准参数说明如下,包括displayMode,type和style,都是预设的。

1.displayMode:三种显示模式

CMAP.DisplayMode.Click 点击显示
CMAP.DisplayMode.Always 常显
CMAP.DisplayMode.MouseEnter 鼠标移入显示(悬浮显示)

2.type:信息面板类型

CMAP.InfoWindowType.Standard 标准
CMAP.InfoWindowType.Custom 自定义

3.style:预置的样式

在type为CMAP.InfoWindowType.Standard时生效
CMAP.InfoWindowStyle.Default 默认黑色
CMAP.InfoWindowStyle.Blue 蓝色
CMAP.InfoWindowStyle.White 白色

这是标准信息面板的代码示例。


var geoPoint = app.create({
type: 'GeoPoint',
name: 'geoPoint0',
coordinates: [ 116.405, 39.906],
userData: {'type': '地铁站','name':'前门地铁站'},
renderer: {
    type: 'image', // image代表创建图片类型的点
    url: 'image/uGeo/pop.png', // 图片的url
    size: 5  // 尺寸
},
infoWindow:
    {
    'title': '标题',
    'displayMode': CMAP.DisplayMode.Click,//点击显示
    'type': CMAP.InfoWindowType.Standard,//标准indoWindow
    'style': CMAP.InfoWindowStyle.Default,//默认样式 黑色
    'pivot': [0.5, 1.3],//界面的轴心,以百分比表示界面轴心位置。[0,0] 代表界面左上;[1,1] 代表界面右下 pivot可大于1用于像素级的偏移
    'fieldData': [
        {
        'field': 'name',
        'alias': '名称'
        },
    {
        'field': 'type',
        'alias': '类型'
        }]
    },//配置要展示哪些字段以及设置字段名称的别名(显示的名称)
});

这是自定义信息面板的代码示例。

var infoWindowHtml = '\n'
+ '    \n'
+ '        \n'
+ '            {{name}}\n'
+ '            {{type}}\n'
+ '        \n'
+ '    \n'
+ '';
var geoPoint = app.create({
type: 'GeoPoint',
name: 'geoPoint0',
coordinates: data.features[3].geometry.coordinates,
userData: data.features[3].properties,
renderer: {
    type: 'image', // image代表创建图片类型的点
    url: 'image/uGeo/pop.png', // 图片的url
    size: 5  // 尺寸
},
infoWindow:
    {
    'displayMode': CMAP.DisplayMode.Click,//点击显示
    'type': CMAP.InfoWindowType.Custom,//自定义InfoWindow
    'customHtml': infoWindowHtml
    },
});
pointLayer.add(geoPoint);
注意:自定义html的标签中{{name}}代表使用对象userData中的name字段的值。

弹窗信息显示如此简单,ThingJS充分满足开发者的3D创作需求!

相关文章
|
17天前
|
敏捷开发 数据可视化 算法
瀑布模型大揭秘:如何用分段式开发轻松搞定软件项目?
瀑布模型是软件开发中最早的线性开发方法,由Winston W. Royce于1970年提出。该模型将项目分为需求分析、系统设计、实现、集成与测试、部署和维护六个阶段,每个阶段自上而下依次进行。尽管近年来敏捷开发备受推崇,但瀑布模型在需求明确、流程复杂的项目中仍具重要价值。本文将详细介绍瀑布模型的概念、主要阶段及步骤,并探讨如何使用项目管理工具如板栗看板,帮助团队高效协作。
23 0
|
2月前
|
设计模式 存储 人工智能
深度解析Unity游戏开发:从零构建可扩展与可维护的游戏架构,让你的游戏项目在模块化设计、脚本对象运用及状态模式处理中焕发新生,实现高效迭代与团队协作的完美平衡之路
【9月更文挑战第1天】游戏开发中的架构设计是项目成功的关键。良好的架构能提升开发效率并确保项目的长期可维护性和可扩展性。在使用Unity引擎时,合理的架构尤为重要。本文探讨了如何在Unity中实现可扩展且易维护的游戏架构,包括模块化设计、使用脚本对象管理数据、应用设计模式(如状态模式)及采用MVC/MVVM架构模式。通过这些方法,可以显著提高开发效率和游戏质量。例如,模块化设计将游戏拆分为独立模块。
160 3
|
3月前
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
48 0
|
3月前
|
C# 开发者 Windows
勇敢迈出第一步:手把手教你如何在WPF开源项目中贡献你的第一行代码,从选择项目到提交PR的全过程解析与实战技巧分享
【8月更文挑战第31天】本文指导您如何在Windows Presentation Foundation(WPF)相关的开源项目中贡献代码。无论您是初学者还是有经验的开发者,参与这类项目都能加深对WPF框架的理解并拓展职业履历。文章推荐了一些适合入门的项目如MvvmLight和MahApps.Metro,并详细介绍了从选择项目、设置开发环境到提交代码的全过程。通过具体示例,如添加按钮点击事件处理程序,帮助您迈出第一步。此外,还强调了提交Pull Request时保持专业沟通的重要性。参与开源不仅能提升技能,还能促进社区交流。
43 0
|
3月前
|
自然语言处理 前端开发 JavaScript
前端进阶必读:JS闭包深度解析,掌握这一特性,你的代码将焕然一新!
【8月更文挑战第23天】闭包是JavaScript的一项高级功能,让函数能够访问和操作外部函数作用域中的变量。本文深入解析闭包概念、组成及应用场景。闭包由函数及其词法环境构成,通过在一个函数内定义另一个函数来创建。它有助于封装私有变量、维持状态和动态生成函数。然而,不当使用闭包可能导致内存泄漏或性能问题。掌握闭包对于实现模块化代码和成为优秀前端开发者至关重要。
40 0
|
6月前
|
自然语言处理 搜索推荐 算法
Metaforce佛萨奇2.0丨3.0系统开发稳定版/需求设计/功能说明/案例项目/逻辑方案/源码程序
Metaforce佛萨奇系统是一个基于人工智能技术的虚拟助手系统,
|
JSON 数据可视化 JavaScript
OneCode 基于“真实代码”代码的建模设计,无缝整合二次开发
在很多优秀的低代码平台中都支持了本地代码导出的设计,方便开发者二次集成,但能够导出的前提是已经通过低代码平台进行了初步的数据建模,界面绘制等基础性的操作。这些导出的代码虽然很大程度上减轻了开发者的代码量,但在项目的迭代过程中,遇到数据或需求变更。这些代码就又会成为开发者巨大的负担,重新由低代码平台建模会产生代码上的冲突无法解决,而重新用code编写这一步代码则又面临手工代码与“机器代码”的整合问题。而更为致命的问题是项目上线后,当直接用户希望通过低代码工具进行维护系统时更是“闪崩”。 本文将结合OneCode的底层编译原理来讲解 OneCode基于真实代码的建模解决方案。
|
JavaScript 前端开发
【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟
基础的脚手架已经搭建完毕,如果我们想快速生成几个基础的组件模板我们可以使用Plop或者使用文件写入实现。比如我们不想等后端同学的接口,可以直接使用mock模拟数据生成。
283 0
【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟
|
算法
第七章 多用模板专注设计(上)
第七章 多用模板专注设计
101 0
第七章 多用模板专注设计(上)