gatsby

Get ready for the summer by building your own road trip mapping app with this step-by-step guide!

通过此逐步指南，构建自己的公路旅行地图应用，为夏天做好准备！

  • What are we going to build?

    我们要建造什么？

  • What do we need before we get started?

    开始之前需要什么？

  • Step 1: Cleaning up some unneeded code

    第1步：清理一些不需要的代码

  • Step 2: Create our road trip locations

    步骤2：建立公路旅行地点

  • Step 3: Prepare our app with some functions

    步骤3：为我们的应用准备一些功能

  • Step 4: Building our trip path

    步骤4：建立行程

  • Step 5: Styling our map components

    第5步：设置地图组件的样式

  • Want to learn more about maps?

    想更多地了解地图？

Author’s Note: Even though we’re going through some challenging times, we can still be optimistic that we’ll get through this together and be able to enjoy our summer. Stay safe and wash your hands. ❤️

作者的注释：即使我们正在经历一些艰难的时期，我们仍然很乐观，因为我们会一起度过难关并能够享受我们的夏天。 保持安全并洗手。 ❤️

我们要建造什么？ (What are we going to build?)

We’ll be walking through building a new mapping app that shows a route representing the trip. Each location will have a little card where we can add a picture and some things we did.

我们将逐步构建一个新的地图应用程序，该应用程序显示代表行程的路线。 每个位置都会有一张小卡片，我们可以在其中添加图片和所做的一些事情。

To get started, we’re going to use this Leaflet Gatsby Starter I created to make the initial setup a little smoother. With our app bootstrapped, we’ll create our list of locations and use Leaflet’s API to draw our route on the map.

首先，我们将使用我创建的Leaflet Gatsby Starter来简化初始设置。 引导我们的应用程序后，我们将创建位置列表并使用Leaflet的API在地图上绘制路线。

哇，地图应用？ (Woah, a mapping app?)

Yup. If you haven’t played with maps before, don’t be discouraged! It's not as bad as you probably think. If you’d rather start with mapping basics, you can read more about how mapping works first.

对。 如果您以前从未玩过地图，请不要气!！ 它并不像您想象的那么糟糕。 如果您想开始使用映射基础知识，则可以阅读有关映射如何首先工作的更多信息 。

开始之前需要什么？ (What do we need before we get started?)

If you followed along with my last tutorial for building a Santa Tracker, you can follow the same steps to get started. If not, we’ll want to make sure we have the following set up:

如果您遵循了我的上一本有关构建Santa Tracker的教程，则可以按照相同的步骤开始。 如果没有，我们将确保我们进行以下设置：

  • node or yarn - I'll be using yarn, but you can substitute with npm where appropriate

    节点或毛线 -我将使用毛线，但是您可以在适当的地方用npm代替

  • Gatsby’s CLI - yarn global add gatsby-cli

    盖茨比(Gatsby)的CLI - yarn global add gatsby-cli

If you’re not sure about one of the above items, you can try checking out the beginning of my previous tutorial.

如果您不确定上述项目之一，可以尝试查看上一教程的开头。

We’ll also want to set up a foundation for our map. We can do this by utilizing the Leaflet Gatsby Starter I put together that provides us a basic setup with Leaflet and React Leaflet.

我们还想为我们的地图建立基础。 我们可以利用我组合在一起的Leaflet Gatsby Starter来做到这一点，它为我们提供了Leaflet和React Leaflet的基本设置。

gatsby new my-road-trip https://github.com/colbyfayock/gatsby-starter-leaflet

After that’s finished running, you can navigate to the newly created project directory and start your local development server:

完成运行后，您可以导航到新创建的项目目录并启动本地开发服务器：

cd my-road-trip
yarn develop

If all goes as planned, your server should start and you should now be able to see your basic mapping app in your browser!

如果一切按计划进行，则服务器将启动，您现在应该可以在浏览器中看到基本的地图应用程序！

