VisualStudio2017 > Reactテンプレート(core 2.1) > leaflet
環境
バージョン:asp.net core 2.1
asp.net core 2.0のReactテンプレートはTypeScriptでしたが、
asp.net core 2.1から、ES6(JavaScript)に変わり、create-react-appで作成されるプロジェクトがベースとなりました。
今回はそこにLeafletを追加します。
プロジェクト作成
React.jsテンプレートを使ってプロジェクトを作成します。
package.json
leafletを追加します。
"dependencies": {
"leaflet": "1.3.1"
}
components
不要ファイル削除
ClientApp/src/components/配下の不要なファイルを削除
以下のファイル群はすぱっと消す
- FetchData.js
- Counter.js
- NavMenu.js
- NavMenu.cs
ファイル修正
App.js
ファイルを削除したのでルーター設定も変更する。
import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
export default class App extends Component {
displayName = App.name
render() {
return (
<Layout>
<Route exact path='/' component={Home} />
</Layout>
);
}
}
Layout.js
ClientApp/src/components/Layout.js
マップを全画面表示にする。
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>;
}
}
index.css
ClientApp/src/index.css
マップを全画面表示にするためのCSS設定。
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#react-app, #root, #map, #mapUI {
width: inherit;
height: inherit;
background-color: #fffff;
}
MapWorld.js
ClientApp/src/components/MapWorld.js を追加
※Leafletを表示するコンポーネントとなる。
import React, { Component } from 'react';
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';
export class MapWorld extends React.Component {
componentDidMount() {
let map = L.map('map').setView([35.6693863, 139.6012974], 5);
let basemapLayer = new L.TileLayer('http://{s}.tiles.mapbox.com/v3/github.map-xgq2svrz/{z}/{x}/{y}.png');
map.addLayer(basemapLayer);
}
render() {
return <div id="mapUI">
<div id='map'>a</div>
</div>;
}
}
Home.js
Leafletを表示するコンポーネントを表示する。
import React, { Component } from 'react';
import { MapWorld } from './MapWorld';
export class Home extends Component {
displayName = Home.name
render() {
return (
<MapWorld />
);
}
}
結果
以上
Author And Source
この問題について(VisualStudio2017 > Reactテンプレート(core 2.1) > leaflet), 我々は、より多くの情報をここで見つけました https://qiita.com/sugasaki/items/3c42d4f5f4d779b7d09a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .