<!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, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="description" content="Add billboard images and markers to the scene."> <meta name="cesium-sandcastle-labels" content="Beginner, Showcases"> <title>Billboards2</title> <script type="text/javascript" src="../Sandcastle-header.js"></script> <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script> <script type="text/javascript"> require.config({ baseUrl : '../../../Source', waitSeconds : 60 }); </script> </head> <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html"> <style> @import url(../templates/bucket.css); </style> <div id="cesiumContainer" class="fullSize"></div> <div id="loadingOverlay"><h1>Loading...</h1></div> <div id="toolbar"></div> <script id="cesium_sandcastle_script"> function startup(Cesium) { 'use strict'; //Sandcastle_Begin let viewer = new Cesium.Viewer('cesiumContainer'); function addBillboard() { // Sandcastle.declare(addBillboard); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard :{ image : '../images/Cesium_Logo_overlay.png' } }); } function setBillboardProperties() { // Sandcastle.declare(setBillboardProperties); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard : { image : '../images/Cesium_Logo_overlay.png', // default: undefined show : true, // default // 指定billboard的像素偏移量。 pixelOffset : new Cesium.Cartesian2(0, -50), // default: (0, 0) // 指定眼睛偏移量。(未测试。) eyeOffset : new Cesium.Cartesian3(0.0, 0.0, 0.0), // default // 指定水平原点。 horizontalOrigin : Cesium.HorizontalOrigin.CENTER, // default verticalOrigin : Cesium.VerticalOrigin.BOTTOM, // default: CENTER scale : 2.0, // default: 1.0 color : Cesium.Color.LIME, // default: WHITE rotation : Cesium.Math.PI_OVER_FOUR, // default: 0.0 // 指定沿哪个轴旋转。 alignedAxis : Cesium.Cartesian3.ZERO, // default width : 100, // default: undefined height : 25 // default: undefined } }); } function changeBillboardProperties() { // Sandcastle.declare(changeBillboardProperties); let entity = viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 300000.0), billboard : { image : '../images/Cesium_Logo_overlay.png' } }); let billboard = entity.billboard; billboard.scale = 3.0; billboard.color = Cesium.Color.WHITE.withAlpha(0.25); } function sizeBillboardInMeters() { // Sandcastle.declare(sizeBillboardInMeters); let entity = viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard : { image : '../images/Cesium_Logo_overlay.png', // 指定此广告牌的大小是否应以米为单位。 sizeInMeters : true } }); viewer.zoomTo(entity); } function addMultipleBillboards() { // Sandcastle.declare(addMultipleBillboards); let logoUrl = '../images/Cesium_Logo_overlay.png'; let facilityUrl = '../images/facility.gif'; viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard : { image : logoUrl } }); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-80.50, 35.14), billboard : { image : facilityUrl } }); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-80.12, 25.46), billboard : { image : facilityUrl } }); } function scaleByDistance() { // Sandcastle.declare(scaleByDistance); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard : { image : '../images/facility.gif', scaleByDistance : new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5) } }); } function fadeByDistance() { // Sandcastle.declare(fadeByDistance); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard : { image : '../images/Cesium_Logo_overlay.png', translucencyByDistance : new Cesium.NearFarScalar(1.5e2, 1, 1.5e7, 0) } }); } function offsetByDistance() { // Sandcastle.declare(offsetByDistance); Cesium.when.all([ Cesium.Resource.fetchImage('../images/Cesium_Logo_overlay.png'), Cesium.Resource.fetchImage('../images/facility.gif') ], function(images) { // 当查看者缩小到离设施广告牌更近的地方时, // 将cesium徽标广告牌上的像素偏移量增加到此高度。 let facilityHeight = images[1].height; // 搭配广告牌,随着观众的接近而分开 viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard : { image : images[1], horizontalOrigin : Cesium.HorizontalOrigin.CENTER, verticalOrigin : Cesium.VerticalOrigin.BOTTOM } }); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard : { image : images[0], horizontalOrigin : Cesium.HorizontalOrigin.CENTER, verticalOrigin : Cesium.VerticalOrigin.BOTTOM, pixelOffset : new Cesium.Cartesian2(0.0, -facilityHeight), pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.0), translucencyByDistance : new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.1) } }); }); } function addMarkerBillboards() { // Sandcastle.declare(addMarkerBillboards); // Add several billboards based on the above image in the atlas. viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard : { image : '../images/whiteShapes.png', // new Cesium.BoundingRectangle(x, y, width, height) imageSubRegion : new Cesium.BoundingRectangle(49, 43, 18, 18), color : Cesium.Color.LIME } }); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-84.0, 39.0), billboard : { image : '../images/whiteShapes.png', imageSubRegion : new Cesium.BoundingRectangle(61, 23, 18, 18), color : new Cesium.Color(0, 0.5, 1.0, 1.0) } }); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-70.0, 41.0), billboard : { image : '../images/whiteShapes.png', imageSubRegion : new Cesium.BoundingRectangle(67, 80, 14, 14), color : new Cesium.Color(0.5, 0.9, 1.0, 1.0) } }); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-73.0, 37.0), billboard : { image : '../images/whiteShapes.png', imageSubRegion : new Cesium.BoundingRectangle(27, 103, 22, 22), color : Cesium.Color.RED } }); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-79.0, 35.0), billboard : { image : '../images/whiteShapes.png', imageSubRegion : new Cesium.BoundingRectangle(105, 105, 18, 18), color : Cesium.Color.YELLOW } }); } let terrainProvider; function disableDepthTest() { // Sandcastle.declare(disableDepthTest); terrainProvider = viewer.terrainProvider; viewer.terrainProvider = Cesium.createWorldTerrain(); viewer.scene.globe.depthTestAgainstTerrain = true; viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915), billboard : { image : '../images/facility.gif', heightReference : Cesium.HeightReference.CLAMP_TO_GROUND, disableDepthTestDistance : Number.POSITIVE_INFINITY } }); viewer.zoomTo(viewer.entities); } Sandcastle.addToolbarMenu([ { text : 'Add billboard', onselect : function() { addBillboard(); Sandcastle.highlight(addBillboard); } }, { text : 'Set billboard properties at creation', onselect : function() { setBillboardProperties(); Sandcastle.highlight(setBillboardProperties); } }, { text : 'Change billboard properties', onselect : function() { changeBillboardProperties(); Sandcastle.highlight(changeBillboardProperties); } }, { text : 'Size billboard in meters', onselect : function() { sizeBillboardInMeters(); Sandcastle.highlight(sizeBillboardInMeters); } }, { text : 'Add multiple billboards', onselect : function() { addMultipleBillboards(); Sandcastle.highlight(addMultipleBillboards); } }, { text : 'Scale by viewer distance', onselect : function() { scaleByDistance(); Sandcastle.highlight(scaleByDistance); } }, { text : 'Fade by viewer distance', onselect : function() { fadeByDistance(); Sandcastle.highlight(fadeByDistance); } }, { text : 'Offset by viewer distance', onselect : function() { offsetByDistance(); Sandcastle.highlight(offsetByDistance); } }, { text : 'Add marker billboards', onselect : function() { addMarkerBillboards(); Sandcastle.highlight(addMarkerBillboards); } }, { text : 'Disable the depth test when clamped to ground', onselect : function() { disableDepthTest(); Sandcastle.highlight(disableDepthTest); } } ]); Sandcastle.reset = function () { viewer.camera.flyHome(0); viewer.entities.removeAll(); if (Cesium.defined(terrainProvider)) { viewer.terrainProvider = terrainProvider; terrainProvider = undefined; viewer.scene.globe.depthTestAgainstTerrain = false; } }; //Sandcastle_End Sandcastle.finishedLoading(); } if (typeof Cesium !== 'undefined') { startup(Cesium); } else if (typeof require === 'function') { require(['Cesium'], startup); } </script> </body> </html>
cesium 1.52 demo _ Billboards2.html
猜你喜欢
转载自blog.csdn.net/weixin_42193179/article/details/85785909
今日推荐
周排行