angular使用高德地图_使用传单在Angular中构建地图，第1部分：生成地图

angular使用高德地图

Leaflet is an awesome JavaScript library for creating maps. It comes packed with nice features and is extremely mobile-friendly. Let’s see how we can integrate Leaflet into our Angular app.

Leaflet是一个很棒JavaScript库，用于创建地图。它具有不错的功能，并且非常适合移动设备使用。让我们看看如何将Leaflet集成到Angular应用中。

建立 (Setup)

Before we begin, let’s first create a project using Angular schematics:

在开始之前，我们首先使用Angular示意图创建一个项目：

$ ng new leaflet-example

For this tutorial I’ll be using SCSS as my stylesheet syntax, but you can choose your favorite flavor.

对于本教程，我将使用SCSS作为样式表语法，但是您可以选择自己喜欢的样式。

Once the CLI has finished generating the project, open up your package.json file and add the following dependency and run npm install:

CLI完成生成项目后，打开您的package.json文件并添加以下依赖项并运行npm install ：

package.json

"leaflet": "1.5.1"

(At the time of writing this, the latest version of leaflet is 1.5.1)

(在撰写本文时，最新版本的传单为1.5.1)

Let’s add a map component that will serve as our leaflet map container. Navigate to src/app and type:

让我们添加一个地图组件，它将用作我们的传单地图容器。导航到src/app并输入：

$ ng generate component map

We’re going to be building a few services as well so create a folder for that called _services in your app folder.

我们还将建立一些服务，因此在您的应用文件夹中为_services创建一个文件夹。

Ignoring the generated files, our directory structure should now have at least:

忽略生成的文件，我们的目录结构现在至少应具有：

leaflet-example
|_ node_modules/
|_ package.json
\_ src/
    \_ app/
        |_ app.module.ts
        |_ app.routing.ts
        |_ app.component.ts
        |_ app.component.html
        |_ app.component.scss
        |
        |_ map/
        |     |_ map.component.ts
        |     |_ map.component.html
        |     \_ map.component.scss
        |
        \_ _services/

Open up app.component.html, and replace everything inside it with our new component:

打开app.component.html ，然后用我们的新组件替换其中的所有内容：

app.component.html

<app-map></app-map>

生成地图 (Generating the Map)

Let’s first create a full-size map by constructing a simple skeleton:

首先，我们通过构造一个简单的骨架来创建完整尺寸的地图：

map.component.html

<div class="map-container">
  <div class="map-frame">
    <div id="map"></div>
  </div>
</div>

map.component.scss

.map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 30px;
}

.map-frame {
  border: 2px solid black;
  height: 100%;
}

#map {
  height: 100%;
}

We first have our outermost div that will position the map in the DOM, and then the innermost div will be the target for Leaflet’s script injection to produce the map. The id that we give it will be passed as an argument when we construct our Leaflet map.

我们首先有最外面的div ，它将在DOM中定位地图，然后最里面的div将成为Leaflet脚本注入以生成地图的目标。构造Leaflet映射时，我们给它的id将作为参数传递。

OK, the boring part’s done. Now we can start using Leaflet and construct our map.

好，无聊的部分就完成了。现在，我们可以开始使用Leaflet并构建地图。

Open up map.component.ts and import the Leaflet package:

打开map.component.ts并导入Leaflet包：

import * as L from 'leaflet';

We’ll also declare a variable for our map object, (creatively called map), and assign it as a new leaflet map object.

我们还将为我们的map对象声明一个变量(俗称map )，并将其分配为新的传单map对象。

Note that the map div needs to already exist on the DOM before we can reference it to create our map. So, we put this in the AfterViewInit lifecycle hook. Extend your component to implement AfterViewInit and add the ngAfterViewInit() function to your component.

请注意，在我们可以引用它来创建地图之前，地图div必须已经存在于DOM上。因此，我们将其放在AfterViewInit 生命周期hook中。扩展您的组件以实现AfterViewInit并将ngAfterViewInit()函数添加到您的组件中。

Our component should now look like this:

现在，我们的组件应如下所示：

import { AfterViewInit, Component } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements AfterViewInit {
  private map;

  constructor() { }

  ngAfterViewInit(): void {
  }
}

Looking good so far! Let’s create a separate private function called initMap() to isolate all the map initialization. We can then call it from ngAfterViewInit.

