ERRO:Uncaught SyntaxError: Cannot use import statement outside a module (at GeoserverTerrainProvider.js:4:1) #63

0000005 · 2024-11-20T03:17:59Z

I used the latest code to develop a terrain map, but I got an error when loading the page. How to fix it？ please help me. thanks

source code to reproduce the error

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

<head>
    <meta charset="UTF-8">
    <title>Cesium terrain</title>
    <!-- 引入 Cesium 的 CSS 文件 -->
    <link rel="stylesheet" href="Cesium-1.95/Build/Cesium/Widgets/widgets.css">
    <style>
        /* 设置页面和 Cesium 容器的样式 */
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
    <!-- 引入 CesiumJS -->
    <script src="Cesium-1.95/Build/Cesium/Cesium.js"  type="text/javascript"></script>
    <!-- 引入 geotiff.js 从本地 -->
    <script src="Cesium-GeoserverTerrainProvider-master/dist/GeoserverTerrainProvider.js"  type="text/javascript"></script>

</head>

<body>
    <!-- Cesium 容器 -->
    <div id="cesiumContainer"></div>

    <script>
        // 设置 Cesium 的基础路径
        window.CESIUM_BASE_URL = 'Cesium-1.95/Build/Cesium';

        // 异步初始化 Cesium Viewer
        async function initViewer() {
            try {
                // 创建自定义地形提供者
                const customTerrainProvider = await Cesium.GeoserverTerrainProvider({
                    "url": "http://localhost:8060/geoserver",
                    "layerName": "dem:ASTGTMV003_N31E103_dem"
                });

                // 创建自定义影像提供者，例如 OpenStreetMap
                const customImageryProvider = new Cesium.UrlTemplateImageryProvider({
                    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    subdomains: ['a', 'b', 'c']
                });

                // 初始化 Cesium Viewer
                const viewer = new Cesium.Viewer('cesiumContainer', {
                    infoBox: false,
                    terrainProvider: customTerrainProvider, // 使用自定义地形
                    imageryProvider: customImageryProvider, // 使用自定义影像
                    baseLayerPicker: false, // 禁用地形和影像选择器
                    timeline: false,        // 禁用时间轴
                    animation: false        // 禁用动画控件
                });

                // 飞行到指定位置
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(103.8512, 30.8873, 5000) // 例如：longitude, latitude, height
                });
            } catch (error) {
                console.error('初始化 Cesium Viewer 失败:', error);
            }
        }

        // 调用初始化函数
        initViewer();
    </script>
</body>

</html>

kaktus40 · 2024-11-20T08:42:00Z

Hello, you need to use GeoserverTerrainProvider.iife.js instead of GeoserverTerrainProvider.js.
So your code should be <script src="Cesium-GeoserverTerrainProvider-master/dist/GeoserverTerrainProvider.iife.js" type="text/javascript"></script>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ERRO:Uncaught SyntaxError: Cannot use import statement outside a module (at GeoserverTerrainProvider.js:4:1) #63

ERRO:Uncaught SyntaxError: Cannot use import statement outside a module (at GeoserverTerrainProvider.js:4:1) #63

0000005 commented Nov 20, 2024

kaktus40 commented Nov 20, 2024

ERRO:Uncaught SyntaxError: Cannot use import statement outside a module (at GeoserverTerrainProvider.js:4:1) #63

ERRO:Uncaught SyntaxError: Cannot use import statement outside a module (at GeoserverTerrainProvider.js:4:1) #63

Comments

0000005 commented Nov 20, 2024

kaktus40 commented Nov 20, 2024