Kepler.gl 可以和 Angular.js 一起使用吗？

Question

我打算在我的 Angular.js 项目中使用 Kepler.gl。但是，我无法找到任何支持文档、教程或任何其他 material 来使用 Kepler.gl 和 Angular.js。

Kepler.gl可以和Angular.js一起使用吗？

如果是，能否分享一些此类教程的链接？

Answer 1

如何将 kepler.gl 与 angular

整合

我的开发环境

• 节点 (v14.18.2)
• npm (6.14.15)
• Angular CLI (10.1.7)
• OS（达尔文 x64）

需要的库

• 反应 (17.0.2)
• 反应-dom (17.0.2)
• react-redux (3.3.7)
• kepler.gl (2.5.5)
• 不变 (2.2.4)
• uuid
• 样式组件

npm install --save react react-dom react-redux kepler.gl invariant uuid styled-components

访问https://docs.mapbox.com/help/getting-started/access-tokens/生成MapBox访问令牌

代码片段

keplerGl.component.js

import {
 Component,
 OnInit,
 OnDestroy,
 OnChanges,
 AfterViewInit,
 HostListener,
} from '@angular/core';

//react-kepler
import { Provider } from 'react-redux';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as uuid from 'uuid';
import * as invariant from 'invariant';
import { KeplerGl } from 'kepler.gl';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { taskMiddleware } from 'react-palm/tasks';
import keplerGlReducer from 'kepler.gl/reducers';

interface keplerProps {
 width: number;
 height: number;
 mapboxApiAccessToken: any;
 id: string;
}

@Component({
 selector: 'kepler-gl',
 template: `<span [id]="rootDomID"></span>`,
 styleUrls: ['./kepler-gl.component.scss'],
})
export class KeplerGlComponent
 implements OnInit, OnDestroy, OnChanges, AfterViewInit {
 width: number;
 height: number;
 mapboxApiAccessToken: any = 'replaceYourAccessTokenHere'; 
 id: string = 'keplerGl';
 rootDomID: string;
 store;

 // rerendering the map on window resize events
 @HostListener('window:resize', ['$event'])
 sizeChange(event) {
   this.render();
 }

 constructor() {}

 ngOnInit(): void {
   let reducer = combineReducers({
     keplerGl: keplerGlReducer,
   });
   this.store = createStore(reducer, {}, applyMiddleware(taskMiddleware));
   this.rootDomID = uuid.v1();
 }

 ngOnChanges() {
   this.render();
 }

 ngAfterViewInit() {
   this.render();
 }

 ngOnDestroy() {
   // Uncomment if Angular 4 issue that ngOnDestroy is called AFTER DOM node removal is resolved
   ReactDOM.unmountComponentAtNode(this.getRootDomNode());
 }

 protected getRootDomNode() {
   const node = document.getElementById(this.rootDomID);
   //@ts-ignore
   invariant(node, `Node '${this.rootDomID} not found!`);
   return node;
 }

 protected getProps(): keplerProps {
   const { width, height, mapboxApiAccessToken, id } = this;
   return {
     width: width,
     height: height,
     mapboxApiAccessToken: mapboxApiAccessToken,
     id: id,
   };
 }

 private isMounted(): boolean {
   return !!this.rootDomID;
 }
 protected render() {
   this.width = window.innerWidth 
   this.height = window.innerHeight 
   if (this.isMounted()) {
     ReactDOM.render(
       React.createElement(
         Provider,
         { store: this.store },
         React.createElement(KeplerGl, this.getProps())
       ),
       this.getRootDomNode()
     );
   }
 }
}