Один быстрый вопрос относительно ol-Cesium. Я пытаюсь интегрировать 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 версии 5.3.0.
Хорошо, я понял это. Мне нужно было только добавить тег скрипта в файл 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>
Надеюсь, это поможет кому-то :)
Ошибка указывает на то, что это ошибка веб-пакета.
Я ссылаюсь на документацию, найденную здесь: 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('')
})
],
