Fatal编程技术网
  • javascript/
  • ArcGIS API for JavaScript 4.18.1-Angular 11，Typescript，NPM

ArcGIS API for JavaScript 4.18.1-Angular 11，Typescript，NPM

javascript angular typescript npm

ArcGIS API for JavaScript 4.18.1-Angular 11，Typescript，NPM,javascript,angular,typescript,npm,arcgis,Javascript,Angular,Typescript,Npm,Arcgis,我正在学习ArcGIS Javascript API 4.18.1。但它是混乱的，我应该如何添加到一个新的Angular 11项目。在Angular 11中是否有显示基本文件夹结构和获取地图设置的示例项目？我想通过使用NPM的ES模块进行设置 我这样做： npm install @arcgis/core 然后我将以下内容添加到app.component.ts import WebMap from '@arcgis/core/WebMap'; import MapView from '@arc

我正在学习ArcGIS Javascript API 4.18.1。但它是混乱的，我应该如何添加到一个新的Angular 11项目。在Angular 11中是否有显示基本文件夹结构和获取地图设置的示例项目？我想通过使用NPM的ES模块进行设置

我这样做：

npm install @arcgis/core
然后我将以下内容添加到app.component.ts

import WebMap from '@arcgis/core/WebMap';
import MapView from '@arcgis/core/views/MapView';
我是新来的。似乎所有的文档都在谈论React

然后在入门地图中输入一个键：

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Display a map</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
      require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {

        esriConfig.apiKey = "YOUR-API-KEY";

        const map = new Map({
          basemap: "arcgis-topographic" // Basemap layer service
        });

      });
    </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>


ArcGIS API for JavaScript教程：显示地图
html，
身体，
#视窗{
填充：0；
保证金：0；
身高：100%；
宽度：100%；
}
需要（[“esri/config”、“esri/Map”、“esri/views/MapView”]、函数（esriConfig、Map、MapView）{
esriConfig.apiKey=“YOUR-API-KEY”；
常量映射=新映射({
基础地图：“arcgis地形”//basemap图层服务
});
});
但这些文档不适用于Typescript。他们在什么地方有typescript文档吗？如何使用新的API 4.18.1、Typescript、NPM和Angular 11添加密钥？

这就是我想到的

它基于使用arcgis js api库的

具有在角度应用程序中使用@arcgis/core的基本设置说明

esri-map.component.scss：

#mapViewNode {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
esri-map.component.ts：

import {
  Component,
  ElementRef,
  Input,
  OnInit,
  NgZone,
  OnDestroy,
  ViewChild,
  Output,
  EventEmitter,
} from '@angular/core';
import config from '@arcgis/core/config';
import { EsriMapService } from './esri-map.service';

@Component({
  // tslint:disable-next-line: component-selector
  selector: 'esri-map',
  template: '<div #mapViewNode></div>',
  styleUrls: ['./esri-map.component.scss'],
})
  export class EsriMapComponent implements OnInit, OnDestroy {
    @ViewChild('mapViewNode', { static: true }) private elementRef!: ElementRef;
    @Input() mapProperties!: any;
    @Input() mapViewProperties!: any;
    @Output() mapInit: EventEmitter<any> = new EventEmitter();

    private mapView: any;

  constructor(private zone: NgZone, private mapService: EsriMapService) {}

  ngOnInit(): void {
    config.assetsPath = 'assets/';
    this.zone.runOutsideAngular(() => {
      this.loadMap();
    });
  }

  ngOnDestroy(): void {
    this.mapView.destroy();
  }

  loadMap(): void {
    this.mapService.isLoaded.subscribe((n: any) => {
      this.mapView = n.view;
      this.zone.run(() => {
        this.mapInit.emit({ map: n.map, view: n.view });
        this.mapInit.complete();
      });
    });
    this.mapService.loadWebMap({
      ...this.mapProperties,
      ...this.mapViewProperties,
      container: this.elementRef.nativeElement,
    });


  }
您只需按如下方式实例化组件：

<esri-map [mapProperties]="mapProperties" [mapViewProperties]="mapViewProperties" (mapInit)="onMapInit($event)">
</esri-map>
mapProperties设置底图

mapViewProperties设置中心和缩放

mapInit让您知道何时加载地图

该服务提供用于构建地图的地图视图

然后，您可以像往常一样将图层添加到地图视图。

您不需要在这一行中配置密钥吗？esriConfig.apiKey=“YOUR-API-KEY”；或者问题到底是什么？是的，但在打字脚本中，你是在哪里做的？新文档没有显示示例。我认为Esri一直在开发的新API和类型脚本会有所不同。我就是不知道怎么做。所以我的问题是，如何使用Typescript中的键来完成上面的示例。但是您现在正在使用HTML+一些JavaScript。除此之外，您可能需要创建一个要使用的typescript文件。也许typescript文档会有所帮助。BluE您是否有指向示例的链接或其他内容，如上面的示例。那会做同样的事情，但在打字脚本中？我找不到一个简单的例子。你有什么错误需要解决吗？使用ES模块，您还需要将库复制到
assets
目录。我相信Angular CLI必须这样做。您在哪里添加API-KEY？这是我感到困惑的另一部分。你还增加了一项服务！非常感谢。回答得好！非常简单。esriConfig.apiKey=“YOUR-API-KEY”；config.assetsPath='assets/'；我可以把它加进去吗？config.apiKey。好的，我来玩玩。我是这里的noob.config.assetsPath是您复制esri资产的文件夹。有关于如何进行api基本设置的说明 
<esri-map [mapProperties]="mapProperties" [mapViewProperties]="mapViewProperties" (mapInit)="onMapInit($event)">
</esri-map>