cesium中如何点击自定义按钮展开2D图层

ThingJS 是一个先进的 PaaS 开发平台，开发者可以方便、安全地基于云端的各种工具组件随时随地进行开发。

ThingJS 界面概述‍

为了便于开发者在ThingJS下进行界面开发，ThingJS 提供的界面体系结构目录如下：

上述ThingJS界面体系中，进行3D场景可视化的区域，我们定义为3D容器，如下图所示：

在3D“容器”内

提供了3D和2D的界面展示能力，如下图所示网页链接

3D 界面

Marker：可以将图标、Canvas绘制的图片，展现在3D场景中或绑定在3D物体上。

WebView：可以将页面嵌入到3D场景中。

2D 界面

原生界面：用户可以使用js代码编写原生的界面，将dom元素插入到相应的节点中。

快捷界面库：内置各种组件模块，供用户进行拼接组装使用。

UIAnchor：可以将普通的2D界面“挂接”到某个3D物体对象上，使之随物体移动。

在3D“容器”外

提供通栏组件（如上通栏、侧通栏）。如果用户想基于 ThingJS 做一套独立的应用系统，可使用通栏组件作为系统级别的菜单。

3D 界面

ThingJS 主要提供 `Marker` 物体和 `WebView` 物体以支持 3D 空间界面。

Marker 物体

请点击输入图片描述

Marker 物体可以添加一个图片放置到你希望的位置，也可以将这个图片作为孩子添加到对象身上，随着对象一同移动。

例子 1：

app.create({

   type: "Marker",

   offset: [0, 2, 0],

   size: [4, 4],

   url: "https://thingjs.com/static/images/warning1.png",

   parent: app.query("car01")[0]})

参数：

type ： 通知系统创建 Marker 物体；

offset ： 设置自身坐标系下偏移量为[0, 2, 0]；

size ： 设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的；

url ： 图片的 url；

parent ：指定 Marker 的父物体；

运行结果见下图。Marker 默认是受距离远近影响，呈现近大远小的 3D 效果，也会在 3D 空间中实现前后遮挡。

例子 2：

app.create({

   type: "Marker",

   offset: [0, 8, 0],

   size: 2,

   keepSize: true,

   url: "https://thingjs.com/static/images/reminder.png",

   parent: app.query(".Building")[1]})

参数：

keepSize： 控制是否受距离远近影响，呈现近大远小的 3D 效果。如果设置 true，表示保持大小，不随距离近大远小，此时 size 的单位是屏幕的像素点；

offset ： 设置自身坐标系下偏移量为[0, 2, 0]；

size ： 设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的；

url ： 图片的 url；

parent ：指定 Marker 的父物体；

运行结果见下图：

我们还可以使用 h5 的 canvas 手动创建动态图。

例子 3：

function createTextCanvas(text, canvas) {

   if (!canvas) {

       canvas = document.createElement("canvas")

       canvas.width = 64

       canvas.height = 64

   }

   const ctx = canvas.getContext("2D")

   ctx.fillStyle = "rgb(32, 32, 256)"

   ctx.beginPath()

   ctx.arc(32, 32, 30, 0, Math.PI * 2)

   ctx.fill()

   ctx.strokeStyle = "rgb(255, 255, 255)"

   ctx.lineWidth = 4

   ctx.beginPath()

   ctx.arc(32, 32, 30, 0, Math.PI * 2)

   ctx.stroke()

   ctx.fillStyle = "rgb(255, 255, 255)"

   ctx.font = "32px sans-serif"

   ctx.textAlign = "center"

   ctx.textBaseline = "middle"

   ctx.fillText(text, 32, 32)

   return canvas}app.on('load', function (ev) {

   var marker = app.create({

       type: "Marker",

       offset: [0, 2, 0],

       size: 3,

       canvas: createTextCanvas('100'),

       parent: app.query('car02')[0]

   }).on('click', function (ev) {

       var txt = Math.floor(Math.random() * 100)

       ev.object.canvas = createTextCanvas(txt, ev.object.canvas)

   })})

参数：

canvas: 接收 canvas 作为贴图显示

