cesium把图片作为底图,可以采用下面两种方式:
(1)采用TIF格式的图片,这种格式的图片带有位置信息,可作为底图,并且可以自动地位到图片拍摄的位置,导入方式一般需要把图片上传到服务器或cesium官网的My Assets中,然后根据提示的代码即可引入。
const layer=viewer.imageryLayers.addImageryProvider( new Cesium.SingleTileImageryProvider({
url: "图片url",
}));
(2)使用普通图片(jpg、png等)创建一个矩形或多边形,把图片作为作为材质给矩形,但要自己调整角点位置对齐。
var cby_bg_data=[
119.252677,31.937594, 0,
119.252086,31.922213, 0,
119.284185,31.921710, 0,
119.284234,31.936937, 0,
];
var cby_bg= viewer.entities.add({
id:"fixed_bg",
name: "背景",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
perPositionHeight: true,
material: new Cesium.ImageMaterialProperty({
image:"../sglImgs/cby_bg.jpg"
}),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
outline: false,
//outlineColor: Cesium.Color.BLUE,
outlineWidth: 2, //很多电脑当宽度>1时,没用
}
});
这种方式调整位置比较麻烦,需要慢慢调,可通过输出点击的经纬度来尝试。
//==点击获取经纬度
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (event) {
var earthPosition = viewer.camera.pickEllipsoid(
event.position,
viewer.scene.globe.ellipsoid
);
var cartographic = Cesium.Cartographic.fromCartesian(
earthPosition,
viewer.scene.globe.ellipsoid,
new Cesium.Cartographic()
);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var height = cartographic.height;
console.log(lng.toFixed(6) + "\n" + lat.toFixed(6));
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
最后:
把图片作为材质贴图的方式有两种,可参看这个说明:材质使用