BuildingLayer

Building layers simulate 3D building effects and require source building data and floor height field information. For large datasets, vector tiling is recommended.

Example

Preview

Example Source Code

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbBuildingLayer, MbMap, MbTiandituLayer } from '@mapbox-react/core'

const App = () => {
  const [mapCenter] = useState([116.194322, 39.925238])
  const [zoom, setZoom] = useState(15)

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom} pitch={50}>
        <MbTiandituLayer types={['vec']} />
        <MbBuildingLayer
          heightInfoField="Floor"
          magnification={5}
          color="#acacac"
          geoJsonDataSource="/geoserver/building/ows?service=WFS&maxFeatures=60000&version=1.0.0&request=GetFeature&typeName=cestc:beijing-building-4326&outputFormat=application/json"
        />
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

名称	描述	类型	默认值
id	Layer ID	string	-
heightInfoField	The corresponding key in the source data for height information	string	-
magnification	Height magnification factor	number	1
base	Base height	number	0
color	Color value. Supports formats such as "#000000" and "rgb(0,0,0)"	string	#acacac
data	Data for the vector layer. Each object in the array must contain the required coordinates property and the optional properties property. Each object represents a point/line/polygon	VectorLayerData	-
geoJsonDataSource	GeoJSON data source. Can be set to a GeoJSON data link or a GeoJSON data object. Specification Link. If this property is set, the data property is ignored	string / GeoJSONSource	-
opacity	Opacity	number	1
maxzoom	Maximum zoom level	number	22
minzoom	Minimum zoom level	number	0
pickable	Whether the layer responds to pick events. If false, the component will not emit mouse-related events	boolean	true
show	Whether to show the layer	boolean	true
sourceId	ID of the layer's source. If this ID is set, both the geoJsonDataSource and data properties are ignored	string	-
sourceLayerName	Layer name in the source data. This property is effective when sourceId is set	string	-
sideGradient	Value of the Mapbox layer's fill-extrusion-vertical-gradient property	boolean	false

EVENTS

Name	Description	Parameters
onCreated	Map initialization completed event	-
onClick	Layer click event	object — Contains screen coordinates (pixel), longitude/latitude (coordinate), selected element properties, and originalEvent
onMouseMove	Mouse move event	object — Contains screen coordinates (pixel), longitude/latitude (coordinate), selected element properties, and originalEvent
onMouseLeave	Mouse leave element event	MapMouseEvent

METHODS

Name	Description	Definition
exportToGeoJson	Translate the layer's data to GeoJSON formatted text. If the layer's data source comes from a source component or a URL, output null.	（）=> object | null