open layer中2d层的变化如何自动反映到ol-cesium的3d层中答案

【问题标题】：How to automatically reflect changes of 2d layer in open layer into 3d layer of ol-cesiumopen layer中2d层的变化如何自动反映到ol-cesium的3d层中
【发布时间】：2023-02-16 17:57:51
【问题描述】：

我在用 const ol3d = new OLCesium({map: ol2dMap}); // ol2dMap 是 ol.Map 实例 ol3d.setEnabled(真); 渲染 3d 视图，但之后 2d 图层中的任何更改都不会反映到此 3d 视图中。

有人能告诉我如何实现吗

【问题讨论】：

2D 图层中的这些变化是什么？
我添加了一个 geo json 层，但它不会在 ol-cesium 的 3d 模型中更新，但是当我切换到 2d 视图时它存在。 geoJson 层通过矢量图层呈现。如果您有工作，请帮忙。如果我在 2d 上渲染矢量然后切换到 3d 那么它就存在

标签： javascript reactjs gis openlayers arcgis

【解决方案1】：

<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. 
Use 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>

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

【讨论】：