cesium实现给三维建筑物贴图

最新推荐文章于 2024-08-13 10:17:44 发布

肆爪

最新推荐文章于 2024-08-13 10:17:44 发布

阅读量1w

点赞数 1

分类专栏： cesium

本文链接：https://blog.csdn.net/du_5pet/article/details/90765449

版权

本文介绍了一种在Cesium中通过将图片转换为三维模型，模拟建筑贴图效果的方法。由于Cesium.js本身不直接支持建筑模型贴图，作者通过设置图片的长宽高、经纬度和旋转角度，创建了一个假的贴图效果。然而，当建筑物数量庞大时，显示所有贴图会导致性能问题，目前作者正在寻求优化解决方案。

摘要由CSDN通过智能技术生成

代码太多直接贴上来看吧……就是cesium.js并没有直接给三维建筑模型贴图的方法，但是有把图片变成三维模型的方法，利用这个方法，给图片设置长宽高，定义经纬度和图片旋转角度，做出一个图片贴在模型上的假效果，其实这并不是贴图，而是一个图片图层，我这里是利用cesium的滚轮事件来触发贴图的，但是现在由于建筑物特别多，显示所有贴图会超级卡、电脑会崩溃。正在解决中……以下是代码，效果图以后帖

Cesium.Ion.defaultAccessToken = "官网申请的token"

var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        // url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=申请的key'
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    }),
    animation: false,
    timeline: false,  //时间线
    fullscreenButton: true,  //全屏模式
    infoBox: false,  //要素信息框
    homeButton: false, //显示主页
    geocoder: false, //搜索位置
    sceneModePicker: true,//模式切换
    selectionIndicator: true, //展示三维的指示器
    navigationHelpButton: false, //帮助按钮
    navigationInstructionsInitiallyVisible: false
});
viewer.extend(Cesium.viewerCesiumNavigationMixin, {});  //添加指南针控件
//经度、纬度、建筑物视角高度
var initialPosition = new Cesium.Cartesian3.fromDegrees(117.146985,39.1039, 500);
// var initialPosition = new Cesium.Cartesian3.fromDegrees(117.122208999746, 39.1504710002357, 20);

var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949050, 0.025883251314950971306);
var homeCameraView = {
    destination: initialPosition,
    orientation: {
        heading: initialOrientation.heading,//围绕负z轴的旋转
        pitch: initialOrientation.pitch,//围绕负y轴的旋转
        roll: initialOrientation.roll//围绕正x轴的旋转
    }
};
viewer.scene.camera.setView(homeCameraView);  //将相机设定在特定的位置和方向

var layer= new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=申请的key',
    layer:'img',
    style:'default',
    tileMatrixSetID:'w',
    format:'tiles',
    maximumLevel: 18

});
viewer.imageryLayers.addImageryProvider(layer);

var layer1 = new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://t0.tianditu.gov.cn/cia_w/wmts?tk=申请的key',
    layer: 'cia',
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    maximumLevel: 18
});
viewer.imageryLayers.addImageryProvider(layer1);



//根据建筑物数值加载不同颜色
function setColor(leq) {
    if (leq < 30) {
        return Cesium.Color.fromCssColorString('#267300');
    } else if (leq >= 30 && leq < 35) {
        return Cesium.Color.fromCssColorString('#5E8C00');
    }
    else if (leq >= 35 && leq < 40) {
        return Cesium.Color.fromCssColorString('#A8A800');
    } else if (leq >= 40 && leq < 45) {
        return Cesium.Color.fromCssColorString('#C48300');
    } else if (leq >= 45 && leq < 50) {
        return Cesium.Color.fromCssColorString('#E04B00');
    } else if (leq >= 50 && leq < 55) {
        return Cesium.Color.fromCssColorString('#FF0000');
    } else if (leq >= 55 && leq < 60) {
        return Cesium.Color.fromCssColorString('#D41923');
    } else if (leq >= 60 && leq < 65) {
        return Cesium.Color.fromCssColorString('#A82236');
    } else if (le