精华内容
下载资源
问答
  • 有具体文章介绍,使用Cesium中创建路线,使用每帧监听定位气泡 脚本具体操作请参考 https://blog.csdn.net/qq_35984445/article/details/116856071 文件中为html,无压缩,能正常阅读
  • Cesium气泡信息提示框

    2018-01-16 14:40:10
    Cesium气泡信息提示框,在地图上点击一个点图标,弹出一个信息提示框,可以跟随图表一起移动。
  • Cesium自定义气泡弹窗

    千次阅读 2020-08-02 00:08:32
    Cesium自定义气泡弹窗 气泡弹出窗口在项目中会经常用到,但Cesium提供的信息窗口比较丑。 以下弹窗基于Vue封装,也有原生js版本。

    Cesium自定义气泡弹窗、Cesium自定义信息框

    气泡弹出窗口在项目中会经常用到,但Cesium提供的信息窗口比较丑。
    以下弹窗基于Vue封装,也有原生js版本。

    效果图

    在这里插入图片描述
    在这里插入图片描述

    关键代码

        postRender() {
            if (!this.vmInstance.$el || !this.vmInstance.$el.style) return;
            const canvasHeight = this.viewer.scene.canvas.height;
            const windowPosition = new Cesium.Cartesian2();
            Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.position, windowPosition);
            this.vmInstance.$el.style.bottom = canvasHeight - windowPosition.y + 80 + "px";
            const elWidth = this.vmInstance.$el.offsetWidth;
            this.vmInstance.$el.style.left = windowPosition.x - (elWidth / 2) + "px";
    
            if (this.viewer.camera.positionCartographic.height > 4000) {
                this.vmInstance.$el.style.display = "none";
            } else {
                this.vmInstance.$el.style.display = "block";
            }
        } 
    
    this.infoWindow = new MultiFieldAdaptWindow(this.viewer, e.position._value, "监控信息", ["监控名称", "IP地址", "监控类型", "监控状态"], [e.info.name, e.info.ip, e.info.type, e.info.state]);
    

    详情参见 Cesium实战项目

    展开全文
  • Cesium自定义弹窗

    千次阅读 2020-12-09 17:39:45
    自定义弹窗 var Popups = []; var viewer = new Cesium.Viewer('cesiumContainer', { //imageryProvider: globemap, selectionIndicator: false, animation: false, baseLayerPicker: false, ...

    自定义弹窗

    在这里插入图片描述
    css

    <style type="text/css">
    			html,
    			body,
    			#cesiumContainer {
    				width: 100%;
    				height: 100%;
    				margin: 0;
    				padding: 0;
    				overflow: hidden;
    			}
    			.leaflet-popup {
    				position: absolute;
    				text-align: center;
    			}
    			.leaflet-popup-close-button {
    				position: absolute;
    				top: 0;
    				right: 0;
    				padding: 4px 4px 0 0;
    				text-align: center;
    				width: 18px;
    				height: 14px;
    				font: 16px/14px Tahoma, Verdana, sans-serif;
    				color: #c3c3c3;
    				text-decoration: none;
    				font-weight: bold;
    				background: transparent;
    			}
    
    			.leaflet-popup-content-wrapper {
    				text-align: center;
    				overflow-y: auto;
    				background: transparent;
    				padding: 1px;
    				text-align: left;
    				border-radius: 5px;
    			}
    
    			.leaflet-popup-tip-container {
    				margin: 0 auto;
    				width: 40px;
    				height: 20px;
    				position: relative;
    				overflow: hidden;
    			}
    
    			/*引导线*/
    			.leaflet-popup-tip {
    				background: white;
    				box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    				width: 17px;
    				height: 17px;
    				padding: 1px;
    				margin: -10px auto 0;
    				-webkit-transform: rotate(45deg);
    				-moz-transform: rotate(45deg);
    				-ms-transform: rotate(45deg);
    				-o-transform: rotate(45deg);
    				transform: rotate(45deg);
    			}
    		</style>
    

    js

    var Popups = [];
    		var viewer = new Cesium.Viewer('cesiumContainer', {
    			//imageryProvider: globemap,
    			selectionIndicator: false,
    			animation: false,
    			baseLayerPicker: false,
    			geocoder: false,
    			timeline: false,
    			sceneModePicker: false,
    			navigationHelpButton: false,
    			infoBox: false,
    			fullscreenButton: false,
    			homeButton: false,
    		});
    
    		viewer.scene.globe.depthTestAgainstTerrain = true;
    
    		var imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    			url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
    			name: "arcgis影像服务"
    		});
    		viewer.imageryLayers.addImageryProvider(imageryProvider);
    
    		viewer.camera.flyTo({
    			destination: Cesium.Cartesian3.fromDegrees(114.21772195, 22.725681793, 53298.0),
    		})
    
    		//获取当前点击的位置坐标
    		var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    		handler.setInputAction(function(movement) {
    			var windowPosition = viewer.camera.getPickRay(movement.position);
    			var cartesianCoordinates = viewer.scene.globe.pick(windowPosition, viewer.scene);
    			var cartoCoordinates = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesianCoordinates);
    			var cartesian2 = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
    			var carto2 = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian2);
    			latitude = carto2.latitude * 180 / Math.PI;
    			longitude = carto2.longitude * 180 / Math.PI;
    			//alert("纬度:"+latitude+","+"经度:"+longitude);
    			var cartesian = viewer.scene.pickPosition(movement.position);
    			//弹窗 参数 
    			var paramObj = {
    				id: 'trackPopUpContent',
    				HTMLdiv: '<div class="leaflet-popup-content-wrapper" style="background:#FFF;">' +
    					'<div id="trackPopUpLink" class="leaflet-popup-content" style="max-width:300px;max-height:500px"><h5>纬度:' +
    					latitude + ',<br>经度:' + longitude + '</h5></div>' +
    					'</div>',
    				Offset: {
    					x: 0,
    					y: 0
    				},
    				coordinate: cartesian, //笛卡尔坐标参数
    				lineStyle: {
    					Linewidth: 3,
    					Lineheight: 25,
    					Linebackground: '#409EFF'
    				},
    				CircleStyle: {
    					Circleradius: 8,
    					Circlecolor: '#409EFF'
    				},
    				heighthidenum: 1000, //高度隐藏值
    			}
    			//固定弹窗 位置
    			PopupCoordinatePositioning(paramObj);
    		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    
    		/*滚轮事件 监听高度值*/
    		handler.setInputAction(function(wheelment) {
    			var height = Math.ceil(viewer.camera.positionCartographic.height);
    			console.log("高:" + height);
    		}, Cesium.ScreenSpaceEventType.WHEEL)
    
    		var PopupCoordinatePositioning = function(paramObj) {
    			$("#" + paramObj.id).remove(); //移除
    			var position = paramObj.coordinate;
    			if (!position) {
    				position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
    			}
    			var MarkStr = '<div id="' + paramObj.id +
    				'" class="leaflet-popup" style="bottom: 0px; left: 0px;background: transparent;">' +
    				paramObj.HTMLdiv +
    				'<div class="leaflet-popup-tip-container" style="height: initial;">' +
    				'<div class="leaflet-popup-tip" style="transform: inherit; width:' + paramObj.lineStyle.Linewidth + 'px; height:' +
    				paramObj.lineStyle.Lineheight + 'px; background: ' + paramObj.lineStyle.Linebackground +
    				'; margin: auto; box-shadow:' + paramObj.lineStyle.Linebackground + ' 0px 1px 10px;"></div>' +
    				'<div style="box-shadow: 0px 0px 8px ' + paramObj.CircleStyle.Circlecolor + ';width:' + paramObj.CircleStyle.Circleradius +
    				'px;height:' + paramObj.CircleStyle.Circleradius + 'px;background:' + paramObj.CircleStyle.Circlecolor +
    				';margin:auto;border-radius:50%;"></div>' +
    				'</div>' +
    				'</div>';
    			var id = viewer._container.id;
    			$("#bubbleContent").append(MarkStr);
    			var AllClass = $("#" + paramObj.id).attr("class");
    			if (AllClass.indexOf("leaflet-popup-content-wrapper") == -1) {
    				$("#" + paramObj.id).attr("class", AllClass + " leaflet-popup-content-wrapper");
    			}
    			var realTime = new Object(); //示例初始化一个Object 
    			realTime.PopupsID = paramObj.id;
    			realTime.scenePosition = position;
    			realTime.paramObj = paramObj;
    			if (Popups.length == 0) {
    				Popups.push(realTime);
    			}
    			var bools = true;
    			for (var i = 0; i < Popups.length; i++) {
    				if (Popups[i].PopupsID == paramObj.id) {
    					Popups[i] = realTime;
    					bools = false;
    				}
    			}
    			if (bools) {
    				Popups.push(realTime);
    			}
    
    			$("#" + paramObj.id).show();
    			viewer.scene.postRender.addEventListener(function() { // 每一帧都去计算气泡的正确位置
    				if (Popups.length > 0) {
    					for (var i = 0; i < Popups.length; i++) {
    						var infoboxContainer = document.getElementById(Popups[i].PopupsID); //morphComplete
    						if (infoboxContainer != null) {
    							//var infoboxContainer = document.getElementById("bubble");//morphComplete
    							if (Popups[i].scenePosition) {
    								var canvasHeight = viewer.scene.canvas.height;
    								var windowPosition = new Cesium.Cartesian2();
    								Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, Popups[i].scenePosition, windowPosition);
    								infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + Popups[i].paramObj.Offset.y) + 'px';
    								infoboxContainer.style.left = (windowPosition.x + -(infoboxContainer.scrollWidth / 2)) + 'px';
    							}
    						}
    					}
    				}
    				var height = Math.ceil(viewer.camera.positionCartographic.height);
    				
    			});
    
    		}
    
    展开全文
  • Cesium自定义气泡弹窗写在前面实现思路用原生html+js+css实现 写在前面 在日常的GIS应用中,气泡弹窗不可或缺,前端框架leaflet就有自己的弹窗,互联网地图都有自己的气泡弹窗,只是非常简约而已。 而Cesium也有自己...

    写在前面

    在日常的GIS应用中,气泡弹窗不可或缺,前端框架leaflet就有自己的弹窗,互联网地图都有自己的气泡弹窗,只是非常简约而已。
    而Cesium也有自己的弹窗,只是这个弹窗似乎不怎么适合我们,它在右上角!不能出现在鼠标点击位置。
    网上也有好多示例可参考。在借鉴了前人们的经验后,自己决定动手写一下。
    用原生html+js+css、React(陆续更新)、vue方式分别实现(陆续更新),如有不合适之处,欢迎指正,欢迎交流。

    实现思路

    1. 创建弹窗dom节点
    2. 通过鼠标点击的屏幕位置弹出气泡
    3. 给dom节点添加信息内容
    4. 监听地图点击位置变化,更新弹窗的屏幕坐标(2021-09-16完成)

    用原生html+js+css实现

    在这里插入图片描述

    1. html代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <link href="/Cesium/Widgets/widgets.css" rel="stylesheet">
        <script type="text/javascript" src="/Cesium/Cesium.js"></script>
        <script src="./popup.js"></script>
        <title>popup</title>
    </head>
    <body style="margin: 0px;width:100%;height:100%;">
        <div id="cesiumContainer" style="width:100%;height:100%;position:absolute;"></div>
    </body>
    <style>
        .self-define-popup {
            position: absolute;
            display: none;
            left: 400px;
            top: 600px;
            min-width: 280px;
            max-width: 400px;
            max-height: 340px;
            min-height: 150px;
            padding: 10px;
            background-color: #fff;
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
            z-index: 100;
        }
    
        .self-define-popup:after {
            display: inline-block;
            position: absolute;
            bottom: -13px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top: 8px solid #fff;
            content: "";
        }
    
        .self-define-popup-close-button {
            font-size: 24px;
            position: absolute;
            background: #fff;
            padding: 0 6px;
            box-sizing: border-box;
            cursor: pointer;
            z-index: 101;
            transition: color .3s;
            top: 0;
            right: 0;
            border-radius: 2px;
            width: 30px;
            height: 30px;
            color: #5d5d5d;
            background-color: transparent;
            border: 0;
        }
    
        .self-define-popup-close-button:hover {
            color: #1890ff;
        }
    
        .self-define-popup-content {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        //created by onegiser at 2021-09-15
        const key="天地图key"
        const viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProviderViewModels: [
                new Cesium.ProviderViewModel({
                    name: "天地图影像",
                    iconUrl: "/imgs/map/tdt_img.jpg",
                    creationFunction: () => {
                        const imgImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                            url: "http://t{s}.tianditu.com/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + key,
                            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                            tilingScheme: new Cesium.GeographicTilingScheme(),
                            tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]
                        })
                        return [imgImageryProvider]
                    }
                })
            ]
        })
        const popup = new Popup(viewer)
        //测试
        const mouseClickHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        mouseClickHandler.setInputAction((e) => {
            const { position } = e
            const html = `<div>
               <div>位置</div>
               <div>x:${position.x}</div>
               <div>y:${position.y}</div>
                </div>`
            popup.showInfo(position, html)
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    </script>
    </html>
    
    1. popup.js(核心代码)
    function Popup(viewer) {
        this.viewer = viewer
        this.showInfo = showInfo
        this.addMapListen = addMapListen
        this.init = init
        this.cartesian3
        this.init(viewer)
        function init(viewer) {
            addDom(viewer)
            addCloseListen()
            this.addMapListen()
        }
    
        function addMapListen() {
            this.viewer.scene.postRender.addEventListener(() => {
                if (this.cartesian3) {
                    const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, this.cartesian3);
                    calculatePosition(position)
                }
            });
        }
    
    
        function showInfo(position, html) {
            const ray = this.viewer.camera.getPickRay(position);
            this.cartesian3 = this.viewer.scene.globe.pick(ray, this.viewer.scene);
            calculatePosition(position)
            info(html)
        }
    
        function info(html) {
            const element = getPopupContentElement()
            element.innerHTML = ''
            if (element) {
                const popupContentContainer = document.createElement("div")
                popupContentContainer.innerHTML = html
                element.appendChild(popupContentContainer)
            }
        }
    
        function addDom(viewer) {
            const container = viewer.container
            const popupContainer = document.createElement("div")
            const html = '<div class="self-define-popup">' +
                '<div class="self-define-popup-close-button">×</div>' +
                '<div class="self-define-popup-content"></div>' +
                '</div>'
            popupContainer.innerHTML = html
            container.appendChild(popupContainer)
        }
    
        function getPopupElement() {
            const elements = document.getElementsByClassName("self-define-popup")
            if (elements && elements[0]) {
                return elements[0]
            }
            return undefined
        }
    
        function getPopupContentElement() {
            const elements = document.getElementsByClassName("self-define-popup-content")
            if (elements && elements[0]) {
                return elements[0]
            }
            return undefined
        }
    
        function getPopupCloseElement() {
            const elements = document.getElementsByClassName("self-define-popup-close-button")
            if (elements && elements[0]) {
                return elements[0]
            }
            return undefined
        }
    
    
        function addCloseListen() {
            const closeElement = getPopupCloseElement()
            if (closeElement) {
                closeElement.onclick = () => {
                    const element = getPopupElement()
                    hide(element)
                    this.cartesian3 = undefined
                }
            }
        }
    
        function calculatePosition(position) {
            const element = getPopupElement()
            if (element) {
                show(element)
                const x = position.x - element.clientWidth / 2
                const y = position.y - element.clientHeight
                element.style.left = `${x}px`
                element.style.top = `${y}px`
            }
        }
    
        function show(element) {
            if (element) {
                element.style.display = "block"
            }
        }
    
        function hide(element) {
            if (element) {
                element.style.display = "none"
            }
        }
    }
    
    展开全文
  • (转载)cesium气泡弹窗,已实现

    千次阅读 热门讨论 2018-10-15 09:40:58
    最近在做cesium气泡弹窗,找到作者:zlx312 原文:https://blog.csdn.net/zlx312/article/details/79824940?utm_source=copy 写的比较好的博客,并按照教程实现了,在此感谢并转载记录以后备用! (在借鉴过程...

    最近在做cesium的气泡弹窗,找到作者:zlx312 原文:https://blog.csdn.net/zlx312/article/details/79824940?utm_source=copy 写的比较好的博客,并按照教程实现了,在此感谢并转载记录以后备用!

    (在借鉴过程中出现两个问题,通过查询资料解决了,主要由以下三点,

    (1)因为刚开始做地图,刚开始找不到scene是哪里定义的,后台查询资料确定 var scene = viewer.scene;

    (2) 可能是版本问题,我使用文中的

       var handler3D = new Cesium.ScreenSpaceEventHandler(scene.canvas);
       handler3D.setInputAction(function(movement) {           }定义鼠标事件一直诶成功,后来使用如下方法实现:

    viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(getLittleWindow,Cesium.ScreenSpaceEventType.RIGHT_CLICK);            

    (3)可能是一些经纬度设置转化的差异,在文中的var cartographic = Cesium.Cartographic.fromCartesian(movement.position);我一直是失败,查询了一些资料(https://blog.csdn.net/u012123612/article/details/78621498?utm_source=copy )发现需要在这一步前面添加:

    var cartesian=viewer.camera.pickEllipsoid(evt.position,viewer.scene.globe.ellipsoid);
    var cartographic=Cesium.Cartographic.fromCartesian(cartesian);

    由于我们实现过程中的一些设置会有差异,因此如需参考,读者可首先根据@zlx312 博客中的方法试试,如果不行可以尝试我的一些修改方法,如上两点。

    下面是zlx312 博客原内容,希望对君有用:

    在Web GIS开发的过程中,我们非常需要一个信息窗口去展示点击实体的功能,Cesium自带的InfoWindow是比较方便调用的,但是有很多局限性:比如它只能出现在右上角;比如它的样式不太美观;比如它的按钮无法响应js的onclick事件~

    这个时候我就在想百度地图、高德地图的SDK多好用啊,气泡两行代码就可以生成了~在我百思不得解的时候,cesium交流群里的大大们告诉我——自定义气泡窗口。听起来非常麻烦呢,于是我就马不停蹄地开始实践啦~

    思想和部分核心代码参考GIS之家的博文cesium自定义气泡窗口infoWindow后续优化篇点击打开链接 ,非常有启发性的一篇文章,这里就不再赘述了,不过GIS之家的文章非常简练,作为小白的我刚开始是一头雾水的。本章主要是对附上我经过几日的努力编写出的完整实现代码,以供大家参考。

    CSS

    @CHARSET "UTF-8";
    /*leaflet风格气泡窗口样式模板*/
    .leaflet-popup {
        position: absolute;
        text-align: center;
    }
    .leaflet-popup-close-button {
        position: absolute;
        top: 0;
        right: 0;
        padding: 4px 4px 0 0;
        text-align: center;
        width: 18px;
        height: 14px;
        font: 16px/14px Tahoma, Verdana, sans-serif;
        color: #c3c3c3;
        text-decoration: none;
        font-weight: bold;
        background: transparent;
    }
    .leaflet-popup-content-wrapper {
        text-align: center;
        max-height: 200px;
        overflow-y: auto;
        background: white;
        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
        padding: 1px;
        text-align: left;
        border-radius: 12px;
    }
    .leaflet-popup-content {
        margin: 13px 19px;
        line-height: 1.4;
    }
    .leaflet-popup-tip-container {
        margin: 0 auto;
        width: 200px;
        height: 100px;
        position: relative;
        overflow: hidden;
    }
    .leaflet-popup-tip {
        background: white;
        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
        width: 17px;
        height: 17px;
        padding: 1px;
        margin: -10px auto 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
     
    /*按钮样式*/
    .add-button{
        
    }
    /**
     * 动态添加气泡窗口
     */
    var removeHandler;
    var content;
    var autoInfoWindow;
     var infoDiv = '<div id="trackPopUp" style="display:none;">'+
                                 '<div id="trackPopUpContent" class="leaflet-popup" style="top:5px;left:0;">'+
                                   '<a class="leaflet-popup-close-button" href="#">×</a>'+
                                   '<div class="leaflet-popup-content-wrapper">'+
                                     '<div id="trackPopUpLink" class="leaflet-popup-content" style="max-width: 300px;"></div>'+
                                   '</div>'+
                                   '<div class="leaflet-popup-tip-container">'+
                                     '<div class="leaflet-popup-tip"></div>'+
                                   '</div>'+
                                 '</div>'+
                               '</div>';
                 $("#cesiumContainer").append(infoDiv);
        
                var handler3D = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                handler3D.setInputAction(function(movement) {                        
                    var pick = scene.pick(movement.position);
                    if(pick && pick.id){
                        console.log(pick.id);
                        $('#trackPopUp').show();
                        var cartographic = Cesium.Cartographic.fromCartesian(movement.position);
                        var point=[cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                        var destination=Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0);
                            var id=pick.id._id.replace(/[^0-9]/ig,"");
                            content = 
                             '<table><tbody><tr><th style="color:black;">'+pick.id._name+'</th><td><button style="color:black;" οnclick="updateValve('+id+')">确定</button></td><td><button οnclick="deleteValve('+id+')" style="color:black;">删除</button></td></tr>'+
                             '<tr><th style="color:black;">类型</th><td><input style="color:black;" value='+station[id].stadianame+'></td></tr>'+
                             '<tr><th style="color:black;">经度</th><td><input id="x" style="color:black;" value='+station[id].x.toFixed(6)+'></td></tr>'+
                             '<tr><th style="color:black;">纬度</th><td><input id="y" style="color:black;" value='+station[id].y.toFixed(6)+'></td></tr>'+
                     '</tbody></table>'    
                    var obj = {position:movement.position,destination:destination,content:content};
                    infoWindow(obj);
                    
                     function infoWindow(obj) {
                                    var picked = scene.pick(obj.position);
                                    if (Cesium.defined(picked)) {
                                        var id = Cesium.defaultValue(picked.id, picked.primitive.id);
                                        if (id instanceof Cesium.Entity) {
                                            $(".cesium-selection-wrapper").show();
                                            $('#trackPopUpLink').empty();
                                            $('#trackPopUpLink').append(obj.content);
                                            function positionPopUp (c) {
                                                var x = c.x - ($('#trackPopUpContent').width()) / 2;
                                                var y = c.y - ($('#trackPopUpContent').height());
                                                $('#trackPopUpContent').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');
                                            }
                                            var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
                                            $('#trackPopUp').show();
                                            positionPopUp(c); // Initial position
                                                                // at the place item
                                                                // picked
                                            removeHandler = viewer.scene.postRender.addEventListener(function () {
                                                if(picked.id._polyline!=null){
                                                    var pos={};
                                                    pos.x=(id._polyline._positions._value["0"].x+id._polyline._positions._value[1].x)/2;
                                                    pos.y=(id._polyline._positions._value["0"].y+id._polyline._positions._value[1].y)/2;
                                                    pos.z=(id._polyline._positions._value["0"].z+id._polyline._positions._value[1].z)/2;
                                                    var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,pos);
                                                }else{
                                                    var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, id._position._value);
                                                }// If things moved, move the
                                                    // popUp too
                                                if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
                                                    positionPopUp(changedC);
                                                    c = changedC;
                                                }
                                            });
                                            // PopUp close button event handler
                                            $('.leaflet-popup-close-button').click(function() {
                                                $('#trackPopUp').hide();
                                                $('#trackPopUpLink').empty();
                                                $(".cesium-selection-wrapper").hide();
                                                removeHandler.call();
                                                return false;
                                            });                                
                                            return id;
                                        }
                                    }            
                         }  
                    }
                    else{
                        $('#trackPopUp').hide();
                       
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);            
    JS部分如上,我的后端是Java写的,从数据库中一次性取出了所有信息存为JSON,方便调用

    该气泡窗会随着缩放移动而动态改变,也可以响应js jquery的点击事件,如果觉得样式单调,自行美化CSS就可以了,非常方便~

    效果如下

    备注:地图上的点线是我通过将cad文件直接解析为json进行读取的,如果有必要的话后面的文章也会写一下过程(虽然可能太简单了没人看哈哈)
    --------------------- 
    作者:zlx312 
    来源:CSDN 
    原文:https://blog.csdn.net/zlx312/article/details/79824940?utm_source=copy 
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • cesium功能封装之气泡弹窗

    千次阅读 2020-08-18 16:21:18
    本文主要梳理该功能的实现过程,用的到不仅仅是cesium的功能,还有iclient单独封装的方法。 S3MTileslayer.setQueryParameter 因为默认加载的图层是基于iServer发布的S3M图层,因此为实现模型加载后的实时查询,...
  • 效果图如下: 1. 从后台获取遍历的数据,先遍历循环加上点位 setTimeout(() => { this.UAVpoint.forEach(result =&... var pinBuilder = new Cesium.PinBuilder(); var bluePin = this.viewer.en...
  • Cesium--气泡弹窗

    2018-07-14 15:42:00
     由于cesium没有自带的点击弹出气泡的功能,所以需要自己去开发一个这样的功能,网络上资源很多,看到基本思路都一致。以下奉上参考网址  :https://blog.csdn.net/zlx312/article/category/7232371 实现...
  • cesium动态变化弹出框

    2019-01-15 14:03:19
    cesium中点击拾取坐标,在弹出框中显示。 弹出框位置自动变化。
  • cesium 气泡弹窗 坐标转换
  • Cesium气泡窗口样式

    2020-12-21 21:54:46
    Cesium气泡窗口样式效果关键代码 效果 关键代码 const canvasHeight = this.viewer.scene.canvas.height; const windowPosition = new Cesium.Cartesian2(); Cesium.SceneTransforms.wgs84ToWindowCoordinates...
  • cesium项目中,我们通过鼠标点击场景中的实体,进而弹出提示框信息,是最基本的项目需求,如果想实现改提示框跟随场景的移动而移动还是有点难度的,而且用户体验更佳。 一、实现思路 实现整个过程我们需要分为俩...
  • cesium气泡窗的创建

    千次阅读 2019-01-08 11:47:57
    之前在网上看了几个同行写的cesium创建气泡窗的代码,或者是当地球转到背面时气泡窗还存在,或者是气泡窗功能不完全,自己抽了点时间重写了这个功能,以下供各位同行参考; 主要是借用了leaflet的气泡窗,完善了...
  • (3)鼠标左键监听事件换成了时钟帧数调用监听事件viewer.clock.onTick.addEventListener,根据路线图的每次的时间刻度调用实现气泡追踪。 部分代码: 创建path路线图 //路线参数 处理 var positionData = paramObj...
  • 创建弹窗的方法 调用2的方法 html <div id="bubble" class="bubble" v-show="showBuble"> <div id="tools" style="text-align: right"> <span style=" padding: 5px; position: absolute; left: ...
  • cesium 点击弹出气泡

    千次阅读 2018-04-25 22:09:55
    因为cesium没有自带的点击弹出气泡的功能,所以需要自己去开发一个这样的功能 直接上代码 window.Cesium.Viewer.prototype.addOverlay=function(overlay){ overlay.setViewer(this); this._container....
  • } }) }) // 气泡窗 function getInfo(){ //开始查询 var handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler3D.setInputAction(function(event) { var pick = viewer.scene....
  • Cesium:地球中实现点击浮动弹窗

    千次阅读 2019-12-03 09:37:14
    我也仅仅是一个Cesium的初学者,代码参考了小专栏里面的cesium 之自定义气泡窗口以及社区- Cesium中文网Cesium中级教程4 - 空间数据可视化的两篇文章写得. 其实如果不自己定义弹窗,直接在原生弹窗的description 里...
  • http://www.cnblogs.com/giserhome/p/6248858.html该篇文章实现的自定义气泡窗口是基于修改cesium源代码基础上,这种做法只是援兵之计,凑合应付的,投机取巧罢了,实际上是不太适合的,cesium api更新版本替换,又...
  • // preRender获取当前场景每帧渲染前的事件,监听... var position = Cesium.Cartesian3.fromDegrees(Number("经度"), Number("纬度")); //cartesianToCanvasCoordinates 转换三维空间坐标到canvas坐标(窗口坐标) .
  • Cesium里面的气泡

    千次阅读 2020-09-17 18:58:07
    Cesium是默认支持弹出气泡的,只要在初始化时不明确将infoBox置为false,点击地图都会弹出气泡: var viewer = new Cesium.Viewer("cesiumViewer",{ imageryProvider : new Cesium.ArcGisMapServerImageryProvider...
  • cesium不像高德、百度等有infobox,点击上点图标如果需要特殊样式弹窗,就需要自己定义样式。 之前参考一篇文章,把弹窗dom写在vue的template里面,导致有初始位置,在改变弹窗位置时会有闪烁的效果。此处是先创建...
  • cesium中随entity动态变化的弹出框

    千次阅读 2020-07-14 17:18:54
    原理介绍: 1.... bubble.style.left = e.position.x-70+"px"; var divheight = bubble.offsetHeight; var divy = e.... 以下是代码:(基于supermap的demo改写的,加载数据路径可能不同) 动态气泡 对象属性 test
  • vue封装弹出框组件

    2020-01-07 17:28:31
    https://www.jb51.net/article/173269.htm
  • cesium自定义气泡随着球转动

    千次阅读 2018-07-05 12:02:42
    var setPosition = function () { // 世界坐标 var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position); if ...
  • Cesium】自定义标签弹窗

    千次阅读 2020-02-28 16:02:20
    /*自定义气泡弹窗*/ /*leaflet风格气泡窗口样式模板*/ .trackPopUp { display: none; color: rgb(255, 255, 255); height: 50px; } .leaflet-popup { position: absolute; } .leaflet-popup-close-button { ...

空空如也

空空如也

1 2 3 4
收藏数 61
精华内容 24
关键字:

cesium气泡弹窗