Mapbox React

中文

English

中文

English

Appearance

测量工具（createMeasure） ​

目前支持长度测量以及面积测量

基础示例 ​

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

const App = () => {
  const [mapCenter] = useState([116, 39])
  const [zoom, setZoom] = useState(10)
  const [pitch, setPitch] = useState(0)
  const mapInst = useRef<any>()

  let measureUtil: ReturnType<typeof createMeasure>
  const mapCreatedHandler = (map: any) => {
    measureUtil = createMeasure(map)
  }
  const measureLength = () => {
    measureUtil && measureUtil.changeMode('length')
  }
  const measureArea = () => {
    measureUtil && measureUtil.changeMode('area')
  }

  return (
    <div className="map-wrapper">
      <MbMap
        ref={mapInst}
        center={mapCenter}
        zoom={zoom}
        pitch={pitch}
        onCreated={mapCreatedHandler}
      >
        <div style={{ position: 'absolute', top: '10px', left: '10px' }}>
          <button className="primary mr10" onClick={measureLength}>
            Measure Length
          </button>
          <button className="primary" onClick={measureArea}>
            Measure Area
          </button>
        </div>
      </MbMap>
    </div>
  )
}

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

自定义主题示例 ​

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

const App = () => {
  const [mapCenter] = useState([116, 39])
  const [zoom, setZoom] = useState(10)
  const [pitch, setPitch] = useState(0)
  const mapInst = useRef<any>()

  let measureUtil: ReturnType<typeof createMeasure>
  const mapCreatedHandler = (map: any) => {
    measureUtil = createMeasure(map, {
      showTooltip: true,
      styles: window.customTheme,
      lengthTitle: '长度测量',
      areaTitle: '面积测量',
      unitLabel: {
        m: '米',
        km: '千米',
      },
    })
  }
  const measureLength = () => {
    measureUtil && measureUtil.changeMode('length')
  }
  const measureArea = () => {
    measureUtil && measureUtil.changeMode('area')
  }

  return (
    <div className="map-wrapper">
      <MbMap
        ref={mapInst}
        center={mapCenter}
        zoom={zoom}
        pitch={pitch}
        onCreated={mapCreatedHandler}
      >
        <div style={{ position: 'absolute', top: '10px', left: '10px' }}>
          <button className="primary mr10" onClick={measureLength}>
            Measure Length
          </button>
          <button className="primary" onClick={measureArea}>
            Measure Area
          </button>
        </div>
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))
默认主题源码
js
export default [
  {
    'id': 'gl-draw-symbol-inactive',
    'type': 'symbol',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'user_display-type', 'symbol'],
      ['==', 'active', 'false'],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'feature'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'text-color': ['get', 'user_text-color'],
    },
    'layout': {
      'text-allow-overlap': true,
      'icon-allow-overlap': true,
      'text-size': ['get', 'user_text-size'],
      'icon-image': ['get', 'user_image-id'],
      'icon-size': ['get', 'user_icon-size'],
      'text-field': ['get', 'user_text'],
      'text-font': ['Open Sans Regular']
    }
  },
  {
    'id': 'gl-draw-symbol-active',
    'type': 'symbol',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'user_display-type', 'symbol'],
      ['==', '$type', 'Point'],
      ['==', 'active', 'true'],
      ['==', 'meta', 'feature']
    ],
    'paint': {
      'text-color': ['get', 'user_text-color'],
    },
    'layout': {
      'text-allow-overlap': true,
      'icon-allow-overlap': true,
      'text-size': ['get', 'user_text-size'],
      'icon-image': ['get', 'user_image-id'],
      'icon-size': ['get', 'user_icon-size'],
      'text-field': ['get', 'user_text'],
      'text-font': ['Open Sans Regular']
    }
  },
  {
    'id': 'gl-draw-polygon-fill-inactive',
    'type': 'fill',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'active', 'false'],
      ['==', '$type', 'Polygon'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'fill-color': ['get', 'user_fill-color'],
      'fill-outline-color': ['get', 'user_line-color'],
      'fill-opacity': ['get', 'user_opacity']
    },
  },
  {
    'id': 'gl-draw-polygon-fill-active',
    'type': 'fill',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
    'paint': {
      'fill-color': ['get', 'user_fill-color'],
      'fill-outline-color': ['get', 'user_line-color'],
      'fill-opacity': ['get', 'user_opacity']
    },
  },
  {
    'id': 'gl-draw-polygon-midpoint',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'midpoint']],
    'paint': {
      'circle-radius': 3,
      'circle-color': '#fbb03b'
    }
  },
  {
    'id': 'gl-draw-polygon-stroke-inactive',
    'type': 'line',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'active', 'false'],
      ['==', '$type', 'Polygon'],
      ['!=', 'mode', 'static']
    ],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': ['get', 'user_line-color'],
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-polygon-stroke-active',
    'type': 'line',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': ['get', 'user_line-color'],
      'line-dasharray': [0.2, 2],
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-line-inactive',
    'type': 'line',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'active', 'false'],
      ['==', '$type', 'LineString'],
      ['!=', 'mode', 'static']
    ],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': ['get', 'user_line-color'],
      'line-width': ['get', 'user_line-width'],
      'line-opacity': ['get', 'user_opacity'],
    }
  },
  {
    'id': 'gl-draw-line-active',
    'type': 'line',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'LineString'],
      ['==', 'active', 'true']
    ],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-dasharray': [0.2, 2],
      'line-color': ['get', 'user_line-color'],
      'line-width': 2,
      'line-opacity': 1,
    }
  },
  {
    'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'meta', 'vertex'],
      ['==', '$type', 'Point'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 5,
      'circle-color': '#fff'
    }
  },
  {
    'id': 'gl-draw-polygon-and-line-vertex-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'meta', 'vertex'],
      ['==', '$type', 'Point'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 3,
      'circle-color': '#fbb03b'
    }
  },
  {
    'id': 'gl-draw-point-point-stroke-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['!has', 'user_display-type'],
      ['==', 'active', 'false'],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'feature'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 5,
      'circle-opacity': 1,
      'circle-color': '#fff'
    }
  },
  {
    'id': 'gl-draw-point-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['!has', 'user_display-type'],
      ['==', 'active', 'false'],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'feature'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 3,
      'circle-color': '#3bb2d0'
    }
  },
  {
    'id': 'gl-draw-point-stroke-active',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'Point'],
      ['==', 'active', 'true'],
      ['!=', 'meta', 'midpoint']
    ],
    'paint': {
      'circle-radius': 7,
      'circle-color': '#fff'
    }
  },
  {
    'id': 'gl-draw-point-active',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'Point'],
      ['!=', 'meta', 'midpoint'],
      ['==', 'active', 'true']],
    'paint': {
      'circle-radius': 5,
      'circle-color': '#fbb03b'
    }
  },
  {
    'id': 'gl-draw-polygon-fill-static',
    'type': 'fill',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
    'paint': {
      'fill-color': '#404040',
      'fill-outline-color': '#404040',
      'fill-opacity': 0.1
    }
  },
  {
    'id': 'gl-draw-polygon-stroke-static',
    'type': 'line',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': '#404040',
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-line-static',
    'type': 'line',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': '#404040',
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-point-static',
    'type': 'circle',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'Point']],
    'paint': {
      'circle-radius': 5,
      'circle-color': '#404040'
    }
  },
];

