Cesium占坑

wyf1127

已于 2022-01-20 16:13:45 修改

阅读量509

点赞数

分类专栏：前端开发文章标签： typescript javascript 前端

于 2022-01-17 10:50:36 首次发布

本文链接：https://blog.csdn.net/wang_390486690/article/details/122534799

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、辅助调试

viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
viewer.extend(Cesium.viewerCesiumInspectorMixin);

2、抗锯齿

viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.scene.fxaa = true;

3、移除默认事件

viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

4、叠加WGS84经纬度投影影像

水经注下载WGS84影像，导出标准原始瓦片，修改级别（级别减1）

viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    maximumLevel: 17,
    format: "image/jpeg",
    tilingScheme: new Cesium.GeographicTilingScheme(),
    rectangle: new Cesium.Rectangle(Cesium.Math.toRadians(114.0),
        Cesium.Math.toRadians(31.0),
        Cesium.Math.toRadians(115.0),
        Cesium.Math.toRadians(32.0)),
    url: 'http://localhost:8080/image/{TileMatrix}/{TileCol}/{TileRow}.jpg',
}));

5、叠加球形墨卡托投影影像

水经注下载墨卡托影像，导出标准TMS瓦片

viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
    maximumLevel: 6,
    url: 'http://localhost:8080/image/{z}/{x}/{reverseY}.jpg',
}));

6、叠加天地图球形墨卡托投影和注记

viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            layer: "tdtLayer",
            style: "default",
            maximumLevel: 18,
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            subdomains:['0', '1', '2', '3', '4', '5', '6', '7'],
            url: "http://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        }));

viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            layer: "tdtLayer",
            style: "default",
            maximumLevel: 18,
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            subdomains:['0', '1', '2', '3', '4', '5', '6', '7'],
            url: "http://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        }));

7、修改默认视口范围

Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(73, 3, 135., 53);

8、开启环境光遮罩效果

let ambientOcclusion = viewer.scene.postProcessStages.ambientOcclusion;
ambientOcclusion.uniforms.ambientOcclusionOnly = false;
ambientOcclusion.uniforms.intensity = 3.0;
ambientOcclusion.uniforms.bias = 0.1;
ambientOcclusion.uniforms.lengthCap = 0.03;
ambientOcclusion.uniforms.stepSize = 1.0;
ambientOcclusion.uniforms.blurStepSize = 0.86;
ambientOcclusion.enabled = true;

9、响应Home按钮点击事件

viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(e) {
    viewer.camera.flyTo({
        destination: new Cesium.Cartesian3.fromDegrees(113, 34, 0),
        orientation:  {
            heading: 0,
            pitch: -89,
            roll: 0,
        },
        duration: 2
    });
    e.cancel = true;
});

10、阴影设置

viewer.scene.globe.enableLighting = true;
viewer.shadowMap.maximumDistance = 300.0;
viewer.shadowMap.softShadows = true;
viewer.shadowMap.size = 2048;
viewer.shadows = true;