Mapbox React

中文

English

中文

English

Appearance

圆图层（CircleLayer） ​

circle layer，半径较小时也可当作点使用

示例 ​

示例源码
tsx
import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbCircleLayer, MbMap, MbTiandituLayer } from '@mapbox-react/core'
import type { VectorLayerData } from '@mapbox-react/core'

const App = () => {
  const [mapCenter] = useState([116.38745, 39.91266])
  const [zoom, setZoom] = useState(2)

  const [strokeColor, setStrokeColor] = useState('#000000')
  const [blur, setBlur] = useState(0)
  const [pickable, setPickable] = useState(true)
  const [circle, setCircle] = useState({
    airpotDataSource: [] as VectorLayerData,
    color: [
      'scalerank',
      1,
      'rgb(178,24,43)',
      2,
      'rgb(239,138,98)',
      4,
      'rgb(253,219,199)',
      6,
      'rgb(209,229,240)',
      8,
      'rgb(103,169,207)',
      10,
      'rgba(33,102,172,0)',
    ],
    radius: ['scalerank', 1, 10, 10, 1],
  })

  const loadCircleData = () => {
    setCircle((c) => ({ ...c, airpotDataSource: [] }))
    fetch(
      'https://mapbox-web.github.io/mapbox-react/geojson/ne_10m_airports.geojson'
    )
      .then((res) => res.json())
      .then((data) => {
        const airData = data.features.map(
          (feature: {
            geometry: { coordinates: string | any[] }
            properties: any
          }) => {
            return {
              coordinates: feature.geometry.coordinates.slice(),
              properties: feature.properties,
            }
          }
        )
        setCircle((c) => ({ ...c, airpotDataSource: [...airData] }))
      })
  }

  useEffect(() => {
    loadCircleData()
  }, [])

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbTiandituLayer types={['vec']} />
        <MbCircleLayer
          {...circle}
          data={circle.airpotDataSource}
          color={circle.color}
          radius={circle.radius}
          blur={blur}
          pickable={pickable}
          strokeWidth={1}
          strokeOpacity={1}
          strokeColor={strokeColor}
          onCreated={() => console.log('created circle layer')}
          onClick={(args) => console.log('click', args)}
          onMouseMove={(args) => console.log('onMouseMove', args)}
        />
      </MbMap>
    </div>
  )
}

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

API ​

PROPS ​

名称描述类型默认值
id图层idstring-
radius半径, ['mag',1,5,14,20]表示依据mag属性值来设置圆半径，值为1/14时圆半径为5/20；[1,5,14,20]表示地图zoom值为1/14时圆半径为5/20number / Array<string | number>5
blur圆模糊量，值为1时只有圆中心点是不透明状态number0
color颜色值 可设为数字或数组 ['mag',1,"rgba(33,102,172,0)",14,"rgb(253,219,199)"]表示依据mag属性值来设置颜色值，值为1/14时颜色值为rgba(33,102,172,0)/rgb(253,219,199)string / Array<string | number>#000000
data矢量图层的数据 数组中每个对象需包含必需的coordinates属性以及可选的properties属性 每一个对象代表一个点/一条线/一个多边形VectorLayerData-
geoJsonDataSourcegeojson数据源，可设为geojson数据链接或geojson数据对象；规范链接， 若设置了本属性，则data属性失效string / GeoJSONSource-
opacity透明度，默认值为1 若设置为数组，则与zoom关联 例如：[7,1,9,0]表示0~7级透明度为1，9以上透明度为0number / number[]1
maxzoom最大缩放级别number22
minzoom最小缩放级别number0
pickable图层是否响应拾取事件，若为false，则组件不会emit鼠标相关事件booleantrue
show是否显示booleantrue
sourceId图层Source的id，若设置了本ID，则geoJsonDataSource与data属性都会失效string-
sourceLayerName源数据中图层名称 设置sourceId时，此属性生效string-
strokeColor圆边框颜色 可设为数字或数组 ['mag',1,"rgba(33,102,172,0)",14,"rgb(253,219,199)"]表示依据mag属性值来设置颜色值，值为1/14时颜色值为rgba(33,102,172,0)/rgb(253,219,199)string / Array<string | number>#000000
strokeOpacity圆边框透明度number0
strokeWidth圆边框宽度，单位pxnumber0
translate锚点平移量，正方向为右/下 pxnumber[][0,0]
autoHighlight是否自动高亮booleanfalse
highlightColor高亮颜色string / number[][255, 255, 128, 1]
generateId是否自动生成GeoJSON Feature Id。如果数据没有Id，自动高亮时，需设置为truebooleanfalse

EVENTS ​

名称描述参数
onCreated地图初始化完成事件-
onClick图层单击事件object — 包含屏幕坐标pixel、经纬度coordinate与选中元素的属性properties、originalEvent
onMouseMove鼠标移动事件object — 包含屏幕坐标pixel、经纬度coordinate与选中元素的属性properties、originalEvent
onMouseLeave鼠标移出元素事件MapMouseEvent

METHODS ​

名称描述定义
exportToGeoJson将本图层数据导出为geojson格式数据文本 若图层数据源来自source组件或为url，则输出null（）=> object | null