API ​

导入 ​

ts
import { MODES, createMeasure } from '@mapbox-react/utils'

函数签名 ​

ts
/**
 * map: mapbox实例
 * options:
 *  showTooltip: 是否显示提示框，默认值true
 *  styles: mapbox gl draw 标会图层样式配置
 *  maxboxDrawInstance: 已有mapbox gl draw实例
 *  delete: 删除标会时的回调函数
 *  update: 更新标会时的回调函数
 *  lengthTitle: 长度测量提示框标题
 *  areaTitle: 面积测量提示框标题
 *  unitLabel:
 *   m: '米'单位提示字符
 *   km: '千米'单位提示字符
 */
createMeasure(
  map: Map,
  options: {
    [x: string]: any;
    showTooltip: boolean;
    styles?: IndexAny[];
    maxboxDrawInstance?: DrawUtil;
    delete?: (param: { mode: string; event: any; tooltip?: ReturnType<typeof createMeasureTooltip>, featuresCount: number }) => void;
    update?: (param: { result: number; mode: string; event: any; tooltip?: ReturnType<typeof createMeasureTooltip>, featuresCount: number }) => void;
    lengthTitle: string;
    areaTitle: string;
    unitLabel: {
      m: string;
      km: string;
    }
  }
)

TIP

自定义options时，必填项需要全部设置

返回值 ​

名称描述定义
currentModeName当前模式() => string
changeMode更改模式(mode: string) => void, mode: simple_select / length / area
clearAll删除所有图形() => void
destroy删除所有图形并销毁绘图() => void