多边形图层（PolygonLayer）

示例

示例源码

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

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

  const colors = ['rgba(255,125,0,0.5)', '#ec71a9', 'red']
  const [colorIndex, setColorIndex] = useState(0)
  const polygonCoordinates = [
    {
      coordinates: [
        [110.56640625, 39.639537564366684],
        [107.22656249999999, 36.527294814546245],
        [107.57812499999999, 32.39851580247402],
        [112.5, 30.600093873550072],
        [117.42187500000001, 32.02670629333614],
        [117.24609374999999, 36.94989178681327],
        [114.697265625, 39.70718665682654],
        [110.56640625, 39.639537564366684],
      ],
    },
    {
      coordinates: [
        [82.08984375, 32.47269502206151],
        [90.966796875, 32.47269502206151],
        [90.966796875, 38.685509760012],
        [82.08984375, 38.685509760012],
        [82.08984375, 32.47269502206151],
      ],
    },
  ]

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <div style={{ position: 'absolute', top: '5px', left: '5px' }}>
          <button className="primary" onClick={() => setColorIndex((c) => ++c)}>
            Switch Color
          </button>
        </div>
        <MbTiandituLayer types={['vec']} />
        <MbPolygonLayer
          data={polygonCoordinates}
          color={colors[colorIndex % colors.length]}
          outlineColor="yellow"
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称	描述	类型	默认值
id	图层id	string	-
color	颜色值 支持 "#000000" "rgb(0,0,0)" [255,0,0,1]等模式	string / number[]	#000000
data	矢量图层的数据 数组中每个对象需包含必需的coordinates属性以及可选的properties属性 每一个对象代表一个点/一条线/一个多边形	VectorLayerData	-
geoJsonDataSource	geojson数据源，可设为geojson数据链接或geojson数据对象；规范链接， 若设置了本属性，则data属性失效	string / GeoJSONSource	-
opacity	透明度	number	1
outlineColor	边框颜色	string / number[]	#000
maxzoom	最大缩放级别	number	22
minzoom	最小缩放级别	number	0
pickable	图层是否响应拾取事件，若为false，则组件不会emit鼠标相关事件	boolean	true
show	是否显示	boolean	true
sourceId	图层Source的id，若设置了本ID，则geoJsonDataSource与data属性都会失效	string	-
sourceLayerName	源数据中图层名称 设置sourceId时，此属性生效	string	-
translate	偏移量，正数表示 右/下	array	[0,0]
pattern	图片纹理，通过ImageLoader加载的图片名称，设置此值后，color属性无效	string	-
autoHighlight	是否自动高亮	boolean	false
highlightColor	高亮颜色	string / number[]	[255, 255, 128, 1]
generateId	是否自动生成GeoJSON Feature Id。如果数据没有Id，自动高亮时，需设置为true	boolean	false
useExpression	是否使用表达式，设置为true时，将不会解析颜色相关属性	boolean	false

EVENTS

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

METHODS

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