angular或者ionic调用arcgis js api

参考arcgis for js api的官方文章（https://developers.arcgis.com/javascript/latest/guide/angular/），实现webpack方式调用。

ionic针对ionic angular框架

如果遇到dojo问题，参考（https://developers.arcgis.com/javascript/latest/guide/using-npm/）

1、安装Node.js (includes npm, the node package manager)

2、安装git

3、安装Java 7 or greater - required by Closure Compiler

安装完成后，需要查看版本，确定安装成功

node --version

git --version

java -version

环境配置完成后，建立ionic或者angular项目，

接下来就是安装并配置arcgis for webpack-plugin了，具体步骤如下：

1、npm install --save @arcgis/webpack-plugin

2、npm install --save-dev @angular-builders/custom-webpack

3、设置angular.json文件（只更改或增加红色部分,其他部分可以不用更改,tsconfig.json文件可以不用改）

"build":

{ "builder": "@angular-builders/custom-webpack:browser",

"options": {

"customWebpackConfig":

{

"path": "./extra-webpack.config.js"

},

"outputPath": "dist/angular-builder-esri" }

}

...

"serve":

{

"builder": "@angular-builders/custom-webpack:dev-server",

"options": {

"browserTarget": "angular-builder-esri:build"

},

"configurations":

{

"production":

{

"browserTarget": "angular-builder-esri:build:production"

}

}

}

注意，官方文章中angular-builder-esri:build或angular-builder-esri:build:production中的angular-builder-esri为projectname，如下所示的projects：

{

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",

  "version": 1,

  "defaultProject": "angular-builder-esri",

  "newProjectRoot": "projects",

  "projects": {

    "angular-builder-esri": {

      "root": "",

4、创建webpack config file，路径和名称与angular.json中的customWebpackConfig项一致，本配置中创建extra-webpack.config.js文件，添加如下代码：

const ArcGISPlugin = require('@arcgis/webpack-plugin');

/**

 * Configuration items defined here will be appended to the end of the existing webpack config defined by the Angular CLI.

*/

module.exports = {

    plugins: [new ArcGISPlugin()],

    node: {

        process: false,

        global: false,

        fs: "empty"

    }

}

5、导入css文件

1）在scss文件中导入esri的css文件：

@import url('https://js.arcgis.com/4.13/esri/css/main.css');

#map{

    width: 100%;

    height: 100%;

}

2）或者在angular.json中添加style文件

 "styles": [

              {

                "input": "src/theme/variables.scss"

              },

              {

                "input": "src/global.scss"

              },

              {

                "input":"src/assets/esri_css/esri/css/main.css"

              }

            ],

我是网络上下载arcgis for js api，貌似只保留css文件和img，把其他不需要的删除，放到assets/esri_css路径下，如下图所示：

6、写代码，导入esri类，具体代码参考官网，以及官网的例子程序（https://github.com/Esri/angular-cli-esri-map），以下为我在ionic中写的代码：

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';

import Map from "arcgis-js-api/Map";

import MapView from "arcgis-js-api/views/MapView";

@Component({

  selector: 'app-tab2',

  templateUrl: 'tab2.page.html',

  styleUrls: ['tab2.page.scss']

})

export class Tab2Page implements OnInit, OnDestroy {

  @ViewChild("mapViewNode", { static: true }) private mapViewEl: ElementRef;

  view: any;

  async initializeMap() {

    try {

      // Configure the Map

      const mapProperties = {

        basemap: "streets"

      };

 

      const map = new Map(mapProperties);

 

      // Initialize the MapView

      const mapViewProperties = {

        container: this.mapViewEl.nativeElement,

        center: [0.1278, 51.5074],

        zoom: 10,

        map: map

      };

 

      this.view = new MapView(mapViewProperties);

      return this.view;

    } catch (error) {

      console.log("Esri: ", error);

    }

  }

 

  ngOnInit() {

    this.initializeMap();

  }

 

  ngOnDestroy() {

    if (this.view) {

      // destroy the map view

      this.view.container = null;

    }

  }

}

7、效果如下：

8、如果需要types，导入@types（参考https://developers.arcgis.com/javascript/latest/guide/typescript-setup/），即可使用：

npm install --save @types/arcgis-js-api

（NOTE: For Angular CLI applications, you will also need to add "arcgis-js-api" to compilerOptions.types in src/tsconfig.app.json and src/tsconfig.spec.json as shown here）

（1）src/tsconfig.app.json

 

{

"extends": "../tsconfig.json",

"compilerOptions": {

"outDir": "../out-tsc/app",

"module": "es2015",

"baseUrl": "",

"types": ["node",

"arcgis-js-api"]

},

"exclude": [

"test.ts",

"**/*.spec.ts"

]

}

 

(2)src/tsconfig.spec.json

 

{

"extends": "../tsconfig.json",

"compilerOptions": {

"outDir": "../out-tsc/spec",

"module": "commonjs",

"target": "es5",

"baseUrl": "",

"types": [

"jasmine",

"node",

"arcgis-js-api"

]

},

"files": [

"test.ts"

],

"include": [

"**/*.spec.ts",

"**/*.d.ts"

]

}
 

在使用时，

import esri = __esri; // Esri TypeScript Types

 const map: esri.Map = new Map(mapProperties);