master

分支 (2)

管理

管理

master

gis2x

nginx-cesium
/
split_map.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./KC/kcgis.3x.min.js"></script>
    <script src="./js/GisComp.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/xm-select.js"></script>
    <link href="./KC/kcgis.3x.min.css" type="text/css" rel="stylesheet"/>
    <script src="./data/hn.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
    <style>
        .cesiumBox,
        .cesiumContainer,
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
        }
        .cesiumContainer{
        	background: url(../images/bj1.jpg) no-repeat;
        	background-size:100% 100%;
        }
        .cesium-viewer canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .screen-map-container {
        		height: 100%;
        		width: 100%;
        		display: grid;
        		grid-template-columns: 50% 50%;
        		justify-content: center;
        	}

        .scereen-map-content {
        	border: 1px solid #8d99ff;
        	height: 100%;
        	overflow: hidden;
        	display: grid;
        	grid-template-rows: repeat(2, 100%);
        	grid-template-columns: repeat(2, 100%);
        	position: relative;
        }
    </style>
    <script>
        let switchvalue=2;
        let layerValue =[];
        let currentView=null;
        let currentIndex=undefined;
        for (let i = 0; i < switchvalue; i++) {
          layerValue.push({
            viewerScreen: null,
            viewEvent: null,
            defvul: ''
          })
        }
       function handleMapChange() {
          if (!currentView) return
          const destination = window.Cesium.Cartographic.toCartesian(currentView.camera
            .positionCartographic)
          layerValue.forEach((item, index) => {
            if (index !== currentIndex) {
              item.viewerScreen.camera.setView({
                destination: new window.Cesium.Cartesian3(destination.x, destination.y,
                  destination.z),
                orientation: {
                  direction: currentView.scene.camera._direction,
                  up: currentView.scene.camera.up,
                  heading: currentView.scene.camera.heading,
                  pitch: currentView.scene.camera.pitch,
                  roll: currentView.scene.camera.roll
                }
              })
            }
          })
        }
        function handleMouseEnter(id){
            currentView = layerValue[id].viewerScreen
            currentIndex = id
        }
        window.onload = function () {
            window.KC =KCGIS;
            KC.ready({
            baseUrl: './KC/resources/'
            }).then(()=>{
            window.Cesium = KC.NS.Cesium
            const comp = new GisComp()
            const plug = new Plug(comp)
            const gis = new GisClass({
                Plug: plug,
                Cesium: window.Cesium // 来自public的资源静态 方便替换版本
            }, {
                event: function (e) {
                    console.log(e, 'Event triggered:')
                }
            }, this)
            window.gis = gis
                $.getJSON("./Config/config.json", function(data) {
                          for (let i = 0; i < switchvalue; i++) {
                          let id="cesiumContainer"+i;
                          $("#cesiumBox").append(`<div id="`+id+`" class="cesiumContainer scereen-map-content" onmouseenter="handleMouseEnter(`+i+`)"></div>`);
                          comp.initMap(id, data.mapConfig, (viewer) => {
                            viewer.scene.globe.baseColor = new window.Cesium.Color(0, 0, 0, 0); //设置地球透明
                            viewer.scene.globe.depthTestAgainstTerrain = false; //关闭深度检测
                            viewer.scene.screenSpaceCameraController.maximumZoomDistance = 2500000;
                            viewer.on(window.Cesium.ScreenSpaceEventType.LEFT_CLICK, ex => {
                              comp.closePopUp()
                            })

                            viewer.scene.skyBox.show = false
                            layerValue[i].viewerScreen = viewer
                            // camera监听函数
                            viewer.camera.changed.addEventListener(handleMapChange)
                            // 设置触发监听函数的时间
                            viewer.camera.percentageChanged = 0.01
                          })
                        }
                        window.Viewer =layerValue;
                        window.MapEvent.emit('loadMap',{
                                Cesium,
                                Comp: comp,
                                viewer: layerValue
                            })
                    })
                })
            }
    </script>
</head>

<body>
    <div id="cesiumBox" class="cesiumBox screen-map-container">
    </div>
</body>
</html>