运行结果见下图，在 Marker 上点击时，会改变标记上的数字：

工具：officeWPS步骤：1、打开officeWPS，点击绘图工具栏自选图形按钮，然后选择动作按钮--自定义。2、画出一个方框，表示动作按钮，画完后会自动d出设置界面。勾选超链接到，选择最后一张幻灯片，确定。3、勾选运行程序，然后点击浏览进行程序的选择。即可完成自定义按钮设置。

拾取和选择

ThingJS 系统内置了很多事件，比点击鼠标、键盘输入、层级变化等。用户可以监听这些事件，在事件回调中进行相应的业务逻辑处理网页链接‍

拾取

通过属性和接口获取鼠标拾取（Pick）的物体

当鼠标在一个物体上悬停时，我们经常希望做一些 *** 作，比如变色等。

我们使用 Picker 类来获取鼠标拾取（Pick）的物体，通过 app.picker 得到 Picker 类来实现这个功能，见下例：

//判断拾取的物体是否改变if(app.picker.isChanged()) {

//通过app.picker.objects 得到当前拾取的物体

console.log(app.picker.objects)

//通过app.picker.previousObjects 得到之前拾取的物体

console.log(app.picker.previousObjects)}  

通过事件获取鼠标拾取的物体

可以通过 MouseEnter 和 MouseLeave 来实现 。

// 鼠标拾取物体显示边框app.on(THING.EventType.MouseEnter, '.Thing' ,function(ev) {

ev.object.style.outlineColor = '#FF0000'})// 鼠标离开物体边框取消app.on(THING.EventType.MouseLeave,'.Thing', function(ev) {

ev.object.style.outlineColor = null})

查看示例

示例效果如下图所示：

请点击输入图片描述

当 Pick 发生变化时会触发 PickChange 事件,也可以通过事件的回调参数获取当前和之前的拾取物体。

app.on(THING.EventType.PickChange,function (ev) {

ev.objects.style.color = '#ff0000'

ev.previousObjects.style.color = null})

区域 Pick 物体

有时我们通过鼠标框选一个区域，在区域内的物体我们认为是被 `Pick` 的，如下例：

//由于框选比较消耗性能，因此预先设置框的“候选集”，只在候选集中框选var things = app.query('.Thing')app.picker.areaCandidates = things//启动框选 传入 鼠标按下时开始框选的屏幕坐标app.picker.startAreaPicking({

x: x,

y: y})//结束框选app.picker.endAreaPicking()

查看示例

pickedResultFunc

可通过 pickedResultFunc 设置拾取对象回调函数，详见代码块，如下图：

请点击输入图片描述

选择

选择物体

鼠标悬停到物体上，但不代表我选择它了，比如是我们点击后才表明我们选择了它。选择物体，我们通过 Selection模块实现，可通过 app.selection 的接口实现该功能，见下例：

//将物体加入到选择集中app.selection.select(obj)// 判断对象是否在选择集中app.selection.has(obj)//将物体从选择集中删除app.selection.deselect(obj)//清空选择集app.selection.clear()

通过属性和方法，侦测选择集变化

Selection 通过提供 isChanged 方法获取选择集变化，通过 objects 和 previousObjects 获取当前选择集和变化之前的选择集，见下例：

if(app.selection.isChanged()) {

//获取当前哪些物体被选择

console.log(app.selection.objects)

//当isChanged时，之前都有哪些物体被选择

console.log(app.selection.previousObjects)}  

通过事件侦测选择集变化

可以通过 Select 和 Deselect 事件精确控制物体针对选择的响应，如下例：

app.on(THING.EventType.Select, '.Thing', function (ev) {

// 选择集中的物体颜色进行改变

ev.object.style.color = "#ff0000"})app.on(THING.EventType.Deselect, '.Thing', function (ev) {

// 物体从选择集中删除时，清除颜色

ev.object.style.color = null})

我们也可以通过 SelectionChange 事件。

app.on(THING.EventType.SelectionChange, function (ev) {

console.log(ev.previousObjects+" "+ev.objects)})

---