到目前为止看起来不错！让我们创建一个单独的私有函数initMap()以隔离所有地图初始化。然后我们可以从ngAfterViewInit调用它。

In this function, we need to create a new Leaflet map object, and the API allows us to define some options in it as well. Let’s start off simple and set the center of the map and starting zoom value.

在此功能中，我们需要创建一个新的Leaflet映射对象，并且API还允许我们在其中定义一些选项。让我们从简单开始，设置地图的中心和开始缩放值。

I want to center our map on the continental United States, and according to Wikipedia the center is located at 39.828175°N 98.579500°W.

我想将地图中心放在美国大陆上，根据Wikipedia所述，中心位于39.828175°N和98.579500°W。

The decimal coordinate system Leaflet uses assumes that anything to the west of the prime meridian will be a negative number, so our actual center coordinates will be [ 39.8282 -98.5795 ].

Leaflet使用的十进制坐标系统假定本初子午线以西的任何内容均为负数，因此我们的实际中心坐标为[39.8282 -98.5795]。

If we use a default zoom level as 3, then we can create our map, as:

如果我们将默认缩放级别设为3，则可以按以下方式创建地图：

private initMap(): void {
  this.map = L.map('map', {
    center: [ 39.8282, -98.5795 ],
    zoom: 3
  });
}

Note the value passed into the map function 'map' is referring to the id of the div where our map will be injected.

请注意，传递给地图函数'map'是指将在其中插入地图的div的ID。

Run npm start and navigate to http://localhost:4200 to see your shiny new map!

运行npm start并导航到http://localhost:4200以查看新的闪亮地图！

…Whoops, maybe not. Why? Well, we created our map object but we didn’t populate it with anything. With Leaflet, we visualize data as Layers. The kind of data you think of when you picture a map are called “tiles”. In brief, we create a new tile layer and add it to our map.

…哇，也许不是。为什么？好了，我们创建了地图对象，但是没有填充任何东西。使用Leaflet，我们可以将数据可视化为“图层”。您在绘制地图时想到的数据类型称为“平铺”。简而言之，我们创建一个新的图块层并将其添加到地图中。

We first create a new tile layer which we must first pass a tile server URL. There are many tile server providers out there, but I personally like using the OpenStreetMap tile server.

我们首先创建一个新的图块层，首先必须传递一个图块服务器URL。那里有很多平铺服务器提供商，但是我个人喜欢使用OpenStreetMap平铺服务器。

As with creating the map object, we can pass in a parameters object. Let’s go with setting the max zoom to 18, the min zoom to 3, and the attribution for the tiles. We cap it off by adding the tile layer to the map:

与创建地图对象一样，我们可以传入参数对象。让我们将最大缩放比例设置为18，将最小缩放比例设置为3，并指定图块的属性。我们通过在地图上添加平铺图层来对其进行加盖：

const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

tiles.addTo(this.map);

Let’s now take a look at our browser and see how our map it coming along:

现在让我们看一下我们的浏览器，看看我们的地图是如何出现的：

Well this is progress, at least. But why are the tiles so garbled? One thing we need to do when we include the Leaflet package into our project is to also include the Leaflet stylesheet into the build. There are several ways we can do this, but my personal favorite (if you’re using SCSS, that is) is to simply import it into your root styles.scss file.

好吧，至少这是进步。但是为什么瓷砖这么乱呢？将Leaflet包包含到项目中时，我们需要做的一件事就是也将Leaflet样式表包含到构建中。我们有几种方法可以做到这一点，但是我个人最喜欢的(如果您使用的是SCSS)是将其简单地导入您的根styles.scss文件中。

styles.scss

/* You can add global styles to this file, and also import other style files */
@import "~leaflet/dist/leaflet.css";

If you’re currently running npm start you will need to stop the process and restart so it refreshes the base stylesheet. Take a final look at the browser:

如果您当前正在运行npm start ，则需要停止该过程并重新启动，以便刷新基本样式表。最后看一下浏览器：

Looking good! You now have a map that you can drag around and zoom.

看起来不错！现在您有了一张可以拖动和缩放的地图。

In the next tutorial, I will show you how to add data and render it on top of your map.

在下一个教程中，我将向您展示如何添加数据并将其呈现在地图顶部。

Happy mapping!

祝您映射愉快！