VisualStudio2017 > Reactテンプレート(TypeScript) > leaflet

12312 ワード
leaflet React VisualStudio2017 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 />;
    }
}

以上