3D 지도, 반응.js 및 Typescript

나는 3D 지도를 가지고 놀고 있다. 반응.js와 Typescript, 그래서 나는 그것들을 혼합해서 작은 보조 항목을 쓰고 나의 실험에 관한 필기를 하기로 결정했다.

목표는 React와 Typescript를 사용하여 3D 지도를 구축하는 몇 가지 절차를 보여 주는 것입니다.
"React 응용 프로그램 만들기"를 사용하는 것이 좋습니다. 이것은 React 단일 페이지 응용 프로그램을 신속하게 만드는 데 도움을 줄 수 있는 환경입니다.
단계:

Typescript를 사용하는'Create React App'에서 빈 항목을 만듭니다.

지도를 위한 반응 구성 요소 만들기;

지도를 저장하고 사용하는 API 키;

여기에 JS와 CSS를 HTML에 매핑하는 것을 추가합니다.

React 구성 요소에 이 맵을 로드합니다.

빈 항목 만들기

ReactJS로 원형을 만들어야 할 때 Create React App 를 사용하여 프로젝트를 만듭니다.

npx create-react-app map-here-ts --template typescript
cd map-here-ts

Typescript를 사용하려면 --template 옵션을 사용해야 합니다.
이 도구는 모든 것을 사용하여 프로젝트를 만드는 데 도움을 줄 수 있습니다.이 명령이 끝날 때, 패키지가 있는ts 디렉터리를 여기에 비추십시오.json을 만들고 모든 노드 모듈을 설치합니다.

지도 구성 요소 만들기

src/directory에서 src/components/Map 디렉터리를 만들어야 합니다.
src/components/Map에서 맵을 만들어야 합니다.tsx와 Map.css 파일.

mkdir -p src/components/Map
touch src/components/Map/Map.tsx
touch src/components/Map/Map.css

정확히 말하면 tsx는 정확한 확장입니다. jsx를 Typescript와 함께 사용하기 때문에 tsx입니다.

환경 파일에 API 키 저장

우리는 HERE Technologies가 제공하는 지도와 서비스를 사용할 것이다.그들은 위치 서비스를 이용하려는 개발자들에게 매우 유용한 무료 계획을 제공했다.지도와 서비스를 사용하기 위해서는 개발자 포털에 들어가서 등록하고 Freemium 프로그램을 사용하여 새 프로젝트를 만들고 새 API 키를 만들어야 합니다.새 프로젝트를 만드는 URL은 다음과 같습니다.
https://developer.here.com/projects
API 키가 있으면 만들 수 있습니다.환경로컬 파일 및 새 매개변수 생성하기

REACT_APP_HERE_APIKEY="your-here-API Key"

"Here API 키"를 API 키로 교체하는 것을 기억하십시오.

매핑 구성 요소 구현

src/components/Map/Map에서이전에 생성한 tsx 구성 요소 (빈 파일로) 를 권장하는 대로 채울 수 있습니다.

import React, { Component } from "react";
// 001 - Importing CSS
import "./Map.css";
// 002 - Adding H declaration in Window
declare global {
  interface Window {
    H: any;
  }
}
// 003 - Defining IProps Interface with debug prop
interface IProps {
  debug?: boolean;
}
// 004 - Defining  IState interface with all attributes we need
interface IState {
  lat: number;
  lng: number;
  zoom: number;
}

// 005 - Defining component with Typescript Generic
class Map extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    // 006 - Setting some Default (Colosseum - Rome)
    this.state = {
      lat: 41.890251,
      lng: 12.492373,
      zoom: 18
    };
  }

  // 007 - Implementing componentDidMount in order to load map once the component is mounted
  componentDidMount() {
    // 008 - Using H (a Class exported by HERE Map Javascript)
    let H = (window as any).H;
    // 009 - Instancing Map Platform
    var platform = new H.service.Platform({
      // 010 - Using the parameter defined in .env.local
      apikey: process.env.REACT_APP_HERE_APIKEY
    });
    // 011 - Defining default Layers to apply on map
    var defaultLayers = platform.createDefaultLayers();

    // 012 - initialize the map
    var map = new H.Map(
      document.getElementById("map"),
      defaultLayers.vector.normal.map,
      {
        // 013 - using state for lat, lng and zoom
        center: { lat: this.state.lat, lng: this.state.lng },
        zoom: this.state.zoom,
        pixelRatio: window.devicePixelRatio || 1
      }
    );
    // 014 - incline the Map
    map.getViewModel().setLookAtData({ tilt: 45, heading: 0 });
    // 015 - add a resize listener to make sure that the map occupies the whole container
    window.addEventListener("resize", () => map.getViewPort().resize());
    new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    // 016 - Create the default UI components
    H.ui.UI.createDefault(map, defaultLayers);
  }
  render() {
    // 017 - implement render function
    return (
      <div className="mapWrapper">
        <div className="map" id="map"></div>
      </div>
    );
  }
}
export default Map;

이전 코드의 복사와 붙여넣기는 당신의 친구가 될 것입니다. 그러나 코드를 찾아보겠습니다 (주문 보기):

001: CSS 파일을 가져와 스타일을 정의할 수 있습니다.

002: Typescript에서 HERE Maps Javascript에서 내보낸 H 클래스를 사용하기 위해 창에 H를 포함하는 인터페이스를 정의해야 합니다.

003: Typescript 때문에props와 구성 요소에서 사용할 모든props의 인터페이스를 설명해야 합니다.이 경우 비강제적(물음표) 디버깅 속성은 볼 형식으로 정의됩니다.

004: Typescript 때문에 구성 요소에 사용할 모든 속성 성명 상태 인터페이스를 사용해야 합니다.이런 상황에서:lat,lng, 숫자로 축소;

005: 유형 CRPT Generic을 사용하여 구성 요소를 정의합니다.

006: 기본 중심 및 줌을 상태로 설정합니다.

007:componentDidMount 기능을 실현하여 구성 요소를 설치한 후map을 불러옵니다.

008: H를 사용합니다(여기에 Javascript에서 내보낸 클래스를 비추십시오).

009: 실례 지도 플랫폼

010: 이전에 저장된api 키를 사용합니다.환경로컬 파일

011: 지도에 적용할 기본 도면층 정의하기;

012: 지도 초기화;

013:lat, lng,zoom의 사용 상태, 이를 통해.상태

014: setLookAtData 방법과 경사와 항로

를 통해 지도 회전

015: 지도가 용기 전체를 차지하도록 크기를 조절하는 탐지기를 추가

016: 기본 UI 구성 요소 만들기

지도 용기에 CSS 정의

지도에서.css css 파일 (Map.tsx에서 가져오기) 맵 용기의 높이를 설정합니다.

.map {
  height: 100vh;
  background: #f0e68c;
}

여기에 포함된 Javascript 매핑

공용/색인에서.html 파일, 제목 부분에 오른쪽 CSS와 JS 파일을 포함하고 여기서 JS를 비추기:

<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

매핑 구성 요소 로드

src/App에 있습니다.tsx는 Create React 응용 프로그램에서 만든 예제 코드를 다음과 같이 바꿉니다.

import React from 'react';
import Map from './components/Map/Map'

const App: React.FC = () => {
  return (
    <div className="App">
      <Map></Map>
    </div>
  );
}

export default App;

프로젝트 실행

새 프로젝트 실행 디렉터리에 있는 콘솔로 돌아가기

npm run start

이게 다야!
댓글로 남겨주신 걸 환영합니다.