VisualStudio2017 > React 템플릿(TypeScript) > leaflet
11445 단어 leafletReactVisualStudio2017
환경
버전: asp.net core 2.0
asp.net core 2.0의 React 템플릿은 TypeScript가 됩니다.
따라서 TypeScript로 작성합니다.
![](https://s1.md5.ltd/image/cb5d61c083f2ad91d819f6f5413cfb24.png)
프로젝트 만들기
React.js 템플릿을 사용하여 프로젝트를 만듭니다.
![](https://s1.md5.ltd/image/b4141d3d5b5113effcbd9b794a5b3ff2.png)
package.json
leaflet 및 @types/leaflet을 추가합니다.
"devDependencies": {
"leaflet": "1.3.1"
},
"dependencies": {
"@types/leaflet": "^1.2.7"
}
components
불필요한 파일 삭제
ClientApp/components/배포 불필요한 파일 삭제
다음 파일 그룹은 완전히 지워집니다.
파일 추가
맵용 구성 요소 추가
현재 상태로 다음과 같은 구성이 된다
![](https://s1.md5.ltd/image/102722232b006598f82549c3d03469d3.png)
파일 수정
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 />;
}
}
이상
Reference
이 문제에 관하여(VisualStudio2017 > React 템플릿(TypeScript) > leaflet), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sugasaki/items/2cc330309be4a5205f82텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)