Create 3D map in angular application using open layers and ol-cesium

Question

Create 3D map in angular application using open layers and ol-cesium

571 Views Asked by Beginner At 09 February 2023 at 18:03

I want to creating this project in angular but getting error when we import olcesium in .ts file after install npm ol-cesium.

<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/[email protected]/css/olcs.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

I want to creating this project in angular but getting error when we import olcesium in .ts file after install npm ol-cesium.

want to configure this project in angular application and also use this cdn link through npm. suggest me how we can make this because when we create then getting error.

Original Q&A

There are 1 best solutions below

**Bench Vue** · Answer 1 · 2023-02-10T20:29:04.190000

Someone did a good job in here

I just add second item in tileSources as same as your arcgisonline tile source.

  tileSources = [
    { name: 'None', source: null },
    { name: 'arcgison', source: new OsmSource({ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}' }) },
    { name: 'OSM', source: new OsmSource() },
    { name: 'Stamen', source: new StamenSource({ layer: 'toner' }) }
  ];

Result

Create 3D map in angular application using open layers and ol-cesium

There are 1 best solutions below

Related Questions in ANGULAR

Related Questions in OPENLAYERS

Related Questions in OPENLAYERS-3

Related Questions in CESIUMJS

Trending Questions

Popular # Hahtags

Popular Questions