如何解决ArcGIS API for JavaScript 4.18.1 - Angular 11、Typescript、NPM
我正在查看 ArcGIS Javascript API 4.18.1。但令人困惑的是，我应该如何将其添加到新的 Angular 11 项目中。某处是否有示例项目显示基本文件夹结构并在 Angular 11 中获取地图设置？我想使用 NPM 仅通过 ES 模块进行设置。
https://developers.arcgis.com/javascript/latest/es-modules/
我是这样做的：
npm install @arcgis/core
import WebMap from '@arcgis/core/WebMap';
import MapView from '@arcgis/core/views/MapView';
我是新手。而且似乎所有文档都在谈论 React。
然后在开始使用 Map 时，您需要输入一个键：
<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>
但这些文档不适用于 Typescript。他们在某处有打字稿文档吗？您如何使用新的 API 4.18.1 和 Typescript 以及 NPM 和 Angular 11 添加密钥？
解决方法
这是我想出来的。
它基于使用 arcgis-js-api 库的 https://github.com/TheKeithStewart/angular-esri-components
https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli 包含在 Angular 应用程序中使用 @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.service.ts：
import { EventEmitter,Injectable } from '@angular/core';
import MapView from '@arcgis/core/views/MapView';
import WebMap from '@arcgis/core/WebMap';
import Widget from '@arcgis/core/widgets/Widget';
import Layer from '@arcgis/core/layers/Layer';
export type Position =
| 'bottom-leading'
| 'bottom-left'
| 'bottom-right'
| 'bottom-trailing'
| 'top-leading'
| 'top-left'
| 'top-right'
| 'top-trailing'
| 'manual';
@Injectable({
providedIn: 'root',})
export class EsriMapService {
map!: WebMap;
view!: MapView;
loaded = false;
isLoaded = new EventEmitter();
constructor() {}
loadWebMap(props: {
basemap: any;
container: any;
center: any;
zoom: any;
}): void {
this.map = new WebMap({ basemap: props.basemap });
this.view = new MapView({
container: props.container,map: this.map,center: props.center,zoom: props.zoom,});
this.loaded = true;
this.isLoaded.emit({
map: this.map,view: this.view,});
}
addLayer(layer: Layer,clearLayers?: boolean): void {
if (clearLayers) {
this.view.map.removeAll();
}
this.view.map.add(layer);
}
addWidget(
component: string | HTMLElement | Widget | any[],position?: Position,): void {
this.view.ui.add(component,position);
}
}
你可以像这样实例化组件：
<esri-map [mapProperties]="mapProperties" [mapViewProperties]="mapViewProperties" (mapInit)="onMapInit($event)">
</esri-map>
mapProperties 设置底图。
mapViewProperties 设置中心和缩放。
mapInit 让您知道地图何时加载。
该服务提供用于构建地图的地图视图。
然后您可以像往常一样将图层添加到地图视图中。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