步骤1：清理一些不需要的代码 (Step 1: Cleaning up some unneeded code)

The Gatsby Starter we're using to spin up this app comes with some demo code that we don’t need here. We’ll want to make all of the changes below in the file src/pages/index.js, which is the homepage of our app.

我们用来启动该应用程序的Gatsby Starter附带了一些此处不需要的演示代码。 我们要在文件src/pages/index.js以下所有更改，这是我们应用程序的主页。

First, let’s remove everything from the mapEffect function. This function is used to run code that fires when the map renders.

首先，让我们从mapEffect函数中删除所有内容。 此函数用于运行在地图渲染时触发的代码。

// In src/pages/index.jsasync function mapEffect({ leafletElement } = {}) {// Get rid of everything in here
}

Next, we don’t want a marker this time, so let’s remove the <Marker component from our <Map component:

接下来，我们这次不想要标记，因此让我们从<Map组件中删除<Marker组件：

<Map {…mapSettings} />

Now that we have those pieces cleared out, we can remove all of the following imports and variables from the top of our file:

现在，我们已经清除了这些部分，可以从文件顶部删除以下所有导入和变量：

  • useRefuseRef
  • Marker记号笔
  • promiseToFlyTopromiseToFlyTo
  • getCurrentLocationgetCurrentLocation
  • gatsby_astronautgatsby_astronaut
  • timeToZoomtimeToZoom
  • timeToOpenPopupAfterZoomtimeToOpenPopupAfterZoom
  • timeToUpdatePopupAfterZoomtimeToUpdatePopupAfterZoom
  • ZOOM放大
  • popupContentHellopopupContentHello
  • popupContentGatsbypopupContentGatsby
  • markerRefmarkerRef

After, our map should still work, but not do anything.

之后，我们的地图应该仍然有效，但是什么也没做。

Follow along with the commit

跟着提交

步骤2：建立公路旅行地点 (Step 2: Create our road trip locations)

This step will involve preparing our location data that will populate our road trip app. Our locations will include properties like a name, date, things we did, and a picture if we want.

此步骤将涉及准备将填充我们的公路旅行应用程序的位置数据。 我们的位置将包括属性，例如名称，日期，我们做的事情，以及如果需要的图片。

First, create a new file in the src/data directory called locations.js.  Inside of that file, we want to create and export a new array.

首先，在src/data目录中创建一个名为locations.js的新文件。 在该文件内部，我们要创建和导出一个新数组。

