Skip to content

imageryLayer 图层

叠加图层

js
export const initImageryLayer = () => {
    var token = TDT;
    // 服务域名
    var tdtUrl = "https://t{s}.tianditu.gov.cn/";
    var subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];

    // 抗锯齿
    viewer.scene.fxaa = true;
    viewer.scene.postProcessStages.fxaa.enabled = false;
    // 水雾特效
    viewer.scene.globe.showGroundAtmosphere = true;
    // 设置最大俯仰角,[-90,0]区间内,默认为-30,单位弧度
    viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
    viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;
    viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;
    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
    viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000;
    viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.RIGHT_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH];
    viewer.scene.screenSpaceCameraController.tiltEventTypes = [
        Cesium.CameraEventType.MIDDLE_DRAG,
        Cesium.CameraEventType.PINCH,
        {
            eventType: Cesium.CameraEventType.LEFT_DRAG,
            modifier: Cesium.KeyboardEventModifier.CTRL,
        },
        {
            eventType: Cesium.CameraEventType.RIGHT_DRAG,
            modifier: Cesium.KeyboardEventModifier.CTRL,
        },
    ];

    // 取消默认的双击事件
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

    // 叠加影像服务
    var imgMap = new Cesium.UrlTemplateImageryProvider({
        url: tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
        subdomains: subdomains,
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 18,
    });

    // 叠加国界服务
    var iboMap = new Cesium.UrlTemplateImageryProvider({
        url: tdtUrl + "DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=" + token,
        subdomains: subdomains,
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 10,
    });

    //天地图矢量
    let TDT_SL = new Cesium.WebMapTileServiceImageryProvider({
        url: `http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${TDT}`,
        layer: "vec",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "w",
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        credit: new Cesium.Credit("天地图矢量"),
        maximumLevel: 18,
    });
    const ARCGIS = new Cesium.WebMapTileServiceImageryProvider({
        url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS",
        layer: "World_Imagery",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        maximumLevel: 19,
        credit: new Cesium.Credit("ARCGIS"),
    });
    // 加载影像注记
    let TDT_ZJ = new Cesium.WebMapTileServiceImageryProvider({
        url: `http://t0.tianditu.gov.cn/cia_w/wmts?tk=${TDT}`,
        layer: "cia",
        style: "default",
        tileMatrixSetID: "w",
        format: "tiles",
        credit: new Cesium.Credit("天地注记"),
        maximumLevel: 18,
    });
    // viewer.imageryLayers.addImageryProvider(imgMap);
    viewer.imageryLayers.addImageryProvider(iboMap);

    viewer.imageryLayers.addImageryProvider(TDT_SL);
    viewer.imageryLayers.addImageryProvider(ARCGIS);
    viewer.imageryLayers.addImageryProvider(TDT_ZJ);
};

更改图层

js
export const changeImageryLayer = (val) => { 
    switch (val) {
        case "TDT_SL":
            viewer.imageryLayers.get(1).show = true;
            viewer.imageryLayers.get(2).show = false;
            viewer.imageryLayers.get(3).show = false;
            break;
        case "ARCGIS":
            viewer.imageryLayers.get(1).show = false;
            viewer.imageryLayers.get(2).show = true;
            viewer.imageryLayers.get(3).show = false;
            break;
        case "TDT_ZJ":
            viewer.imageryLayers.get(1).show = false;
            viewer.imageryLayers.get(2).show = false;
            viewer.imageryLayers.get(3).show = true;
            break;
        default:
            break;
    }
};