An error occurred in "IonImageryProvider": Failed to obtain image tile X: 0 Y: 1 Level: 1

CesiumJS
1

image
image3832×1398 281 KB 

import "cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "cesium";

const viewer = new Cesium.Viewer("cesiumContainer");

vue.config.js

publicPath: './',
    assetsDir: './static',
    productionSourceMap: false,
    lintOnSave: true, // 是否开启eslint
    devServer: {
        open: true
    },
    pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html',
        },
    },
    css: {
        // extract: true, // 是否使用css分离插件 ExtractTextPlugin(跟热加载冲突)
        sourceMap: true, // 开启 CSS source maps
        loaderOptions: {
            less: {
                modifyVars: {
                    'primary-color': '#4C6CEC',
                    'link-color': '#4C6CEC',
                    'border-radius-base': '2px',
                },
                javascriptEnabled: true,
            }
        }, // css预设器配置项
        requireModuleExtension: true // 启用 CSS modules for all css / pre-processor files.
    },
    configureWebpack: (config) => {
        let plugins = [];
        plugins = [
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify('/')
            }),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'Workers' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }])
        ];
        return {
            module: {
                unknownContextCritical: false,
                rules: [
                    {
                        test: /\.js$/,
                        enforce: 'pre',
                        include: path.resolve(__dirname, 'node_modules/cesium/Source'),
                        sideEffects: false,
                        use: [
                            {
                                loader: 'strip-pragma-loader',
                                options: {
                                    pragmas: {
                                        debug: false
                                    }
                                }
                            }
                        ]
                    }
                ]
            },
            optimization: {
                usedExports: true,
                splitChunks: {
                    maxInitialRequests: Infinity,
                    // minSize: 0, // 白屏问题
                    // maxSize: 250000, // 白屏问题
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            priority: -10,
                            chunks: 'all',
                            // name(module) {
                            //     const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                            //     return `npm.${packageName.replace('@', '')}`
                            // }
                        },
                        commons: {
                            name: 'Cesium',
                            test: /[\\/]node_modules[\\/]cesium/,
                            priority: 10,
                            chunks: 'all'
                        }
                    }
                }
            },
            output: {
                sourcePrefix: ' '
            },
            amd: {
                toUrlUndefined: true
            },
            resolve: {
                extensions: ['.js', '.vue', '.json'],
                alias: {
                    '@': path.resolve(__dirname, './examples'),
                    '@c': path.resolve(__dirname, './examples/components'),
                    '@v': path.resolve(__dirname, './examples/views'),
                    '@a': path.resolve(__dirname, './examples/assets'),
                    '@p': path.resolve(__dirname, './packages')
                }
            },
            node: {
                fs: 'empty',
                Buffer: false,
                http: 'empty',
                https: 'empty',
                zlib: 'empty'
            },
            plugins: plugins,
        }
    },
    chainWebpack: config => {
        config.module
            .rule('js')
            .include
            .add('/packages')
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                return options
            });
    },
2

Did you solve it? I also encountered the same problem

3

const esri = new Cesium.ArcGisMapServerImageryProvider({
url: ‘World_Imagery (MapServer)’,
});
const viewer = new Cesium.Viewer(‘scene_container’, {
imageryProvider: esri,
});