VisualStudio2017 > React 템플릿(TypeScript) > leaflet

VisualStudio2017의 React 템플릿을 사용하여 leaflet을 표시합니다.　(IE11 대응)

환경

버전: asp.net core 2.0

asp.net core 2.0의 React 템플릿은 TypeScript가 됩니다.
따라서 TypeScript로 작성합니다.

프로젝트 만들기

React.js 템플릿을 사용하여 프로젝트를 만듭니다.

package.json

leaflet 및 @types/leaflet을 추가합니다.

"devDependencies": {
    "leaflet": "1.3.1"
},
"dependencies": {
    "@types/leaflet": "^1.2.7"
}

components

불필요한 파일 삭제

ClientApp/components/배포 불필요한 파일 삭제
다음 파일 그룹은 완전히 지워집니다.

FetchData.tsx

Counter.tsx

NavMenu.tsx

파일 추가

맵용 구성 요소 추가

MapWorld.tsx

현재 상태로 다음과 같은 구성이 된다

파일 수정

routes.tsx

파일을 삭제했기 때문에 라우터 설정도 변경한다.

routes.tsx

import * as React from 'react';
import { Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './components/Home';

export const routes = <Layout>
    <Route exact path='/' component={ Home } />
</Layout>;

Layout.tsx

지도를 전체화면 표시로 한다.

Layout.tsx

import * as React from 'react';

export interface LayoutProps {
    children?: React.ReactNode;
}

export class Layout extends React.Component<LayoutProps, {}> {
    public render() {
        return <div id='root'>
            {this.props.children}
        </div>;
    }
}

site.css

맵을 전체화면으로 표시하기 위한 CSS 설정.

site.css

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#react-app, #root, #map, #mapUI {
    width: inherit;
    height: inherit;
    background-color: #000;
}

MapWorld.tsx

Leaflet을 표시하는 구성 요소

MapWorld.tsx

import * as React from 'react';
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export class MapWorld extends React.Component<{}, {}> {
    componentDidMount() {
        this.init();
    }

    private init() {
        let map = L.map('map')
        let basemapLayer = new L.TileLayer('http://{s}.tiles.mapbox.com/v3/github.map-xgq2svrz/{z}/{x}/{y}.png');
        map.addLayer(basemapLayer);
        map.setView([35.6693863, 139.6012974], 5);
    }
    public render() {
        return <div id="mapUI">
            <div id='map'>a</div>
        </div>;
    }
}

Home.tsx

Leaflet을 표시하는 구성 요소를 표시합니다.

Home.tsx

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { MapWorld } from './MapWorld';

export class Home extends React.Component<RouteComponentProps<{}>, {}> {
    public render() {
        return <MapWorld />;
    }
}

이상