# Popup2D信息弹出窗标记
[Popup2D](https://vjmap.com/map3d/api/classes/Popup2D.html)信息弹出窗是基于threejs中 `CSS2DObject` 实现的div信息弹出窗标记。

## 常用方法

|方法|描述|
|:---|:---|
|[addTo](https://vjmap.com/map3d/api/classes/Popup2D.html#addTo)|增加弹出信息框|
|[isOpen](https://vjmap.com/map3d/api/classes/Popup2D.html#isOpen)|弹出信息框是否打开|
|[remove](https://vjmap.com/map3d/api/classes/Popup2D.html#remove)|移除弹出信息框|
|[getPosition](https://vjmap.com/map3d/api/classes/Popup2D.html#getPosition)|获取位置|
|[setPosition](https://vjmap.com/map3d/api/classes/Popup2D.html#setPosition)|设置位置|
|[isShow](https://vjmap.com/map3d/api/classes/Popup2D.html#isShow)|是否显示|
|[show](https://vjmap.com/map3d/api/classes/Popup2D.html#show)|显示|
|[hide](https://vjmap.com/map3d/api/classes/Popup2D.html#hide)|隐藏|
|[getElement](https://vjmap.com/map3d/api/classes/Popup2D.html#getElement)|获取信息弹出框元素。⚠️ 在 `addTo(app)` 且已 `setHTML`/`setText` 设置内容之前返回 `undefined`；任何时候都可改用继承自 three `CSS2DObject` 的 `element` 属性（如 `popup2d.element`，同一个 div）|
|[setText](https://vjmap.com/map3d/api/classes/Popup2D.html#setText)|设置信息弹出框信息内容|
|[setHTML](https://vjmap.com/map3d/api/classes/Popup2D.html#setHTML)|设置信息弹出框html内容|
|[setDOMContent](https://vjmap.com/map3d/api/classes/Popup2D.html#setDOMContent)|将弹出窗口的内容设置为作为DOM节点提供的元素|
|[getMaxWidth](https://vjmap.com/map3d/api/classes/Popup2D.html#getMaxWidth)|获取信息弹出框最大宽度|
|[setMaxWidth](https://vjmap.com/map3d/api/classes/Popup2D.html#setMaxWidth)|设置信息弹出框最大宽度|
|[addClassName](https://vjmap.com/map3d/api/classes/Popup2D.html#addClassName)|将CSS类名添加到弹出容器元素中。|
|[removeClassName](https://vjmap.com/map3d/api/classes/Popup2D.html#removeClassName)|从弹出式容器元素中删除一个CSS类。|
|[setOffset](https://vjmap.com/map3d/api/classes/Popup2D.html#setOffset)|设置信息弹出框偏移量|
|[toggleClassName](https://vjmap.com/map3d/api/classes/Popup2D.html#toggleClassName)|在弹出容器上添加或删除给定的CSS类，具体取决于容器当前是否具有该类。|
|[setColor](https://vjmap.com/map3d/api/classes/Popup2D.html#setColor)|设置颜色|
|[update](https://vjmap.com/map3d/api/classes/Popup2D.html#update)|更新|
|[setOpacity](https://vjmap.com/map3d/api/classes/Popup2D.html#setOpacity)|设置透明度|

## 信号名

|方法|描述|
|:---|:---|
|open|打开|
|close|关闭|
|elementSizeReady|元素大小准确好了已有|

对于div的事件，可以通过[getElement](https://vjmap.com/map3d/api/classes/Popup2D.html#getElement)获取div元素，对此div增加事件（须在 `addTo` 且设置内容之后；之前请用 `popup2d.element`）。
如
```js
popup2d.getElement().addEventListener("dblclick", event => {
    console.log("双击")
});
```


## 用法示例

### 创建一个popup2d
```js
const popup = new vjmap3d.Popup2D({
    backgroundColor: "#A0FFA0",
    buttonColor: "#f00",
    closeOnClick: false,
    closeButton: true,
    showArrow: true
})
.setHTML(`<h3 style="color:#00f">Hello, VJMAP3D</h3>`)
.setPosition(2, 0, 1)
.addTo(app);
```

<mapFrame>
<pre>
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
    stat: { show: true, left: "0" },
    scene: {
        gridHelper: { visible: true } // 是否显示坐标网格
    },
    camera: {  // 相机设置
        viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
    }
})
const popup = new vjmap3d.Popup2D({
    backgroundColor: "#A0FFA0",
    buttonColor: "#f00",
    closeOnClick: false,
    closeButton: true,
    showArrow: true
})
.setHTML(`<h3 style="color:#00f">Hello, VJMAP3D</h3>`)
.setPosition(2, 0, 1)
.addTo(app);
</pre>
</mapFrame>



### 做为一个对象的子节点

```js
const mesh = new THREE.Mesh(
    new THREE.SphereGeometry( 0.3, 16, 16 ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00 } )
)
mesh.position.set(4, 0, 0);
app.scene.add(mesh);
let popup = new vjmap3d.Popup2D({
    backgroundColor: "#0ff",
    closeButton: false,
})
popup.setPosition([0, 0.4, 0]); // 设置位置 
popup.setHTML("我是mesh的子对象");
popup.addTo(mesh, app)
```
<mapFrame>
<pre>
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
container: "map", // 容器id
    scene: {  // 场景设置
        gridHelper: { visible: true } // 是否显示坐标网格
    }
})
const mesh = new THREE.Mesh(
    new THREE.SphereGeometry( 0.3, 16, 16 ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00 } )
)
mesh.position.set(4, 0, 0);
app.scene.add(mesh);
let popup = new vjmap3d.Popup2D({
    backgroundColor: "#0ff",
    closeButton: false,
})
popup.setPosition([0, 0.4, 0]); // 设置位置 
popup.setHTML("我是mesh的子对象");
popup.addTo(mesh, app)
// 
let angle = 0;
app.signal.onAppUpdate.add(() => {
    angle += 0.01; // 控制旋转速度
    mesh.position.x = 4 * Math.cos(angle);
    mesh.position.z = 4 * Math.sin(angle);
})
</pre>
</mapFrame>