时间戳

首页 > 解决方案 > OpenLayers 5 中的 Cesium 集成问题 - 未定义 Cesium

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

问题描述

关于 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 v 5.3.0

标签： vue.jsopenlayerscesiumopenlayers-5

解决方案

好的，我已经想通了。我只需要在指向 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>

希望它会帮助某人:)

推荐阅读