Cesium加载图标，并实现图标点击监听

最新推荐文章于 2024-12-31 16:56:55 发布

原创最新推荐文章于 2024-12-31 16:56:55 发布 · 1w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#Cesium #加载图标

Cesium 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在Cesium中加载图标并实现图标点击监听功能。通过具体代码示例，展示了如何设置图标位置、样式及响应点击事件，适用于地理信息系统（GIS）应用开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cesium加载图标，并实现图标点击监听

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>cesium添加图标</title>
		<link rel="stylesheet" href="../Build/Widgets/widgets.css" />
		<script src="../Build/Cesium.js"></script>
	</head>
	<body style="margin: 0px;padding: 0px;">
		<div  id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
	</body>
	<script>
	   	var viewer = new Cesium.Viewer('cesiumContainer',{ 
	   		//需要进行可视化的数据源的集合
           animation: false, //是否显示动画控件
            shouldAnimate : true,
            homeButton: false, //是否显示Home按钮
            fullscreenButton: false, //是否显示全屏按钮
            baseLayerPicker: false , //是否显示图层选择控件
            geocoder: false, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: false, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: false, //是否显示点击要素之后显示的信息
            requestRenderMode: true, //启用请求渲染模式
            scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
            sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
            //fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
		 	 imageryProvider:new Cesium.createTileMapServiceImageryProvider({  
					     url : 'http://10.10.15.100:8080/arcgisTile',
					     credit:"googvarile"
						})
		});
		var layers = viewer.imageryLayers;  
		viewer._cesiumWidget._creditContainer.style.display="none";
		
		var citizensBankPark = viewer.entities.add( {
		    name : '风机设备',
		    code:"123456789",
		    
		    position : Cesium.Cartesian3.fromDegrees( 108.953726,34.265776 ),
		    point : { //点
		        pixelSize : 5,
		        color : Cesium.Color.RED,
		        outlineColor : Cesium.Color.WHITE,
		        outlineWidth : 2
		    },
		    label : { //文字标签
		        text : '风机设备',
		        font : '14pt monospace',
		        style : Cesium.LabelStyle.FILL,
		        outlineWidth : 2,
		        verticalOrigin : Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
		        pixelOffset : new Cesium.Cartesian2( 0, -9 )   //偏移量
		    },
		    billboard : { //图标
		        image  : '../images/label/wood.jpg',
		        width : 16,
		        height : 16
		    }
		} );
		 
		viewer.zoomTo( viewer.entities );
		/*
		 * 鼠标点击事件
		 */
		 var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function(click) {
            var pick = viewer.scene.pick(click.position);
            //选中某模型   pick选中的对象
            if(pick && pick.id){
            	alert(pick.id._code);
            }

         }, Cesium.ScreenSpaceEventType.LEFT_CLICK  );

		
		
		
	</script>
</html>