我可以像在（mapbox-gl-js 文档）中那样使用 react-map-gl 添加 GeoJSON 行吗？

Posted 2023-02-16

【中文标题】我可以像在（mapbox-gl-js 文档）中那样使用 react-map-gl 添加 GeoJSON 行吗？

【英文标题】：Can I add a GeoJSON line like they do in the (mapbox-gl-js documentation) using react-map-gl?

【发布时间】：2018-06-03 15:46:47

【问题描述】：

我正在尝试添加一条 GeoJSON 线来显示 A 点和 B 点之间的汽车方向（就像他们在 mapbox-gl-js (https://www.mapbox.com/mapbox-gl-js/example/geojson-line/) 的官方文档中所做的那样

但是 react-map-gl 的文档根本没有提到这一点。

我怎样才能实现与此类似的事情 https://uber.github.io/react-map-gl/#/Documentation/introduction/introduction：

这是我目前的代码：

class MapPage extends Component 
  constructor(props) 
    super(props);
     this.state = 
      viewport: 
       latitude: 38.63738602787579,
       longitude: -121.23576311149986,
       zoom: 6.8,
       bearing: 0,
       pitch: 0,
       dragPan: true,
       width: 600, 
       height: 600 
     
    ;
   

render() 
  const  viewport  = this.state;

  return (
    <ReactMapGL
      ...viewport
      mapboxApiAccessToken=MAPBOX_TOKEN
      onViewportChange=newViewport => 
        this.setState( viewport: newViewport );
      
    />
  );
 

【参考方案1】：

您可以在组件挂载后获取 mapbox-gl 地图对象，然后您可以直接使用它。试试这样的：

class MapPage extends Component 
      constructor(props) 
        super(props);
         this.state = 
          viewport: 
           latitude: 38.63738602787579,
           longitude: -121.23576311149986,
           zoom: 6.8,
           bearing: 0,
           pitch: 0,
           dragPan: true,
           width: 600, 
           height: 600 
         
        ;
       
    componentDidMount()
      const map = this.reactMap.getMap();
      map.on('load', () => 
       //add the GeoJSON layer here
       map.addLayer(...)
      )
    

    render() 
      const  viewport  = this.state;

      return (
        <ReactMapGL
          ref=(reactMap) => this.reactMap = reactMap />
          ...viewport
          mapboxApiAccessToken=MAPBOX_TOKEN
          onViewportChange=newViewport => 
            this.setState( viewport: newViewport );
          
        />
      );
     
    

反应参考：https://reactjs.org/docs/refs-and-the-dom.html

GetMap():https://uber.github.io/react-map-gl/#/Documentation/api-reference/static-map?section=methods

【参考方案2】：

适用于使用 react-map-gl 5.0 及以上版本的用户

截至 2019 年 10 月，react-map-gl 支持 Layer 和 Source 组件，这意味着开发人员可以在 Mapbox 画布上渲染 Mapbox 图层，而无需调用 getMap() 来公开底层原生 Mapbox API .

您可以参考原始 Mapbox Source 和 Layer 文档，了解 Layer 和 Source 道具的有效值的完整规范。

这就是 Source 和 Layer 组件如何与您提供的代码一起使用以在地图上生成 GeoJSON 线的方式。

class MapPage extends Component 
  constructor(props) 
    super(props);
     this.state = 
      viewport: 
       latitude: 38.63738602787579,
       longitude: -121.23576311149986,
       zoom: 6.8,
       bearing: 0,
       pitch: 0,
       dragPan: true,
       width: 600, 
       height: 600 
     
    ;
   

render() 
  const  viewport  = this.state;

  return (
    <ReactMapGL
      ...viewport
      mapboxApiAccessToken=MAPBOX_TOKEN
      onViewportChange=newViewport => 
        this.setState( viewport: newViewport );
      
    >
      <Source id='polylineLayer' type='geojson' data=polylineGeoJSON>
        <Layer
          id='lineLayer'
          type='line'
          source='my-data'
          layout=
           'line-join': 'round',
           'line-cap': 'round',
          
          paint=
           'line-color': 'rgba(3, 170, 238, 0.5)',
            'line-width': 5,
          
        />
      </Source>
    </ReactMapGL>
  );
 

【讨论】：

您好，我正在尝试运行您的代码，您介意举一个 polylineGeoJSON 的示例吗？

你能提供一个看起来像 polylineGeoJSON 和 source='my-data' 的例子吗？

polylineGeoJSON 的 TypeScript 定义：github.com/DefinitelyTyped/DefinitelyTyped/blob/…

【参考方案3】：

nice job.
now try this.
import React,  Component  from 'react';
import ReactMapGL, 
  Marker,
  FullscreenControl,
  GeolocateControl,
  Source,
  Layer,
  SVGOverlay,
  HTMLOverlay,
  NavigationControl,
  LinearInterpolator,
  CanvasOverlay,
  Popup
 from 'react-map-gl';
const geojson = 
  type: 'FeatureCollection',
  features: [
     type: 'Feature', geometry:  type: 'Point', coordinates: [73.05625599999999, 33.644543999999996]  
  ]
;

export default class App extends Component 
  constructor(props) 
    super(props);
    this.state = 
      markerLat: 33.644543999999996,
      markerlng: 73.05625599999999,
      showPopup: true,
      viewport: 
        width: window.innerWidth,
        height: window.innerHeight,
        latitude: 41.8662,
        longitude: -87.61694,
        zoom: 15.99,
        pitch: 40,
        bearing: 20,
        antialias: true
      
    ;
    this.re = React.createRef();
  

  componentDidMount()
   // window.addEventListener("resize", this.resize.bind(this));
    const map = this.reactMap.getMap();
   // console.log('map object',map.on)
    map.on('load', function() 

     //add the GeoJSON layer here
    map.addLayer(
      'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': 
// GeoJSON Data source used in vector tiles, documented at
// https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
,
'paint': 
// See the Mapbox Style Specification for details on data expressions.
// https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions

// Get the fill-extrusion-color from the source 'color' property.
'fill-extrusion-color': ['get', 'color'],

// Get fill-extrusion-height from the source 'height' property.
'fill-extrusion-height': ['get', 'height'],

// Get fill-extrusion-base from the source 'base_height' property.
'fill-extrusion-base': ['get', 'base_height'],

// Make extrusions slightly opaque for see through indoor walls.
'fill-extrusion-opacity': 1

    )
    )
  
  resize() 
    //alert(window.innerWidth);
    this.setState(
      viewport: 
        width: window.innerWidth,
        height: window.innerHeight
      
    , () => 
      //  console.log(this.state.viewport.width)
    );
  

  render() 
    var markerLat = this.state.markerLat;
    var markerlng = this.state.markerlng
    return (
      <div>
        <ReactMapGL
          ...this.state.viewport
          ref=(reactMap) => this.reactMap = reactMap
          // transitionDuration=1000
          //transitionInterpolator=new LinearInterpolator()
          mapboxApiAccessToken='pk.eyJ1IjoiemVlc2hhbjU1NzI2MTUiLCJhIjoiY2syaWoyNDAxMGdvbTNscGJobDZwcHAxMCJ9.tcB8DX8W-7XMY7nzX9ilvw'
          onViewportChange=(viewport) => 
            // console.log('viewprt' , viewport)
            this.setState(
              viewport: viewport
            , () => 
              // console.log(this.state.viewport.width)
            );
          
        >
          <div style= position: 'absolute', right: 10, top: 10 >
            <FullscreenControl container=document.querySelector('body') />
          </div>
          /*  <GeolocateControl 
          positionOptions=enableHighAccuracy: true
          trackUserLocation=true
          showUserLocation=true
        />
  <Marker 
        latitude=this.state.markerLat 
        longitude=this.state.markerlng 
        offsetLeft=-20 offsetTop=-10
        draggable =true

      onDragEnd=(x)=>
        console.log('event ',x)
        this.setState(
          markerLat:x.lngLat[0],
          markerlng:x.lngLat[1]
        )
      
        >
  <p style=
    background:'#000',
    fontSize:20,
    padding:5,
    alignSelf:'center',
    fontWeight:'bold',
    borderRadius:'50%',
    lineHeight:.5
  ><span>&nbsp;</span></p>
        </Marker>

        this.state.showPopup && <Popup
          latitude=this.state.markerLat
          longitude=this.state.markerlng
          closeButton=true
          closeOnClick=false
          onClose=() => this.setState(showPopup: false)
          anchor="bottom"
          tipSize=10 >
          <div>You are here</div>
        </Popup>*/


          <div style= position: 'absolute', bottom: 30 >
            <NavigationControl />
          </div>
        </ReactMapGL>
      </div>
    );