Question

关于ol-铯的一个简单问题。我正在尝试将ol-Cesium集成到我的Vue-Openlayers应用程序中。但是我遇到这种错误：

“ ReferenceError：未定义铯”

基本上我想尝试的是在点击时激活3d功能，但是我被上面的错误所困扰。

我确实使用了示例中提供的代码

import OLCesium from 'olcs/OLCesium.js';

const ol3d = new OLCesium({map:  this.$store.getters.olMap}); 
ol3d.setEnabled(true);

我正在使用OpenLayers v 5.3.0

Answer 1

好，我知道了。我只需要在指向Cesium构建的index.html文件中添加脚本标签

以下示例：

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="Vue-OpenLayers" content="Author: Agrivi d.o.o.; Wraping OpenLayers inside Vue.js">
  <link rel="icon" href="<%= BASE_URL %>agrivi.ico">
  <title>Agrivi Maps</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  <script src="https://cesiumjs.org/releases/1.53/Build/Cesium/Cesium.js" charset="UTF-8"></script>
</head>

<body>
  <noscript>
    <strong>We're sorry but web-app doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>

  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

希望它将对某人有所帮助：）

Answer 2

该错误表明这是一个Webpack错误。

我在这里引用的文档是：https://github.com/gberaudo/ol-cesium-webpack-example/blob/master/webpack.config.js

确保已通过NPM安装了Cesium：

<label id="theme-switch" class="theme-switch" for="checkbox_theme"> <input type="checkbox" id="checkbox_theme"> </label>

然后，在您的npm i --save-dev cesium olcs copy-webpack-plugin文件中，添加以下行：

webpack.config.js

然后在此文件的const cesiumSource = 'node_modules/cesium/Source'; const cesiumWorkers = '../Build/Cesium/Workers'; const CopywebpackPlugin = require('copy-webpack-plugin');对象中，添加以下行：

configuration

然后，将铯铯别名添加到该文件：

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),

    // Needed to compile multiline strings in Cesium
    sourcePrefix: ''
},
amd: {
    // Enable webpack-friendly use of require in Cesium
    toUrlUndefined: true
},
node: {
    // Resolve node module use of fs
    fs: 'empty'
},

然后，将其添加到此文件的插件中：

resolve: {
    alias: {
        // CesiumJS module name
        cesium: path.resolve(__dirname, cesiumSource)
    }
},

OpenLayers 5中Cesium集成的问题-未定义Cesium

2 个答案: