将 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 版权协议,转载请附上原文出处链接和本声明
本文链接:https://www.qanswer.top/1492/02462916
标签:GL,创建,Mapbox,地图,React,mapbox,101,我们 From: https://www.cnblogs.com/amboke/p/16636288.html