将 Mapbox GL 与 React 101 一起使用
将 Mapbox GL 与 React 101 一起使用
Lombard Sokağı, San Francisco
如果我们想做一个处理地图数据的项目，Mapbox 会在这里帮助我们，而不是重新发明轮子并从头开始编写一个库。一阵子 萤火虫 当我在公司工作时，我意识到一个我非常熟悉的图书馆，不幸的是，没有很多土耳其语资源，我想把我知道的东西写在介绍性的层面上。
什么是地图盒？
地图盒 是当今大公司和应用程序（例如 Snapchat、The Weather Channel、Foursquare）首选的美国地图服务提供商。
Mapbox GL 内迪尔？
Mapbox GL , 是一个 JavaScript 库，它为我们提供了许多映射可能性，包括交互式地图、可视化地图（热图、3D 映射等）和使用 WebGL 技术的矢量地图设计。
React 和 Mapbox GL 设置
首先 创建反应应用 让我们首先使用创建一个新的 React 项目；
npx create-react-app react-ve-mapboxgl
创建我们的项目后，让我们进入我们的项目文件夹并安装 Mapbox GL；
cd react-ve-mapboxgl
npm 安装 mapbox-gl
Mapbox GL 集成
在完成我们库的安装过程之后，我们已经到了将我们的库集成到我们的 React 项目中并使用它的阶段。
首先，让我们运行我们的 React 应用程序
npm 开始
运行我们的应用程序后，我们立即开始了我们的项目。 ** 源代码** 文件夹 在下面 ** 应用程序.js** ve ** 应用程序.css** 我们在文件中删除；
App.js ve App.css Dosyaları
在您执行删除操作后，我们 ** 应用程序.js** 我们有必要将它集成到我们的文件中。 我们的 API 密钥 让我们设置；
这个阶段需要我们的 API Key， 地图盒 我们可以通过在 的网站上注册免费获得它。
API Anahtarı Entegrasyonu
如果您愿意，您的 API 密钥 ** .env** 您还可以通过将其保存在文件中来将其用作环境变量。
创建地图框
现在我们已经完成了必要的材料，我们可以创建我们的地图。此时，我们需要一个可以放置地图的容器。
为此，我们创建了一个名为 mapContainer 的 ref 值。
_常量_ mapContainer = useRef(null);
然后我在我的应用程序中创建一个 div 对象，我可以在其中放置我的地图。创建它之后，我们抛出我们的 mapContainer ref 值以访问我们的对象。
<div _班级名称_ ="地图容器" _参考_ ={mapContainer} />
Mapbox Container’ının Oluşturulması
接下来，我们创建地图所需的 ref 值，然后创建地图。在这部分，还有我们地图的一些配置（样式、缩放、中心等）值。
_常量_ 地图 = useRef(null); 使用效果（（）=> { 如果（map.current）返回； _// 为了加载一次地图_ map.current = new mapboxgl.Map({ 容器：mapContainer.current， 风格：“mapbox://styles/mapbox/streets-v11”， }); });
Mapbox’ın Oluşturulması
Mapbox GL 风格化
经过这些过程，我们得到了我们想要的，但它看起来不太美观，因为我们不做任何设计过程。为此，我们将使用 Mapbox 提供给我们的设计作为标准。
首先，我们将一个 css 文件集成到我们的 App.js 文件中，用于 Mapbox 自己的水印和我们创建的容器。
导入“mapbox-gl/dist/mapbox-gl.css”；
在那之后，我们对我们的 App.css 文件进行微小的更改，并将我们的地图在用户的屏幕上居中。
_。应用程序_ { 显示：弯曲； 高度：100vh； 对齐项目：居中； 证明内容：中心； 背景颜色：#121212； } _.map 容器_ { 宽度：50vw； 高度：50vh； 边框半径：5px； }
由于这些，我们的地图开始看起来更悦目。
Mapbox 为我们提供 标准地图视图 最后，我们通过选择我们最喜欢的一个来改变地图的样式；
map.current = new mapboxgl.Map({ 容器：mapContainer.current， 样式：“mapbox://styles/mapbox/light-v10”， });
地图框配置
现在，我们将自定义我们已经创建的精彩地图并进行一些配置设置，以便它以集中的方式打开。
首先，我们创建3个状态值，它们将存储我们想要关注的点的坐标值和我们地图的缩放级别。
_常量_ [lng, setLng] = useState(32.836956); _常量_ [lat, setLat] = useState(39.925018); _常量_ [缩放，setZoom] = useState(14);
然后我们定义我们创建的经度、纬度和缩放值作为我们地图的中心点。我们按原样定义缩放值。
map.current = new mapboxgl.Map({ 容器：mapContainer.current， 样式：“mapbox://styles/mapbox/light-v10”， 中心：[lng，lat]， 飞涨， });
由于我们进行了这些自定义，我们的地图以独特的外观欢迎我们。
资源：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
