Cesium里面的气泡

约定不等于承诺〃 2022-12-08 04:42 180阅读 0赞

平面GIS中，点击地图出气泡是非常普遍的操作。三维地图框架Cesium里面，当然也支持，只不过样式和内容不一定符合我们要求就是了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]  
Cesium是默认支持弹出气泡的，只要在初始化时不明确将infoBox置为false，点击地图都会弹出气泡：

var viewer = new Cesium.Viewer("cesiumViewer",{ 
    	imageryProvider : new Cesium.ArcGisMapServerImageryProvider({ 
    		url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"//午夜
    	}),
    	//点击后显示详细信息
    	infoBox: true,
    	……
    });

但如上所述，气泡的样式和内容，在实际应用中，我们需要进行设置。但问题是，在运行过程中，viewer初始化后，默认的infoBox是只读的，样式设置无效，内容也添加不进去。怎么办？这时候需要隐藏默认的infoBox，然后构造新的infoBox。

## 一、隐藏默认infoBox，构造新infoBox ##

默认的infoBox是只读的，可以说任何设置对它都无效。那如何隐藏？方法是设置infoBox对应的css样式，添加一个display=none的属性。然后再构造一个新的infoBox。

//得到当前默认的infoBox
    var curInfoBox = $(".cesium-infoBox");
    //隐藏
    curInfoBox.addClass("hidden");
    //找到infoBox所在容器
    var container = document.getElementsByClassName("cesium-viewer-infoBoxContainer")[0];
    if(!container){ //如果容器不存在，则构造一个。不存在的情况，估计是viewer初始化时，infoBox=false
    	container = document.createElement('div');
    	container.className = 'cesium-viewer-infoBoxContainer';
    	viewer.container.appendChild(container);
    }
    //构造infoBox
    var infoBox = new Cesium.InfoBox(container);
    viewModel = infoBox.viewModel;//只要设置这个viewModel，就能控制气泡的显隐
    viewModel.closeClicked.addEventListener(function(){ //点击气泡右上角的关闭按钮
    	viewModel.showInfo = false;//关闭气泡
    });

## 二、点击时，设置内容并弹出infoBox ##

效果见下图右上角  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center 1]

## 三、简易提示 ##

气泡点击时弹出。但动静比较大，我们可以设置鼠标划过一些对象时，弹出一些简易的提示，如上图下方。

简易提示主要使用 Label。用法也比较简单：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/0ee3c1f134fb42eda2f51a856fa01305.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/d937111175644c62a9ef8a0ad808437b.png