master

分支 (1)

管理

管理

master

smxweb
/
ExampleVideoProjectionTool(1).html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1,maximum-scale=1">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="x5-fullscreen" content="true">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link rel="stylesheet" href="./static/CimSDK/Workers/layui/css/layui.css" />
    <link rel="stylesheet" href="./static/CimSDK/CimSDK.min.css" />
    <title>Geoworld三维地球</title>
    <!-- <script src="http://localhost:8989/MapSDK/map.api.js"></script> -->
    <script src="./static/CimSDK/CimSDK.min.js"></script>
    <!-- <script type="text/javascript" src="./jquery-latest.js"></script> -->
    <script type="text/javascript" src="./static/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="./static/liveplayer-element.min.js"></script>

    <!-- <script type="text/javascript" src="./jquery.easyui.min.js"></script> -->
    <style>
        .sectionChars {
            top: auto;
            width: 90%;
            height: 200px;
            bottom: 10px;
            left: 5%;
            top: auto;
            bottom: 10px;
            display: none
        }
    </style>
</head>

<body>

    <div id="map3dContainer" class="fullWindow"></div>
    <div class="infoview">
        <span style="color:#cad1d1">视频投影</span>
        <br>

        <br>
        lon: <input type="text" id="textLongitude" value="70" />
        lat: <input type="text" id="textLatitude" value="70" />
        alt: <input type="text" id="textHeight" value="70" />
        <input type="button" class="btn btn-primary" value="获取坐标" onclick="getPosition_onclick()" />

        <input type="button" class="btn btn-primary" value="结束坐标" onclick="selectPosition_onclick()" /><br>
        heading: <input type="text" id="textHeading" value="85.0" /><input type="button" class="btn btn-primary"
            value="+1" onclick="addone('textHeading')" /><input type="button" class="btn btn-primary" value="-1"
            onclick="deleteone('textHeading')" /><input type="button" class="btn btn-primary" value="+0.1"
            onclick="addzoreone('textHeading')" /><input type="button" class="btn btn-primary" value="-0.1"
            onclick="deletzoreone('textHeading')" /><br>
        pitch: <input type="text" id="textPitch" value="-4.0" /><input type="button" class="btn btn-primary" value="+1"
            onclick="addone('textPitch')" /><input type="button" class="btn btn-primary" value="-1"
            onclick="deleteone('textPitch')" /><input type="button" class="btn btn-primary" value="+0.1"
            onclick="addzoreone('textPitch')" /><input type="button" class="btn btn-primary" value="-0.1"
            onclick="deletzoreone('textPitch')" /><br>
        roll: <input type="text" id="textRoll" value="2.0" /><br>
        fov: <input type="text" id="textFov" value="63" /><input type="button" class="btn btn-primary" value="+1"
            onclick="addone('textFov')" /><input type="button" class="btn btn-primary" value="-1"
            onclick="deleteone('textFov')" /><input type="button" class="btn btn-primary" value="+0.1"
            onclick="addzoreone('textFov')" /><input type="button" class="btn btn-primary" value="-0.1"
            onclick="deletzoreone('textFov')" /><br>
        far: <input type="text" id="textFar" value="63" /><input type="button" class="btn btn-primary" value="+1"
            onclick="addone('textFar')" /><input type="button" class="btn btn-primary" value="-1"
            onclick="deleteone('textFar')" /><input type="button" class="btn btn-primary" value="+0.1"
            onclick="addzoreone('textFar')" /><input type="button" class="btn btn-primary" value="-0.1"
            onclick="deletzoreone('textFar')" /><br>

        <input type="button" class="btn btn-primary" value="提交" onclick="changeParam_onclick()"><br>
        <input type="button" class="btn btn-primary" value="开始编辑姿态" onclick="startEditPose_onclick()">
        <input type="button" class="btn btn-primary" value="移除视频投影" onclick="removeVideo_onclick()">
        <input type="button" class="btn btn-primary" value="隱藏顯示視頻" onclick="hideVideo_onclick()">
        <input type="button" class="btn btn-primary" value="隱藏顯示模型" onclick="hideModel_onclick()">
        <input type="button" class="btn btn-primary" value="隐藏显示辅助模型" onclick="showHideVideoAuxMesh_onclick()">
        <input type="button" class="btn btn-primary" value="高亮辅助模型" onclick="highlightVideoAuxMesh_onclick()">
        <input type="button" class="btn btn-primary" value="获取相机参数" onclick="getCameraParameter_onclick()">

        <!--        <input type="button" class="btn btn-primary" value="记录视点" onclick="recordViewPoint_onclick()">-->
        <!--        <input type="button" class="btn btn-primary" value="播放动画" onclick="playTrack_onclick()">-->
        <!--        <input type="button" class="btn btn-primary" value="清空动画" onclick="clearTrack_onclick()">-->
        <br>

        <div id="videoPreview">
        </div>

    </div>
    <script>
        var theCamera = null;
        var earthCtrl = null;
        var mVPArray;
        var trackInfos = [];
        var model = null;
        var modelLayer = null;

        init();
        var video;
        function ArcgisImageryLayer() {
            const layer = earthCtrl.factory.createImageryLayer({
                sourceType: "arcgis",
                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
            });
        }
        function init() {
            window.earthCtrl = new SmartEarth.EarthCtrl("map3dContainer");
            // GeoworldLib.createInstance("map3dContainer", {
            //     sdkType: "release",
            //     configLink: "./sceneConfig.json",
            //     gisserver: "http://localhost:8989/"
            // }, function (e) {
            //加载ArcGIS在线服务

            // ArcgisImageryLayer()

            var url4 = "https://www.shmetrowg.com:8880/gisserver/c3dserver/puhuitangdt1011/tileset.json";
            window.tel4 = earthCtrl.factory.create3DTilesets({
                url: url4,
            });
            var url5 = "https://www.shmetrowg.com:8880/gisserver/c3dserver/puhuitang1011/tileset.json";
            window.tel5 = earthCtrl.factory.create3DTilesets({
                url: url5,
            });

            const layer = earthCtrl.factory.createImageryLayer({
                sourceType: "arcgis",
                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
            });


            // CreateTilesModelLayer()
            // LoadWMSImageryLayer_onclick()
            $.ajax({
                url: "./static/video_pingshan.json",
                cache: false,
                async: true,
                success: function (vpParams) {
                    function initVideoParam(vpArray) {
                        function createVideoProjection(vp, videoElementName) {
                            var videoElement = document.getElementById(vp.elementName);
                            vp.videoProjection = earthCtrl.factory.createVideoProjection({
                                // sourceType: vp.type, // 類型
                                sourceType: "perspective",
                                name: vp.name,
                                matchMaterials: vp.matchMaterials,
                                lon: vp.lon,
                                lat: vp.lat,
                                height: vp.height,
                                heading: vp.heading,
                                pitch: vp.pitch,
                                roll: vp.roll,
                                fov: vp.fov,
                                near: 1.0,
                                far: vp.far || 17,
                                aspect: vp.videoWidth / vp.videoHeight,
                                addToMap: true,
                                castTexture: video,
                                playVideo: vp.playVideo,
                                showMesh: vp.showMesh,
                                show: vp.show,
                                opacity: 1,
                                maxDiffAngle: vp.maxDiffAngle || 40,
                                // useDepth: vp.useDepth,
                                useDepth: true,
                                videoFrameInterval: vp.videoFrameInterval
                            });

                            videoElement.onplaying = function (e) {
                                videoElement.playing = true;
                            };
                            videoElement.timeupdate = function (e) {
                                videoElement.timeupdate = true;
                                // checkReady();
                            };
                            console.info(vp);
                        }
                        var parentDom = document.getElementById('videoPreview');
                        for (var i = 0; i < vpArray.length; i++) {
                            var vp = vpArray[i];
                            // var VideoUrl = "./static/video/东门智慧灯杆.mp4"
                            var VideoUrl = "http://58.247.18.186:28003/654261FE-02BD-0000-890B-C7BF6D2E2A90/stream1/hls.m3u8";
                            var VideoUrl = ""
                            if (!vp.enable) continue;
                            var display = vp.preview ? "block" : "none";
                            vp.elementName = "video" + i;

                            //hls
                            parentDom.innerHTML += ' <live-player id="' + vp.elementName + '" video-url="http://58.247.18.186:28003/6543DB22-0201-001B-B696-1F2F7DD31611/stream1/hls.m3u8"></live-player>';

                            //MP4
                            // parentDom.innerHTML += ' <video id="' + vp.elementName + '" loop muted controls style="display:' + display + '" width="' + vp.videoWidth + '" height="' + vp.videoWidth + '" src="' + VideoUrl + '" ></video>';
                            //hls
                            video = document.querySelector(`#${vp.elementName} video`);
                            //MP4
                            // video = document.getElementById(vp.elementName);
                            // PlayOrStop()
                            setTimeout(() => {
                                createVideoProjection(vp);
                            }, 5000);


                        }
                    }

                    console.info(vpParams);
                    mVPArray = vpParams;
                    initVideoParam(mVPArray)
                    setParameterToDom(mVPArray[mVPArray.length - 1]);


                    let pointsInterest = {
                        destination: SmartEarth.Cesium.Cartesian3.fromDegrees(121.4120, 31.1855, 150),
                        orientation: {
                            heading: SmartEarth.Cesium.Math.toRadians(-10),
                            pitch: SmartEarth.Cesium.Math.toRadians(-30),
                            roll: SmartEarth.Cesium.Math.toRadians(0.0)
                        }
                    };

                    earthCtrl.camera.flyToPointsInterest(pointsInterest);
                }
            });

            // GeoworldLib.utils.loadJsonPromise(false, true,
            //     "./Assets/video/send/track.json").then(function (trackData) {
            //     trackInfos = trackData;
            // });

        }

        function LoadUDETerrainLayer() {
            var layer = earthCtrl.factory.createTerrainLayer({
                sourceType: "ude",
                url: 'http://119.29.68.43/map_data/dem/dem_globe_v3/'
            });
        }

        function LoadB3DM_server() {
            var urls = [{
                url: "http://localhost:8989/gisserver/c3dserver/Swmx02/tileset.json",
            }, {
                url: "http://localhost:8989/gisserver/c3dserver/Swmx03/tileset.json",
            }, {
                url: "http://localhost:8989/gisserver/c3dserver/Swmx01/tileset.json",
            }
            ];
            var layer;
            for (var i = 0; i < urls.length; i++) {
                layer = earthCtrl.factory.createModelLayer({
                    sourceType: "b3dm",
                    // url: "http://36.7.136.132:1980/gisserver/c3dserver/zjkmx/tileset.json"
                    url: urls[i].url
                });
                var options = {
                    duration: 2,
                    offset: new Geoworld.HeadingPitchRange(2.0, -0.3, 200)
                };
                earthCtrl.userScene.flyTo(layer, options);
            }
        }
        function CreateTilesModelLayer() {
            var b3dmLayer = earthCtrl.factory.createModelLayer({
                sourceType: "b3dm",
                url: "http://mapservices.njghzy.com.cn:84/sky/SG/b3dms/taishan/tileset.json"
                // url: "http://localhost:8989/gisserver/c3dserver/Swmx03/tileset.json"
            });
            b3dmLayer._primitive.readyPromise.then(
                function (tileset) {
                    var height = -5;
                    var cartographic = earthCtrl._cesium.Cartographic.fromCartesian(b3dmLayer._primitive.boundingSphere.center);
                    var surface = earthCtrl._cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0);
                    console.info(earthCtrl._cesium.Math.toDegrees(cartographic.longitude) + ","
                        + earthCtrl._cesium.Math.toDegrees(cartographic.latitude) + "," + cartographic.height);
                    var offset = earthCtrl._cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
                    var translation = earthCtrl._cesium.Cartesian3.subtract(offset, surface, new earthCtrl._cesium.Cartesian3());
                    b3dmLayer._primitive.modelMatrix = earthCtrl._cesium.Matrix4.fromTranslation(translation);
                    //To23D(2)
                }
            );


            var options = {
                duration: 2,
                offset: new earthCtrl._cesium.HeadingPitchRange(2.0, -0.3, 200)
            };
            earthCtrl.userScene.flyTo(b3dmLayer, options);
        }
        //加载三维影像服务
        function LoadWMSImageryLayer_onclick() {
            var entity_yx = Global.publicResource.yx.value;
            var layer = webSdk.earthCtrl.factory.createImageryLayer({
                sourceType: "wms",
                url: "http://localhost:8989/gisserver/gisserver/wmsserver/zjksl?version=1.3.0&service=WMS&request=GetMap",
                layers: "",
                parameters: {
                    format: "image/png",
                    srs: "EPSG:4326",
                    version: 1.3
                },

            });
            layer.show = false;
            entity_yx.push(layer);
            callback && typeof callback == 'function' && callback(layer);

        }

        function selectPosition_onclick() {
            earthCtrl.tools.browse();
        }
        function addone(v) {
            $("#" + v).val((parseFloat($("#" + v).val()) + 1).toFixed(1));
            changeParam_onclick();

        }
        function deleteone(v) {
            $("#" + v).val((parseFloat($("#" + v).val()) - 1).toFixed(1));
            changeParam_onclick();
        }
        function addzoreone(v) {
            $("#" + v).val((parseFloat($("#" + v).val()) + 0.1).toFixed(1));
            changeParam_onclick();
            //$("#"+v).val($("#"+v).val()*1000/1000+0.1);
        }
        function deletzoreone(v) {
            $("#" + v).val((parseFloat($("#" + v).val()) - 0.1).toFixed(1));
            changeParam_onclick();
        }

        function getParameterFromDom(param) {
            param.lon = parseFloat(document.getElementById('textLongitude').value);
            param.lat = parseFloat(document.getElementById('textLatitude').value);
            param.height = parseFloat(document.getElementById('textHeight').value);
            param.heading = parseFloat(document.getElementById('textHeading').value);
            param.pitch = parseFloat(document.getElementById('textPitch').value);
            param.roll = parseFloat(document.getElementById('textRoll').value);
            param.fov = parseFloat(document.getElementById('textFov').value);
            param.far = parseFloat(document.getElementById('textFar').value);
        }

        function setParameterToDom(param) {
            document.getElementById('textLongitude').value = "" + param.lon;
            document.getElementById('textLatitude').value = "" + param.lat;
            document.getElementById('textHeight').value = "" + param.height;
            document.getElementById('textHeading').value = "" + param.heading;
            document.getElementById('textPitch').value = "" + param.pitch;
            document.getElementById('textRoll').value = "" + param.roll;
            document.getElementById('textFov').value = "" + param.fov;
            document.getElementById('textFar').value = "" + param.far;
        }

        function getPosition_onclick() {
            earthCtrl.measure.pickPosition(null, function (e) {
                if (e.retCode == "finished") {
                    earthCtrl.tools.browse();
                    return;
                }

                document.getElementById('textLongitude').value = "" + e.result.longitude;
                document.getElementById('textLatitude').value = "" + e.result.latitude;
                document.getElementById('textHeight').value = "" + e.result.height;

                changeParam_onclick();
            });
        }

        function getCameraParameter_onclick() {
            var cameraParamter = {};
            cameraParamter.position = earthCtrl.camera.position;
            cameraParamter.heading = earthCtrl.camera.heading;
            cameraParamter.pitch = earthCtrl.camera.pitch;
            cameraParamter.roll = earthCtrl.camera.roll;
            alert(JSON.stringify(cameraParamter));

        }

        function newCamera() {
            theCamera = {
                "name": "camera",
                "type": "perspective",
                "matchMaterials": [],
                "lon": 70,
                "lat": 70,
                "height": 10,
                "heading": 85,
                "pitch": -4,
                "roll": 0,
                "for": 63,
                "far": 63,
                "near": 1.0,
                "opacity": 1.0,
                "maxDiffAngle": 45,
                "videoWidth": 160,
                "videoHeight": 128,
                "videoFrameInterval": 50,
                "save": false
            };
        }

        function createCamera_onclick() {
            if (!theCamera.save) {
                var r = confirm("当前摄像头信息未保存，是否保存？");
                if (r === true) {

                } else {

                }
            }
        }

        function viewCamera_onclick() {
            earthCtrl.measure.pickPosition(null, function (e) {
                if (e.retCode == "finished") {
                    earthCtrl.tools.browse();
                    return;
                }
                var vp = mVPArray[mVPArray.length - 1];
                var car = e.result;
                car.longitude = Geoworld.Math.toRadians(car.longitude);
                car.latitude = Geoworld.Math.toRadians(car.latitude);
                var pos = Geoworld.Cartographic.toCartesian(car);
                var val = earthCtrl.measure.cameraVisibility(pos, vp.videoProjection.videoProjection._lightCamera, null);
                console.info(val);

            });
        }

        function setVPParam(vp) {
            if (vp) {
                vp.videoProjection.setParameter({
                    lon: vp.lon,
                    lat: vp.lat,
                    height: vp.height,
                    heading: vp.heading,
                    pitch: vp.pitch,
                    roll: vp.roll,
                    fov: vp.fov,
                    far: vp.far,
                });
            }
        }

        function changeParam_onclick() {
            console.info(mVPArray);
            var vp = mVPArray[mVPArray.length - 1];
            getParameterFromDom(vp);
            setVPParam(vp);
        }

        function removeVideo_onclick() {
            var vp = mVPArray[mVPArray.length - 1];
            vp.videoProjection.remove();
            mVPArray.pop();
        }

        function hideVideo_onclick() {
            var vp = mVPArray[mVPArray.length - 1];
            vp.videoProjection.show = !vp.videoProjection.show;
        }

        function showHideVideoAuxMesh_onclick() {
            var vp = mVPArray[mVPArray.length - 1];
            vp.videoProjection.showMesh = !vp.videoProjection.showMesh;
        }

        function hideModel_onclick() {
            if (model) {
                model.show = !model.show;
            }

            if (modelLayer) {
                modelLayer.show = !modelLayer.show;
            }
        }

        function highlightVideoAuxMesh_onclick() {
            var vp = mVPArray[mVPArray.length - 1];
            vp.videoProjection.highlightState = vp.videoProjection.highlightState == 0 ? 1 : 0;
        }

        function startEditPose_onclick() {

        }

        // 动画控制
        var track = null;

        function recordViewPoint_onclick() {
            var viewpoint = {
                type: "lookat",
                position: Geoworld.Cartesian3.clone(earthCtrl.coreMap.camera.position),
                orientation: {
                    heading: earthCtrl.coreMap.camera.heading,
                    pitch: earthCtrl.coreMap.camera.pitch,
                    roll: earthCtrl.coreMap.camera.roll
                },
                duration: 4000,
                stopTime: 10000
            }

            trackInfos.push(viewpoint);
        }

        function playTrack_onclick() {
            if (track !== null) {
                track.stop();
                track = null;
            }
            track = earthCtrl.factory.createTrack(trackInfos);
            track.play();
        }

        function clearTrack_onclick() {
            trackInfos = [];
            if (track !== null) {
                track.stop();
                track = null;
            }
        }

        function cameraSaveState(save) {
            return theCamera.save = save;
        }
    </script>
</body>

</html>