首页 > 其他分享 >将 Mapbox GL 与 React 101 一起使用

将 Mapbox GL 与 React 101 一起使用

时间:2022-08-29 16:15:21浏览次数:165  
标签:GL 创建 Mapbox 地图 React mapbox 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], 飞涨, });

由于我们进行了这些自定义,我们的地图以独特的外观欢迎我们。

资源:

https://docs.mapbox.com/

版权声明:本文为博主原创文章,遵循 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

相关文章

  • 在 React 中使用过滤器可扩展地管理表的状态
    在React中使用过滤器可扩展地管理表的状态不久前,我正在使用一个高度复杂的仪表板,该仪表板经常有很多表(典型的分页表),并且这些表有自己的过滤器,应用后,数据将被过滤和查看......
  • 如何在 React JS 中隐藏网站源代码?
    如何在ReactJS中隐藏网站源代码?“成长的关键是将更高维度的意识引入我们的意识。”老子最近我在使用React进行开发时遇到的问题是,当我打开控制台进行检查时,我导......
  • 在 React 中释放 Web 组件的力量
    在React中释放Web组件的力量Photoby法提赫on不飞溅假设您有一个项目,要求您在React应用程序中使用Web组件。你如何使用该组件的状态?如何访问它的方法和属......
  • react组件三大核心属性之一refs
    -ref让react更容易获取dom,和id比较像。只要在dom上定义ref属性,就可以在组件实例的this.refs中获取到对应的dom元素。字符串形式的refs<!DOCTYPEhtml><htmllang="en"......
  • 1012 The Best Rank (25分)
    ToevaluatetheperformanceofourfirstyearCSmajoredstudents,weconsidertheirgradesofthreecoursesonly: C -CProgrammingLanguage, M -Mathemat......
  • React报错之Parameter 'props' implicitly has an 'any' type
    正文从这开始~总览当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter'props'implicitlyhasan'any'type"错误。为了......
  • react18-学习笔记12-类class
    classAnimal{protectedname:string;staticage=18constructor(name:string){this.name=name}run(){return`${this.name}`......
  • react18-学习笔记13-类和接口
    interfaceRadio{switchRadio():void}interfaceBattery{checkBatteryStatus()}interfaceRadioWithBatteryextendsRadio{}classCarimplemen......
  • react18-学习笔记14-枚举(Enum)
    enumDirection{Up="Up",Down="Down",Left="Left",Right="Right"}console.log(Direction.Up)//0console.log(Direction[0])//Up//常量枚举可以......
  • react18-学习笔记15-泛型
    functionecho(arg:any):any{returnarg}constresult=echo(123)functionecho<T>(arg:T):T{returnarg}constresult1=echo(123)functionswap<T,U>(tu......