cesium地图导入html

cesium地图导入html,第1张

cesium初始化:

var viewer = new Cesium.Viewer('cesiumContainer')

其中的 cesiumContainer 就是你的div的id.

面朝屏幕的图片

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FBillboards.html&label=Development

//链式返回,new Cesium.BillboardCollection() 生成一个对象,这个对象是另一个scene.primitives.add的参数

//position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)

//position 空间直角坐标系,由经纬度坐标转换而来;这里的经纬度省略了Z的参数

// 可以增加一句 var height = Cesium.defaultValue(444444)

// position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883,height )

sizeInMeters : true, //图像的尺寸被指定成图像实际的尺寸,不随地图的缩放而变换大小

一次创建多个

//scaleByDistance 设置屏幕像素缩放比,150米的时候放大一倍,150000米的时候,缩放到0.5

//Cesium.NearFarScalar四个值,最近的距离,最远的距离,缩放比例范围

translucencyByDistance 改动透明度,地球缩放到很小时,透明度增大

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)//随着距离改变透明度

添加点的公告牌

增加marker的公告牌

在框架体系中增加广告牌,平移旋转缩放,全部围绕着billboards.modelMatrix

平移到某一点后,旋转X轴转到朝东,Y转到朝北,z轴转到正上方。

billboards.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)

特点:

始终面朝屏幕,即使旋转也面朝屏幕

注意创建的集群对象 Cesium.BillboardCollection

为什么不能创建单个Billboard?Entity来解决此问题

面朝屏幕的文字

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FLabels.html&label=Development

特点:

始终朝向屏幕

注意创建的是集群对象 Cesium.LabelCollection()

Label对象只能用在LabelCollection当中

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FPointPrimitives.html&label=Development

label标签主要是方便鼠标点击使用,增强用户 *** 作体验。

1、新建html文件,在网页中设置一个性别选项,这时当用户点击性别后面的小圆点才能选择性别,由于小圆点区域比较小,想准确点击比较麻烦,所有用户体验不好:

2、为两个选项分别设置“id”属性,男性属性值为“male”,女性属性值为“female”:

3、为“男”和“女”文字都添加上“label”标签,标签属性“for”的属性值分别为“male”和“female”,这时用户点击“男”和“女”文字时也会选中对应的选项,提高了用户体验。除了单选框之外,多选框、文本框等标签也同样可以用label标签选中:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11635495.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存