microwave-project-unite/src/lib/otgCesiumUtils.js

import configValue from "../config/config.js";
import { getProductValue } from "@/api/common";
class otgCesiumUtils {
    //初始化地图
    static initCesium(divMapId) {
        let Cesium = window.Cesium;
        this.Cesium = Cesium;
        let options = {
            selectionIndicator: false,
            homeButton: false, //主页按钮，默认true
            // scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
            animation: false, //动画控制，默认true
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: false, //地名查找,默认true
            timeline: false, //时间线,默认true
            navigationHelpButton: false, //导航帮助说明,默认true
            sceneModePicker: false, //是否显示投影方式控件
            infoBox: false, //点击要素之后显示的信息,默认true
            fullscreenButton: false, //全屏按钮,默认显示true
            navigationInstructionsInitiallyVisible: false,
            mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL,
            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url:
                    "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=d7648495378ad7ebe74327207dfc09a8",
                layer: "tdtBasicLayer",
                style: "default",
                maximumLevel: 18,
                format: "image/jpeg",
                tileMatrixSetID: "GoogleMapsCompatible",
                show: true,
                subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
            }),
            // html2canvas截图场景黑屏解决
            contextOptions: {
                webgl: {
                    alpha: true,
                    depth: true,
                    stencil: true,
                    antialias: true,
                    premultipliedAlpha: true,
                    //通过canvas.toDataURL()实现截图需要将该项设置为true
                    preserveDrawingBuffer: true,
                    failIfMajorPerformanceCaveat: true
                }
            }
        };
        let farViewer = new Cesium.Viewer(divMapId[0], options);
        let nearViewer = new Cesium.Viewer(divMapId[1], options);
        window.selfDefine.farViewer = farViewer;
        window.selfDefine.nearViewer = nearViewer;
        this.farViewer = farViewer;
        this.nearViewer = nearViewer;

        farViewer.scene.globe.depthTestAgainstTerrain = false;
        nearViewer.scene.globe.depthTestAgainstTerrain = false;
    }

    //添加wms
    static addlayer(geoWorkspace, layerName) {
        // let privide2 = new Cesium.WebMapServiceImageryProvider({
        //     url: "http://127.0.0.1:8087/geoserver/microwave/wms", //服务地址
        //     layers: geoWorkspace+':'+layerName, //服务图层，需要修改成你自己发布的名称
        //     parameters: {
        //       service: "WMS",
        //       format: "image/png",
        //       transparent: true
        //     }
        //   });
        // let layer2= new this.Cesium.ImageryLayer(privide2)
        // this.privide2=layer2
        let privide1 = this.creatTwoViewerLayer(geoWorkspace, layerName);
        let layer1 = new Cesium.ImageryLayer(privide1);
        let privide2 = this.creatTwoViewerLayer(geoWorkspace, layerName);
        let layer2 = new Cesium.ImageryLayer(privide2);
        this.nearViewer.imageryLayers.add(layer1);
        this.farViewer.imageryLayers.add(layer2);
    }
    //切换添加产品展示图层
    static addFarlayer(geoWorkspace, layerName) {
        let privide2 = this.creatTwoViewerLayer(geoWorkspace, layerName);
        let layer2 = new Cesium.ImageryLayer(privide2);
        this.farViewer.imageryLayers.add(layer2);
    }
    //切换添加局部放大图图层
    static addNearlayer(geoWorkspace, layerName) {
        let privide1 = this.creatTwoViewerLayer(geoWorkspace, layerName);
        let layer1 = new Cesium.ImageryLayer(privide1);
        this.nearViewer.imageryLayers.add(layer1);
    }

    static creatTwoViewerLayer(geoWorkspace, layerName) {
        let matrixIds = [
            "EPSG:4326:0",
            "EPSG:4326:1",
            "EPSG:4326:2",
            "EPSG:4326:3",
            "EPSG:4326:4",
            "EPSG:4326:5",
            "EPSG:4326:6",
            "EPSG:4326:7",
            "EPSG:4326:8",
            "EPSG:4326:9",
            "EPSG:4326:10",
            "EPSG:4326:11",
            "EPSG:4326:12",
            "EPSG:4326:13",
            "EPSG:4326:14",
            "EPSG:4326:15",
            "EPSG:4326:16",
            "EPSG:4326:17",
            "EPSG:4326:18",
            "EPSG:4326:19",
            "EPSG:4326:20",
            "EPSG:4326:21"
        ];
        return new Cesium.WebMapTileServiceImageryProvider({
            url: configValue.urlprefix.otgGeoServerUrl,
            // url: 'http://39.105.100.186:8087/geoserver/gwc/service/wmts',
            layer: geoWorkspace + ":" + layerName,
            style: "",
            format: "image/png",
            tileMatrixSetID: "EPSG:4326",
            tileMatrixLabels: matrixIds,
            tilingScheme: new Cesium.GeographicTilingScheme({
                numberOfLevelZeroTilesX: 2,
                numberOfLevelZeroTilesY: 1
            })
        });
    }
    // 定位到tif影像处
    static flyToLayer(cLon, cLat) {
        this.farViewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(cLon, cLat, 50000.0)
        });
        this.nearViewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(cLon, cLat, 30000.0)
        });
    }
    //删除wms
    static closelayer() {
        //wms服务
        this.farViewer.imageryLayers.remove(this.privide);
        this.nearViewer.imageryLayers.remove(this.privide);
    }
    static clearFarLayers() {
        for (var i = this.farViewer.imageryLayers.length - 1; i >= 0; --i) {
            if (!this.farViewer.imageryLayers.get(i).isBaseLayer()) {
                this.farViewer.imageryLayers.remove(this.farViewer.imageryLayers.get(i));
            }
        }
    }
    static clearNearLayers() {
        for (var i = this.nearViewer.imageryLayers.length - 1; i >= 0; --i) {
            if (!this.nearViewer.imageryLayers.get(i).isBaseLayer()) {
                this.nearViewer.imageryLayers.remove(this.nearViewer.imageryLayers.get(i));
            }
        }
    }
    static addPointToViewer(pLon, pLat, pAlt) {
        this.farViewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(pLon, pLat, pAlt),
            point: {
                pixelSize: 10,
                color: Cesium.Color.YELLOW
            }
        });
    }
    static addPointToFarViewer(pLon, pLat, pAlt) {
        var peOfFarViewer = this.farViewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(pLon, pLat, pAlt),
            point: {
                pixelSize: 10,
                color: Cesium.Color.YELLOW
            }
        });
        this.farViewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(pLon, pLat, 5000)
        });
    }
    static addPointToNearViewer(pLon, pLat, pAlt) {
        var peOfNearViewer = this.nearViewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(pLon, pLat, pAlt),
            point: {
                pixelSize: 10,
                color: Cesium.Color.YELLOW
            }
        });
        this.nearViewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(pLon, pLat, 1000)
        });
    }

    static removePoint() {
        this.farViewer.entities.removeAll();
        this.nearViewer.entities.removeAll();
    }
    static drawPoint(callback) {
        let self = this;
        //坐标存储
        // let positions,newPoi;
        this.handler = new Cesium.ScreenSpaceEventHandler(self.nearViewer.scene.canvas);
        let ellipsoid = self.nearViewer.scene.globe.ellipsoid;
        //单击鼠标左键画点
        this.handler.setInputAction(function (movement) {
            let cartesian = self.nearViewer.scene.camera.pickEllipsoid(
                movement.position,
                self.nearViewer.scene.globe.ellipsoid
            );
            let c = ellipsoid.cartesianToCartographic(cartesian);
            let spLon = Cesium.Math.toDegrees(c.longitude).toFixed(8);
            let spLat = Cesium.Math.toDegrees(c.latitude).toFixed(8);
            let spAlt = c.height.toFixed(2);
            const positions = [spLon, spLat, spAlt];
            self.nearViewer.entities.removeById("theSamePoint");
            const newPoi = self.nearViewer.entities.add({
                id: "theSamePoint",
                position: cartesian,
                point: {
                    color: Cesium.Color.RED,
                    pixelSize: 10
                    // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                }
            });
            callback(positions);
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
    static stopDrowPoi() {
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
    //Far viewer 鼠标点击
    static handleClickFar() {
        var scene = this.farViewer.scene;
        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
        const that = this;
        handler.setInputAction(function onLeftClick(movement) {
            //清除历史单击点
            handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
            var cartesian = that.farViewer.camera.pickEllipsoid(
                movement.position,
                scene.globe.ellipsoid
            );
            if (cartesian) {
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
                var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
            }
            //取回像元值
            let pValue = 0;
            that.farViewer.dataSources.removeAll();
            const dataSource = new Cesium.CustomDataSource("textPoint");
            const of = new FormData();
            of.append("dataPath", sessionStorage.getItem("tifPath"));
            of.append("lon", longitudeString);
            of.append("lat", latitudeString);
            getProductValue(of).then(res => {
                pValue = res;
                dataSource.entities.add({
                    position: new Cesium.Cartesian3.fromDegrees(
                        Number(longitudeString),
                        Number(latitudeString),
                        50
                    ),
                    label: {
                        text: "像素值:" + pValue,
                        font: "20px sans-serif",
                        showBackground: true,
                        eyeOffset: new Cesium.Cartesian3(0, 3.5, 0),
                        fillColor: Cesium.Color.BLACK, //字体颜色
                        backgroundColor: Cesium.Color.WHITE, //背景颜色
                        style: Cesium.LabelStyle.FILL, //label样式
                        outlineWidth: 2,
                        verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
                        pixelOffset: new Cesium.Cartesian2(0, -20) //偏移
                    }
                });
                that.farViewer.dataSources.add(dataSource);
            });
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
    //Near viewer 鼠标点击
    static handleClickNear() {
        var scene = this.nearViewer.scene;
        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
        const that = this;
        handler.setInputAction(function onLeftClick(movement) {
            //清除历史单击点
            handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
            var cartesian = that.nearViewer.camera.pickEllipsoid(
                movement.position,
                scene.globe.ellipsoid
            );
            if (cartesian) {
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
                var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
            }
            //取回像元值
            let pValue = 0;
            that.nearViewer.dataSources.removeAll();
            const dataSource = new Cesium.CustomDataSource("textPoint");
            const of = new FormData();
            of.append("dataPath", sessionStorage.getItem("tifPath"));
            of.append("lon", longitudeString);
            of.append("lat", latitudeString);
            getProductValue(of).then(res => {
                dataSource.entities.add({
                    position: new Cesium.Cartesian3.fromDegrees(
                        Number(longitudeString),
                        Number(latitudeString),
                        50
                    ),
                    label: {
                        text: "像素值:" + pValue,
                        font: "20px sans-serif",
                        showBackground: true,
                        eyeOffset: new Cesium.Cartesian3(0, 3.5, 0),
                        fillColor: Cesium.Color.BLACK, //字体颜色
                        backgroundColor: Cesium.Color.WHITE, //背景颜色
                        style: Cesium.LabelStyle.FILL, //label样式
                        outlineWidth: 2,
                        verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
                        pixelOffset: new Cesium.Cartesian2(0, -20) //偏移
                    }
                });
                that.nearViewer.dataSources.add(dataSource);
            });
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
}

export default otgCesiumUtils;