☰

Ionic 4 - ESRI JavaScript API 4.11 - 如何访问创建后的地图和 MapView？

tag-icon • tag-icon javascript
Ionic 4 - ESRI JavaScript API 4.11 - 如何访问创建后的地图和 MapView？

我正在编写一个 Ionic 4 应用程序，它使用 ArcGIS API for JavaScript 显示地图。

我正在使用 esri-loader 并且显示了地图，但是遇到了一个问题：

我正在尝试将 MapView 放入变量中以便在其他函数中使用，但是当我单击“转到位置”按钮时出现此错误：

错误 TypeError：this.mapView.goTo 不是一个函数

tab2.页面.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Map Tab 2
    </ion-title>
    <ion-button (click)="goLocation()">go location</ion-button>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="map" #map ></div>
</ion-content>

tab2.page.ts

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Platform } from '@ionic/angular';
import { loadModules } from 'esri-loader';

@component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit {

@ViewChild('map') mapEl: ElementRef;
mapView: any;

constructor( public platform: Platform) {}

ngOnInit() {
this.mapView = this.getGeo();
}

async getGeo() {

  // Reference: https://ionicframework.com/docs/api/platform/Platform/#ready
  await this.platform.ready();

  // Load the ArcGIS API for JavaScript modules
  const [Map, MapView]: any = await loadModules([
      'esri/Map',
      'esri/views/MapView'
  ])
      .catch(err => {
          console.error('ArcGIS: ', err);
      });

  console.log('Starting up ArcGIS map');

  const map = new Map({
      basemap: 'streets-navigation-vector'
  });

  // Inflate and display the map
  const mapView = new MapView({
      // create the map view at the DOM element in this component
      container: this.mapEl.nativeElement,
      // center: [-56.1665054, -34.9180854],
      zoom: 15,
      map: map
  });

  await mapView.when(function() {
    console.log('cargado mapa 1***', mapView);
    // mapView.goTo([-56.1665054, -34.9180854]);
    return mapView;
  }, function(error) {
    // Use the errback function to handle when the view doesn't load properly
    console.log('The view resources failed to load: ', error);
  });
}

goLocation() {
console.log('go location');
this.mapView.goTo([-56.1665054, -34.9180854]);
}
}

问题：

1）esri-loader 是现在从 Ionic 访问 esri javascript API 的最佳选择吗？

2）如何在 getGeo 函数之外访问 Map 和 MapView？

谢谢

答案1

您的 mapView 是 HTML 中的元素引用。您可能想要做的是将 ESRI 地图视图存储在类变量中。我认为下面可以工作：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Platform } from '@ionic/angular';
import { loadModules } from 'esri-loader';

@component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit {

@ViewChild('map') mapEl: ElementRef;
mapView: any;

esriMapView: any; 

constructor( public platform: Platform) {}

ngOnInit() {
this.mapView = this.getGeo();
}

async getGeo() {

  // Reference: https://ionicframework.com/docs/api/platform/Platform/#ready
  await this.platform.ready();

  // Load the ArcGIS API for JavaScript modules
  const [Map, MapView]: any = await loadModules([
      'esri/Map',
      'esri/views/MapView'
  ])
      .catch(err => {
          console.error('ArcGIS: ', err);
      });

  console.log('Starting up ArcGIS map');

  const map = new Map({
      basemap: 'streets-navigation-vector'
  });

  // Inflate and display the map
  this.esriMapView = new MapView({
      // create the map view at the DOM element in this component
      container: this.mapEl.nativeElement,
      // center: [-56.1665054, -34.9180854],
      zoom: 15,
      map: map
  });

  await this.esriMapView.when(function() {
    console.log('cargado mapa 1***', mapView);
    // mapView.goTo([-56.1665054, -34.9180854]);
    return this.esriMapView;
  }, function(error) {
    // Use the errback function to handle when the view doesn't load properly
    console.log('The view resources failed to load: ', error);
  });
}

goLocation() {
console.log('go location');
this.esriMapView.goTo([-56.1665054, -34.9180854]);
}
}

我有一个角度应用程序，我在这里使用它作为基于 ESRI 的应用程序的启动器：https://github.com/Daimonos/jdhc-esri-starter/

我喜欢将地图保存在服务中，这样我就可以通过 DI 从应用程序的其他部分访问它。但我不确定它对 Ionic 的扩展性如何

相关内容