React Mapbox GL Draw 项目教程

洪赫逊

于 2024-09-10 07:56:39 发布

阅读量225

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00613/article/details/142075261

版权

React Mapbox GL Draw 项目教程

react-mapbox-gl-drawDraw tools for Mapbox with React: 🗺️ react-mapbox-gl + 🖌️ mapbox-gl-draw项目地址:https://gitcode.com/gh_mirrors/re/react-mapbox-gl-draw

1. 项目介绍

React Mapbox GL Draw 是一个基于 React 的组件，用于在 Mapbox GL JS 地图上添加绘图和编辑功能。该项目允许用户在地图上绘制和编辑多边形、线条和点等几何图形。它是对 Mapbox GL Draw 库的 React 封装，使得开发者可以更方便地在 React 应用中集成地图绘图功能。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装项目依赖：

npm install react-mapbox-gl-draw mapbox-gl @mapbox/mapbox-gl-draw

创建地图组件

在你的 React 项目中，创建一个地图组件并集成 react-mapbox-gl-draw：

import React from 'react';
import ReactMapGL from 'react-map-gl';
import MapboxDraw from 'react-mapbox-gl-draw';

const MapComponent = () => {
  const [viewport, setViewport] = React.useState({
    width: 800,
    height: 600,
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
  });

  return (
    <ReactMapGL
      {...viewport}
      onViewportChange={(newViewport) => setViewport(newViewport)}
      mapboxApiAccessToken="YOUR_MAPBOX_ACCESS_TOKEN"
    >
      <MapboxDraw
        position="top-left"
        displayControlsDefault={false}
        controls={{
          polygon: true,
          trash: true
        }}
      />
    </ReactMapGL>
  );
};

export default MapComponent;