export const locations = [{placename: ‘Herndon, VA’,date: ‘August 1, 2015’,location: {lat: 38.958988,lng: -77.417320},todo: [‘Where we start! 												


											

gatsby_如何使用Gatsby和Leaflet创建夏季公路旅行地图绘制应用程序相关推荐
	

    
								
  1. 使用Leaflet创建地图拓扑图
		
    为什么80%的码农都做不了架构师?>>>    之前我们采用过 Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一个古老项目,略显臃肿,对于现代的前 ...
    
		
    2. 
						
  2. R语言层次聚类（hierarchical clustering）：使用scale函数进行特征缩放、hclust包层次聚类（创建距离矩阵、聚类、绘制树状图dendrogram，在树状图上绘制红色矩形框）
		
    R语言层次聚类(hierarchical clustering):使用scale函数进行特征缩放.hclust包层次聚类(创建距离矩阵.聚类.绘制树状图dendrogram,在树状图上绘制红色矩形框) ...
    
		
    3. 
						
  3. linux java services_在 Linux 上创建第一个 Service Fabric Java 应用程序
		
    先决条件 开始之前,请安装 Service Fabric SDK.Azure CLI,并在 Linux 开发环境中设置开发群集. 如果使用 Mac OS X,则可使用 Vagrant 在虚拟机中设置  ...
    
		
    4. 
						
  4. Electron - 创建跨平台的桌面客户的应用程序
		
    Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,并用于在 ...
    
		
    5. 
						
  5. 用 Visual Studio Code 在 macOS 上创建首个 ASP.NET Core 应用程序
		
    原文:Your First ASP.NET Core Application on a Mac Using Visual Studio Code 作者:Daniel Roth.Steve Smith  ...
    
		
    6. 
						
  6. 可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK...
		
    LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SD ...
    
		
    7. 
						
  7. Docker初学者指南-如何创建您的第一个Docker应用程序
		
    您是一名开发人员,并且想要开始使用Docker? 本文是为您准备的. (You are a developer and you want to start with Docker? This arti ...
    
		
    8. 
						
  8. 移动设备应用程序开发入门一:创建用于设备的 Windows 窗体应用程序并打包进行部署...
		
    目标:了解如何使用 Visual C# 创建一个简单的 Hello World 应用程序,该应用程序可在 Pocket PC 上运行. 了解如何为应用程序创建随后可部署到智能设备上的 .cab 文件. ...
    
		
    9. 
						
  9. 使用VS 2019，.NET Core 3和Web API创建ASP.NET Core Blazor CRUD应用程序
		
    目录 介绍 Blazor Blazor客户端应用程序 Blazor服务器应用程序 背景 先决条件 使用代码 第1步-创建数据库和表 第2步-创建ASP.NET Core Blazor服务器应用程序 运 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. PostgreSQL索引探究
		
    2. 
						
  2. 如何加快Vivado的编译速度
		
    3. 
						
  3. Go语言 命令行解析（一）
		
    4. 
						
  4. android+六边形布局,android – 带六边形触摸区域的六角形按钮
		
    5. 
						
  5. C语言入门基础——Brute-Force算法
		
    6. 
						
  6. 数据结构与算法 相关经典书籍推荐
		
    7. 
						
  7. 单目标跟踪、多目标跟踪、单目标跟踪发展现状、多目标跟踪发展现状
		
    8. 
						
  8. linux ntfs u盘启动盘,u盘NTFS格式制作PE+CDlinux+ubuntu多系统启动盘
		
    9. 
						
  9. openwrt添加USB网卡驱动（SIERRA）
		
    10. 
						
  10. 1006 换个格式输出整数
		
    11. 
						
  11. 动作游戏设计三部曲 之一 交互至上
		
    12. 
						
  12. 漏洞修复：javascript框架库漏洞
		
    13. 
						
  13. 一道被前端忽略的基础题，不信看你会几题
		
    14. 
						
  14. js 格式化prettier配置_Prettier 代码格式化插件 -- 配置翻译
		
    15. 
						
  15. 晨曦 -  江湖一剑客
		
    16. 
						
  16. mySql 修改字段属性
		
    17. 
						
  17. 电脑重装系统可能会遇到的几个问题
		
    18. 
						
  18. 联想小新Air14 指纹解锁突然失效
		
    19. 
						
  19. [prometheus]Step6-prometheus使用钉钉告警
		
    20. 
						
  20. where 空集_为什么 ZF 公理系统要包含空集定理？
		
    21. 
		

	


热门文章
	

    
									
  1. sketchup 255个su常用插件)_SketchUp领域的知乎，有胆来问！
			
    2. 
						
  2. 【web】从数据库读取多条数据到前台
			
    3. 
						
  3. iOS SwiftUI篇-5 专题NavigationView、NavigationLink
			
    4. 
						
  4. a标签onclick事件解析
			
    5. 
						
  5. iOS直播（三）GPUImage音视频采集并写入文件
			
    6. 
						
  6. APP转让时提示：您必须移除要转让的 App 的所有构建版本和测试员,并清除“测试信息”下的所有信息
			
    7. 
						
  7. 【iOS】自定义控件入门:可拖动的环形进度
			
    8. 
						
  8. Java中的策略模式实例教程
			
    9. 
						
  9. ReferenceQueue的使用
			
    10. 
						
  10. Linux 启动过程详解
			
    11.