Проблема с интеграцией цезия в OpenLayers 5 - цезий не определен - PullRequest
Новая
       41

Проблема с интеграцией цезия в OpenLayers 5 - цезий не определен

0 голосов
/ 11 июня 2019

Один быстрый вопрос относительно оль-цезия. Я пытаюсь интегрировать ol-Caesium в свое приложение Vue - Openlayers. Но я получаю этот тип ошибки:

«Ссылочная ошибка: цезий не определен»

enter image description here

По сути, я пытаюсь активировать 3D-функцию при нажатии, но я застрял с ошибкой выше.

Я буквально использовал код, приведенный в примерах 

import OLCesium from 'olcs/OLCesium.js';

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

Я использую OpenLayers v 5.3.0

Ответы [ 2 ]

1 голос
/ 17 июня 2019

Хорошо, я понял это. Мне нужно было только добавить тег script внутри файла index.html, который указывает на сборку Cesium

Пример ниже: 

<!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>

Надеюсь, это кому-нибудь поможет :)

0 голосов
/ 11 июня 2019

Ошибка указывает, что это ошибка веб-пакета.

Я ссылаюсь на документацию, найденную здесь: https://github.com/gberaudo/ol-cesium-webpack-example/blob/master/webpack.config.js

Убедитесь, что вы установили Cesium через NPM:

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'
},

Затем добавьте псевдоним Cesium в этот файл: 

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

Затем добавьте это к плагинам в этом файле: 

 plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        // Copy Cesium Assets, Widgets, and Workers to a static directory
        new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
        new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
        new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
        new webpack.DefinePlugin({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('')
        })
    ],
...