LeafletのプラグインをTypescriptで作る時に参考になるサイト

■JavascriptバージョンとTypeScriptバージョンが載っているサイト
リンク

IONIC3、Leaflet、Bingmapsを使って地図を表示するまで

【前提】
node.js、Ionic3はインストール済み。

【手順】
１．プロジェクトを作成
以下のコマンドを実行してIonicプロジェクトを作成。
AndroidとかiOSのプラットフォームを追加するか聞かれるけど全てNo。

ionic start MyIonicProject tutorial

２．npmパッケージ追加
packages.jsonのdependenciesに以下を追記。

    "@types/leaflet": "1.2.3",
    "@asymmetrik/ngx-leaflet": "2.5.3",
    "leaflet": "1.2.0",
    "leaflet-bing-layer": "3.2.0"

３．LeafletのCSSをコピーしてlink
packages.jsonに以下を追記。

  "config": {
      "ionic_copy": "./config/copy.config.js"
  }

packages.jsonから「config/copy.config.js」の場所にファイルを作り、以下の内容を記述。

module.exports = {
    copyAnimateCss: {
        src: './node_modules/leaflet/dist/leaflet.css',
        dest: '{{BUILD}}'
    }
}

index.htmlのヘッダにcssへのリンクを追記。

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

４．hello Ionicページに地図を表示
src\pages\hello-ionicのファイルを修正し、地図を表示する。
■hello-ionic.html

<ion-content padding>
    <div id="map" style="width:100%; height:100%;"></div>
</ion-content>

■hello-ionic.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import NGX from '@asymmetrik/ngx-leaflet';
import L from 'leaflet';
import 'leaflet-bing-layer';

@Component({
    selector: 'page-hello-ionic',
    templateUrl: 'hello-ionic.html'
})

export class HelloIonicPage {
    map: any;

    constructor() {
    }
    
    ionViewDidEnter() {
        this.loadmap();
    }

    loadmap() {
        this.map = L.map("map").setView([35.658581, 139.745433], 16);
        L.tileLayer.bing('BingMasのキー', {
            maxZoom: 18
        }).addTo(this.map);
    }
}

ここまでやったら実行。

ionic serve

Kii Cloud SDKをTypescript（Angular2+）で使う手順

Kii Cloud SDKをTypescriptで使えるようにするための手順。
Angular2+でOnsenUIを使うまでが終わっている前提で進めます。
ライブラリのバージョンは以下の通り。

"kii-cloud-sdk": "^2.4.11",
"@types/kii-cloud-sdk": "^2.4.35",

１．Kii Cloud SDKを導入
以下のコマンドを実行。

npm install --save kii-cloud-sdk

２．TypeScriptの型定義を導入
以下のコマンドを実行。

npm install --save @types/kii-cloud-sdk

３．Webpackの定義を修正 VSCodeで型定義が読めているが、実行すると以下のエラーが発生。

ERROR in C:/kii-test/src/app/app.component.ts (19,7): Cannot find name 'Kii'.

WebpackがNodeのライブラリを見てるため発生するらしいので、Webpackの定義を変更して対応。
参考：Angular build cannot resolve '../package' and 'child_process'

ただし標準だとスケルトンとやらで隠れているので、以下のコマンドを実行してプロジェクト個別のファイルとして取り出す。

ng eject

参考：Angular/TypeScriptプロジェクトのコンパイルの仕組み

プロジェクトルートに"webpack.config.js"ができるので、以下の記述を追加。

externals: {
    'xhr2': 'XMLHttpRequest',
    'xmlhttprequest': 'XMLHttpRequest',
    'node-fetch': 'fetch',
    'text-encoding': 'TextEncoder',
    'urlutils': 'URL',
    'webcrypto': 'crypto'
}

４．Typescript型定義修正
Typescriptのコンパイルエラーになるので"node_modules/@types/kii-cloud-sdk/index.d.ts"を修正。
先頭に以下の行を追加する。

export = KiiCloud;
export as namespace KiiCloud;

５．kii-cloud-sdk.jsのソースを修正 "node_module/kii-cloud-sdk/KiiSDK.js"の最後の方のコードを修正。

// Following code was generated by build.sh for running on Node.js
(function() {
var b = ((typeof module) !== "undefined") && (module !== null);
if (b && module.exports) {
  /*
  module.exports = {
    exportedClasses: ['ForTest', 'Kii', 'KiiACL', 'KiiACLEntry', 'KiiACLWithToken', 'KiiAnalytics', 'KiiAnonymousUser', 'KiiAnyAuthenticatedUser', 'KiiAppAdminContext', 'KiiBucket', 'KiiBucketWithToken', 'KiiClause', 'KiiEncryptedBucket', 'KiiEncryptedBucketWithToken', 'KiiErrorParser', 'KiiGeoPoint', 'KiiGroup', 'KiiGroupWithToken', 'KiiObject', 'KiiObjectWithToken', 'KiiPushInstallation', 'KiiPushInstallationWithToken', 'KiiPushSubscription', 'KiiPushSubscriptionWithToken', 'KiiQuery', 'KiiSCNFacebook', 'KiiSCNGoogle', 'KiiSCNQQ', 'KiiSCNRenRen', 'KiiSCNTwitter', 'KiiSDKClientInfo', 'KiiServerCodeEntry', 'KiiServerCodeExecResult', 'KiiSocialConnect', 'KiiSocialConnectNetwork', 'KiiThing', 'KiiThingContext', 'KiiThingQuery', 'KiiThingQueryResult', 'KiiThingWithToken', 'KiiTopic', 'KiiPushMessageBuilder', 'KiiTopicWithToken', 'KiiUser', 'KiiUserBuilder', 'KiiUserWithToken', 'KiiSocialNetworkName', 'KiiSite', 'KiiServerCodeEnvironmentVersion', '_KiiHttpRequestType', 'KiiACLAction', 'KiiAnalyticsSite', 'InvalidDisplayNameException', 'InvalidPasswordException', 'InvalidUsernameException', 'InvalidUserIdentifierException', 'InvalidEmailException', 'InvalidPhoneNumberException', 'InvalidLocalPhoneNumberException', 'InvalidCountryException', 'InvalidURIException', 'InvalidACLAction', 'InvalidACLSubject', 'InvalidACLGrant', 'InvalidLimitException', 'InvalidArgumentException', 'IllegalStateException', 'ArithmeticException', 'UnsupportedOperationException'],
    create: function() {
      return ctor.call(this);
    }
  };*/
  XMLHttpRequest = this.XMLHttpRequest;
  module.exports = ctor.call(this);
} else {
  ctor();
}
})();

６．コードにKiiのソースを追加
以下のような感じで使えるようになる。

import { Component } from '@angular/core';
import * as KiiCloud from 'kii-cloud-sdk';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: string;
  id: string;
  password: string;
  result: string;

  constructor() {

    this.title = 'Kii Test';
      this.id = null;
      this.password = null;
      this.result = null;
      console.log(KiiCloud.KiiSite);
      console.log(KiiCloud.KiiSite.JP);
      this.result = KiiCloud.KiiSite.JP.toString();
  }