0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

openlayersでReactを試す

Last updated at Posted at 2021-05-25

Reactレビューするために、最近触っているopenlayersで試した。

とりあえず地図を表示だけということでopenlayersのチュートリアルのようなのを試したが、やっぱりつまったのでメモとして残しておく。

create-react-appで開発環境構築

src
├── App.css
├── App.js
├── App.test.js
├── Map
│ ├── MapPane.css
│ └── MapPane.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

作成したのはMapフォルダとそのファイル、App.jsを修正

src/Map/MapPane.js
import React, { useEffect, useRef, useState } from 'react';
// OpenLayers読み込み
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import OlSourceOSM from "ol/source/OSM";

import 'ol/ol.css';
import './MapPane.css';

const MapPane = () => {
	const mapRef = useRef();

  const [map,setMap] = useState(null);

  // on component mount
	useEffect(() => {
       let options = {
         view: new View({
           center: fromLonLat([139.767, 35.681]),
           zoom: 14,
         }),
         layers: [
           new TileLayer({
            source: new OlSourceOSM(),
           }),
        ],
       };
		let mapObject = new Map(options);
        //注目の2行!
		mapObject.setTarget(mapRef.current);
		setMap(mapObject);

		return () => mapObject.setTarget(undefined);
	}, []);

    return (
      <div className={'map'} ref={mapRef} />
    )


}

export default MapPane;

src/Map/MapPane.css
.map {
  z-index: 0;
  height: 1000px;
  text-align: left;
}
src/App.js
import React from "react"

import MapPane from "./Map/MapPane";


 const App = () =>{

  return (

  <div>
			<MapPane />

 </div>
  );
}

export default App;

スクリーンショット 2021-05-25 20.54.20.png

ポイント

写経ばかりだったせいか、いきなり関数コンポーネントを使用すると手が止まった。

useStateの使用

この関数を実行することでコンポーネント内で状態を扱える
→まあ納得

useRefの使用

		mapObject.setTarget(mapRef.current);

これがよくわからない。今までもあまり使っていない。これで大きくつまずいた。

<div id="map"></div>

がないのだが、代替としてマッピングしているイメージなのだろう。

useEffect

下記説明でイメージがわいた。いきなり使用すると手が止まる。

  useEffect(() => {
    // 初回レンダリング時に実行する処理を書く
    // comopnentDidMount相当

    return () => {
      // コンポーネントが削除される時に実行する処理を書く
      // componentWillUnmount相当
    };
  }, []);

追記

最初は下記の方がいいかもしれない。
openlayerの公式ページに従い、idへセットしている。

src/Map/MapPane.js
import React, { useEffect, useState } from 'react';
// OpenLayers読み込み
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import OlSourceOSM from "ol/source/OSM";

import 'ol/ol.css';
import './MapPane.css';

const MapPane = () => {

  const [map,setMap] = useState(null);

  // on component mount
    useEffect(() => {
      let mapObject = new Map({

        view: new View({
           center: fromLonLat([139.767, 35.681]),
           zoom: 14,
         }),
         layers: [
           new TileLayer({
            source: new OlSourceOSM(),
           }),
         ],
         target:'map'
       });
        // let mapObject = new Map(options);
        //注目の2行!
        // mapObject.setTarget("map");
        setMap(mapObject);

        return () => mapObject.setTarget(undefined);
    }, []);

    return (
      <div className={'map'} id="map" />
    )


}

参考記事

ReactでプレーンなLeafletとMapbox GL JSとOpenLayersの開発環境を構築してみた

スネークゲームを作って学ぶ React Hooks API での状態管理
 (techpit教材)

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?