Cesium对实体元素鼠标点击popup div信息框

苹果园dog

已于 2024-10-09 14:20:30 修改

阅读量1k

点赞数

分类专栏： Cesium 文章标签： Cesium

于 2023-09-18 14:25:21 首次发布

本文链接：https://blog.csdn.net/u014556081/article/details/132976988

版权

Cesium 专栏收录该内容

48 篇文章 45 订阅

订阅专栏

一、简介

设置div信息框模板，给实体元素绑定事件，同步空间位置，然后在回调函数弹出信息框。

二、示例源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标单击Popup信息框</title>
    <script src="./js/config.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <link rel="stylesheet" href="./css/common.css">
    <script type="text/javascript" src="../anov-gis-sdk/index.js"></script>
    <link rel="stylesheet" href="../anov-gis-sdk/index.css">
    <link rel="stylesheet" href="./css/htmllayer.css">
</head>

<body>
    <div id="global">

    </div>
    <script>
        new Vue({
            el: '#global',
            template: `<div id="cesiumContainer"></div>`,
            mounted() {
                this.init3D();
            },
            methods: {
                init3D() {
                    window.viewer = new ANOVGIS.Viewer("cesiumContainer");
                    viewer.scene.debugShowFramesPerSecond=true; 
                    viewer.imageryLayers.addImageryProvider(
                        ANOVGIS.ImageryLayerFactory.createImageryLayer(ANOVGIS.ImageryType.TDT, {
                            style: "img",
                            key: globalConfig.tdtKey
                        }));
                    let layer = new ANOVGIS.VectorLayer({id:'layer'});
                    viewer.addLayer(layer);
                    
                    let positions = globalConfig.generatePosition(4);
                    this.addData(layer, positions);
                    viewer.flyTo(layer);
                },
                addData(l, positions) {
                    this.addOne(l, positions[0]);
                    this.addTwo(l, positions[1]);
                    this.addThree(l, positions[2]);
                    // this.addFour(l, positions[3]);
                },
                addOne(layer, position) {
                    let option = {
                        color: ANOVGIS.Color.WHITE,
                        pixelSize: 12,
                        outlineColor: ANOVGIS.Color.BLUE,
                        outlineWidth: 2,
                        label: {
                            text: '文字标签',
                            font: '25px sans-serif',
                            color: "#ffff00",
                            clampToGround: true,
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            pixelOffset: new Cesium.Cartesian2(0.0, -12)
                        }
                    }
                    let v = new ANOVGIS.Point(position, option);
                    v.bindPopup({
                        viewer: viewer,
                        useDefaultHtmlTemplate: true,//是否用默认模板
                    });
                    v.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
                        v.popup.show(e.position, '文本字符串');
                        console.log(e);
                    })
                    layer.addGraphic(v);
                },
                addTwo(layer, position) {
                    let pointOption = {
                        color: ANOVGIS.Color.WHITE,
                        pixelSize: 12,
                        outlineColor: ANOVGIS.Color.BLUE,
                        outlineWidth: 2,
                        label: {
                            text: '文字标签',
                            font: '25px sans-serif',
                            color: "#ffff00",
                            clampToGround: true,
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            pixelOffset: new Cesium.Cartesian2(0.0, -12)
                        },
                        infoData: {
                            title: '带标题的默认模板',
                            fieldsMap: [{
                                nameC: '编号',
                                value: 123
                            },
                            {
                                nameC: '姓名',
                                value: '单位名称'
                            },
                            {
                                nameC: '备注',
                                value: '2023年'
                            }]
                        }
                    }
                    let v = new ANOVGIS.Point(position, pointOption);
                    v.bindPopup({
                        viewer: viewer,
                        showTitle: true,
                        useDefaultHtmlTemplate: true,//是否用默认模板
                    });
                    v.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
                        v.popup.show(e.position, e.graphic.infoData);
                        console.log(e);
                    })
                    layer.addGraphic(v);
                },
                addThree(l, position) {
                    let option = {
                        color: ANOVGIS.Color.WHITE,
                        pixelSize: 12,
                        outlineColor: ANOVGIS.Color.BLUE,
                        outlineWidth: 2,
                        label: {
                            text: '点及Popup',
                            font: '25px sans-serif',
                            color: "#ffff00",
                            clampToGround: true,
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            pixelOffset: new Cesium.Cartesian2(0.0, -12)
                        }
                    }
                    let v = new ANOVGIS.Point(position, option);
                    v.bindPopup({
                        viewer: viewer,
                        horizontalOrigin: 'CENTER',
                        verticalOrigin: 'TOP',
                        offsetX: 0,
                        offsetY: -60,
                        pointerEvents: true,
                        scaleByDistance: {
                            near: 0,
                            nearValue: 1.0,
                            far: 150000,
                            farValue: 0.0
                        },
                        useDefaultHtmlTemplate: false,//是否用默认模板
                    });
                    v.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
                        let str = `<div class="anovBlueGradientPnl">
                                        <div>ssss</div>
                                    </div>`;
                        v.popup.show(e.position, str);
                        console.log(e);
                    })
                    l.addGraphic(v);
                },
                addFour(l, position) {
                    
                },

            }
        });
    </script>
</body>

</html>