【React】尝试使用React-Map-GL

2 年 ago
科, 雅
2 minutes

作为一个对React完全不了解的新手，我在一个学习会上有机会使用React-Map-GL来操作地图应用程序，所以我将总结一下。
由于我可能有许多错误的理解，请见谅。

环境

React.js 反应.js
React-Map-GL(MapBox) 反应地图-GL(MapBox)
yarn 纱线
Git 版本控制系统

運用解释和特点

React.js是Facebook发布的一个用于创建UI组件的开源库。
通过组合多个组件来创建一个完整的UI部件。
它专注于为正在开发过程中使用的功能增加UI功能。

组件=原子
UI的部件=分子
一个文件=物（例如铅笔或水之类的各种物品）
这是一个类似的概念。

组件化是React.js概念中使用的一种方法。
它是一种将UI进行组件化并进行管理和重复利用的设计手法。

create-react-app 是一个可以帮助你搭建React.js开发环境的工具。

Mapbox是一种高度可定制的地图服务。
参考资料：通过对比Mapbox和Google Maps，揭示出Mapbox真正的优点。

React-Map-GL是一个定制的Mapbox库，由Uber开发。
（是Uber定制和提供的Mapbox库吗？）

实施

    1. 在中国，只需给出一个选项，以下是对原文的中文本地化解释：

练习（环境搭建-服务器启动）
使用React-Map-GL显示地图
自定义地图
显示其他默认地图

1. 搭建（環境設置〜伺服器啟動）

使用Homebrew安装Yarn。
参考资料：通过Homebrew安装Yarn。

安装create-react-app

$ yarn global add create-react-app

使用 create-react-app 实现环境配置。

$ mkdir hoge //ディレクトリ作成
$ cd hoge

$ create-react-app fuga //railsのrails newみたいなの
$ cd fuga
$yarn start //ローカルサーバー立ち上げ

点击

Image from Gyazo

哇！原来在 Rails 的时候也一样，只要看到初始页面就开心！！！

在这里进行文件编辑

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello World
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

2. 使用React-Map-GL展示地图

获取Mapbox令牌

注册Mapbox账户→获取令牌
令牌位于账户页面底部。

从GitHub克隆存储库

※先前在同一層次上克隆已创建的fuga。

$ git clone https://github.com/uber/react-map-gl.git

将获取到的令牌插入到文件中。


import React, { Component } from 'react';
import { render } from 'react-dom';
import MapGL, { Popup, NavigationControl, FullscreenControl, ScaleControl } from 'react-map-gl';

import Pins from './pins';
import CityInfo from './city-info';

import CITIES from '../../.data/cities.json';

// ここの''に先ほど取得したトークンを挿入
const TOKEN = '';

启动服务器

$ cd react-map-gl/examples/controles/src

$ yarn install
$ yarn start

只有在转到react-map-gl/examples/controles/src目录并输入yarn命令后才能启动。

Image from Gyazo

哇哦～！太感动了！！

3. 自定义地图

上述的地图由多个组件（UI部件）组成并显示。
因此，可以对每个组件进行编辑。
在这里，我们将实施一些自定义。

隐藏控制面板

Image from Gyazo

// import ControlPanel from './control-panel';
.
.
.
// <ControlPanel containerComponent={this.props.containerComponent} />

由于在JSX中导入了控制面板的表单，因此如果将这两行注释掉，它将消失。

Image from Gyazo

更改坐标

默认情况下，坐标设置为美国，现在将其更改为东京。

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        latitude: 35.681236,   // 緯度
        longitude: 139.767125, // 経度
        zoom: 8,               // 地図の拡大縮小設定
        bearing: 0,
        pitch: 0
      },
      popupInfo: null
    };
  }
.
.
.

调整纬度经度，将地图放大缩小设置为适合阅读的大小。我认为大约设置为8就足够了。

Image from Gyazo

展示锦标时点击可弹出详细信息的模态框

Image from Gyazo

我可以把这个针放在东京！针的组成部分以json格式进行统一管理。

[
.
.
.
 {
    "city": "Tokyo",
    "population": "13,942,856",
    "image": "https://www.nta.co.jp/media/tripa/static_contents/nta-tripa/item_images/images/000/087/964/medium/4b99ef28-16db-4e8c-948b-6c9cf056ad58.png?1562116683",
    "state": "Tokyo",
    "latitude": 35.681236,
    "longitude": 139.767125
  }
]

将东京的信息放在文件的最后一行，可以这样做。

Image from Gyazo

定制功能很棒，很有趣！

展示其他默认地图

之前我们展示和自定义了名为 controls 的地图文件。接下来我们将尝试展示热力图。

import React, {Component} from 'react';
import {render} from 'react-dom';
import MapGL, {Source, Layer} from 'react-map-gl';
import ControlPanel from './control-panel';
import {json as requestJson} from 'd3-request';
import {heatmapLayer} from './map-style';

const MAPBOX_TOKEN = ''; // トークン入力

请再次输入令牌。

$ cd react-map-gl/examples/heatmap/src

$ yarn install
$ yarn start

切换到目录并安装yarn，启动服务器

Image from Gyazo

看起来默认情况下使用地震次数来显示颜色。
这里似乎也可以进行各种自定义。

参考资料：介绍REACT-MAP-GL的示例。

总结

API真的很方便，这是我的真实感受。
之前一直以为谷歌地图是唯一的选择，但是用Mapbox来制作自己的地图也可能很有趣。
在这样的学习会上，我想要接触并运用各种技术，谢谢！(^^)

bannerAds