Интеграция с ионной картой цезия

При разработке ионного приложения я обновил свой src/main.html следующим образом:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <script src="assets/maps/Cesium/Cesium.js"></script>
  <style>
        @import url(Cesium/Widgets/widgets.css);
        #cesiumContainer {
            height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
    </style>
  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>


  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>
</body>
</html>

Я создал компонент карты и имею следующее:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ScanServiceProvider } from '../../providers/scan-service/scan-service';

declare var Cesium;

@Component({
  selector: 'page-map',
  templateUrl: 'maps.html',
})

export class MapsPage {

  constructor(public navCtrl: NavController,
              public scanServiceProvider: ScanServiceProvider) {
  }

  ionViewDidEnter() {
    // let extent = this.cesium.Rectangle.fromDegrees(117.940573,-29.808406,118.313421,-29.468825);
    // this.cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
    new Cesium.Viewer("cesiumContainer");
    // let center = this.cesium.Cartesian3.fromDegrees(-82.5, 35.3);
    // viewer.camera.lookAt(center, new this.cesium.Cartesian3(0.0, 0.0, 4200000.0));

  }

  ionViewCanEnter() {
    return this.scanServiceProvider.hasScannedProduct();
  }
}

При тестировании с веб-браузером:

ionic serve

Я вижу загруженную карту, однако, когда я работаю на IOS через: ionic cordova, запустите ios --livereload -c -s

Я получаю ошибку:

TypeError: undefined is not an object (evaluation 'this._dataSourceDisplay.update')
_onTick@http://10.20.30.255:8100/assets/maps/Cesium/Cesium.js:471:23030

Любая реализация или пример, который работает, приветствуется.

Примечание. Я пробовал https://cesium.com/blog/2016/05/18/an-introduction-to-cesium-android-apps-with-cordova/ и он работает, но мне нужно, чтобы он работал через Angular и TypeScript на ионном

Источник

0 ответов

Другие вопросы по тегам