javascript 如何自动将open图层中的2d图层变化反映到ol-铯的3d图层中

km0tfn4u 于 2023-02-18 发布在 Java

关注(0)|答案(1)|浏览(114)

我使用的是const ol 3d = new OLCesium（{map：ol 2dMap}）; //ol 2dMap为olMap示例ol3d.setEnabled（true）;以再现3D视图，但是在此之后2D层中的任何改变不被反映到该3D视图。
谁能告诉我怎么才能做到

JavaScript

来源：https://stackoverflow.com/questions/75460977/how-to-automatically-reflect-changes-of-2d-layer-in-open-layer-into-3d-layer-of

1条答案

按热度按时间

hiz5n14c1#

<html>
<head> 
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.70/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.70/Build/CesiumUnminified/Cesium.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol-cesium@2.11.3/css/olcs.css">
    <script src="https://cdn.jsdelivr.net/npm/ol-cesium@2.11.3/dist/olcesium.min.js"></script>

    <style>
        html,
        body,
        #olCesMap {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        #btnSwitchMap {
            position: absolute;
            top: 10px;
            right: 50px;
            z-index: 2;
            padding: 4px;
        }
    </style>
</head>  
<body>
    <div id="olCesMap">
        <button id="btnSwitchMap" onclick="cesViewer.setEnabled(!cesViewer.getEnabled());">Switch 2D/3D</button>
    </div>
    <script defer>
        var controls = ol.control.defaults({
            rotate: true,
            rotateOptions: {
                tipLabel: "Reset rotation. \nUse Alt+Shift+Drag to rotate the map."
            }
        });
        var interactions = ol.interaction.defaults({ altShiftDragRotate: true, pinchRotate: true });

        // Declaring Zoom level to further view
        var zoom = 3;
        // Declaring Map center
        var center = ol.proj.fromLonLat([-96.41778916767144, 39.90201978025539]);
        
        var worldImagery = new ol.layer.Tile({
            source: new ol.source.XYZ({
            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
            maxZoom: 19
            })
        });
        worldImagery.set('name', 'tileLayer');

      
        //Map Creation
        var map = new ol.Map({
            controls: controls,
            //interactions: interactions,
            target: 'olCesMap',
            layers: [worldImagery, new ol.layer.Image({
                extent: [-13884991, 2870341, -7455066, 6338219],
            })],
            view: new ol.View({
                center: center,
                zoom: zoom
            })
        });
        //Cesium Viewer constructed based on Ol.Map
        var cesViewer = new olcs.OLCesium({
            map: map,
            sceneOptions: {
                mapProjection: new Cesium.WebMercatorProjection()
            }
        });
        //Cesium Viewer scene
        var scene = cesViewer.getCesiumScene();
        //Cesium Viewer enable
        cesViewer.setEnabled(false);

        //Cesium Viewer depthtest
        scene.globe.depthTestAgainstTerrain = true;
    </script>
    </body>
</html>

试试这个我希望这对你有帮助！

赞(0）回复(0）举报 2023-02-18

我来回答

javascript 如何自动将open图层中的2d图层变化反映到ol-铯的3d图层中

1条答案

相关问题

热门标签

最新问答