唯杰地图 logo唯杰地图
VJMAP
EN

Popup2D信息弹出窗标记

vjmap3d/references/ui/popup2D.md 5.3 KB138 行
原文

Popup2D信息弹出窗是基于threejs中 CSS2DObject 实现的div信息弹出窗标记。

常用方法

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

信号名

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

对于div的事件，可以通过getElement获取div元素，对此div增加事件（须在 addTo 且设置内容之后；之前请用 popup2d.element）。 如

popup2d.getElement().addEventListener("dblclick", event => {
    console.log("双击")
});

用法示例

创建一个popup2d

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);

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(`
Hello, VJMAP3D
`)
.setPosition(2, 0, 1)
.addTo(app);

做为一个对象的子节点

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 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);
})