当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

react-map-gl

React friendly API wrapper around MapboxGL JS
授权协议 View license
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 颛孙镜
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

build

react-map-gl | Docs

react-map-gl is a suite of React components designed to provide a React API for Mapbox GL JS-compatible libraries. More information in the online documentation.

See our Design Philosophy.

Installation

Using react-map-gl requires react >= 16.3.

npm install --save react-map-gl

Example

import * as React from 'react';
import ReactMapGL from 'react-map-gl';

function Map() {
  const [viewport, setViewport] = React.useState({
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
  });

  return (
    <ReactMapGL
      {...viewport}
      width="100%"
      height="100%"
      onViewportChange={(viewport) => setViewport(viewport)}
    />
  );
}

Using Mapbox Tokens

Starting with v2.0, mapbox-gl requires a Mapbox token for any usage, with or without the Mapbox data service. See about Mapbox tokens for your options.

To show maps from a service such as Mapbox you will need to register on their website in order to retrieve an access token required by the map component, which will be used to identify you and start serving up map tiles. The service will be free until a certain level of traffic is exceeded.

There are several ways to provide a token to your app, as showcased in some of the example folders:

  • Provide a mapboxApiAccessToken prop to the map component
  • Set the MapboxAccessToken environment variable (or set REACT_APP_MAPBOX_ACCESS_TOKEN if you are using Create React App)
  • Provide it in the URL, e.g ?access_token=TOKEN
  • Provide mapboxApiUrl prop to the map component to override the default mapbox API URL

But we would recommend using something like dotenv and put your key in an untracked .env file, that will then expose it as a process.env variable, with much less leaking risks.

Limitations

This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map. Because most of the functionality of Mapbox's JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Mapbox GL JS's Map class. You may access the native Mapbox API exposed by the getMap() function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state.

Examples of replacing common native API calls with their React equivalents can be found on the FAQ page.

Contribute

See contribution guide.

Attributions

react-map-gl is part of vis.gl, an Urban Computing Foundation project.

Development is also supported by

  • 参考:alex3165 / react-mapbox-gl   一个简单的例子: import React,{Component} from 'react'; import ReactMapboxGl, { Source,Layer, Feature } from 'react-mapbox-gl'; import { ScaleControl } from "react-mapbox-gl";

  • 项目场景: 在React项目中使用百度地图API 问题描述 在React项目中使用百度地图API时出现了 “BMapGL is not defined” 错误。 以下为百度地图给出的快速入门: 引入脚本 首先,需要在你的index.html模板页面头部加载百度地图JavaScript API代码,密钥可去百度地图开放平台官网申请。 <script type="text/javascript" sr

  • 要引入mapbox-gl和@mapbox/mapbox-gl-language这两个包,百度搜索下 import React from 'react'; import mapboxgl from "mapbox-gl"; import MapboxLanguage from "@mapbox/mapbox-gl-language"; // require('https://api.mapbox.c

 相关资料
  • react-baidu-map 是一个基于 React 封装的百度地图组件,帮助你轻松的接入地图到 React 项目中。 文档预览: Github | Gitee 安装 不依赖 uiw 组件库 npm install @uiw/react-baidu-map --save 使用 import { Map, APILoader } from '@uiw/react-baidu-map';const

  • 问题内容: 我正在尝试学习React,并且是Java的初学者。现在,我正在开发一个从Flickr的API提取数据的应用程序。问题是,当我尝试在Main.js组件中的props上使用map方法时,出现错误消息“ Uncaught TypeError:this.props.photos.map不是函数”。在此处在Stackoverflow上搜索后,我认为问题在于this.props是javascrip

  • 我有这样的xml结构: 这种xml来自无法控制的第三方服务,它可以包含新字段,或者现有字段可以消失,因此我无法为对象定义严格的结构。如我所见,除precingdate外,所有字段都可以解析为“String”。 是否可以通过我的cyustom策略教jackson xmlMapper使用PrecedingDate或Date字段工作?目前它创建具有以下结构的对象: 我想要java date或instan

  • 我试图通过在索引中添加标签名来在映射上迭代时生成唯一键。 请查找下面的代码片段。 当我尝试重复添加项目时,出现以下错误。 警告:遇到两个具有相同密钥的子项,。键应该是唯一的,以便组件在更新期间保持其标识。非唯一键可能会导致复制和/或忽略子项-不支持该行为,并且可能在将来的版本中更改。在burgers(由burgers创建)中的div(由BurgerBuilder创建)中的Aux(由BurgerBu

  • 问题内容: 假设我在其中一个组件上具有以下render函数。我从父元素传递了prop函数。 上级: 儿童: (我正在使用ES6类) 我无法在地图功能中使用,因为没有引用我所不想要的内容。我在哪里绑定它以便可以访问我的? 问题答案: 您可以设置为通过第二个参数回调 或者您可以使用没有自己的箭头功能,并且在其中指向封闭上下文

  • 问题内容: 我不想要做的是在地图上显示从某些移动设备上选择的位置。有关位置的数据在那里。 我这里需要根据从服务器接收到的数据在地图上添加标记。 假设我已经将位置数据 ({Lat,Lang}) 设置为 状态标记, 然后如何添加它以显示在地图中。 我的地图代码如下! 使用过的npm包:-谷歌地图反应 问题答案: 您可以尝试: 如果有错误,也请在此处显示,我们稍后可以修复 =========== 标记点