@acaisoft/angular-azure-maps 中文文档教程

Question

Angular Azure Maps

Angular 6 Azure Maps 是一个包装在 Angular

Samples

Getting Started

```节点 上的 MS Azure Map npm i @acaisoft/angular-azure-maps --save

Add to module:

ts @NgModule({ 进口：[AmModule]， 提供商：[LoadMapService]

[AzureMapDocumentation]<br>
First add this two line to your index.html:

html

```` 或使用我们的延迟加载

Lazy loading

// in component:
  key: string = '<YOUR-KEY>'

  constructor(public mapService: LoadMapService) {}

  ngOnInit() {
    // that will lazy loaded azure map script and styles
    this.mapService.load().toPromise().then(() => {
      atlas.setSubscriptionKey(this.key); // that inject your azure key
    })
  }

要控制地图，您必须使用

@ViewChild('maper') maper: AtlasMapComponent;

此 mapService 拥有 isLoaded 属性，因此您可以简单地使用它来了解地图何时加载在模板

<div *ngIf="mapService.isLoaded">
  <am-map #maper
    [_id]="'id'"
    [initialConfig]="config"
  </am-map>
 </div>

[_id] 中 - 它的 DOMElements id，！必要的！
[initialConfig] - 映射的初始配置

地图初始化。
您的配置应如下所示：

public config = {
    'zoom': 1.5,
    'center': [20,20]
    'interactive': true,
  };

其他配置选项：样式选项 | 用户交互选项 | 服务选项 | 相机选项

输出：

 <am-map #maper 
 (onMapClick)="getPos($event)" // Output emiting position
 (loaded)="loadedMap()"
 >

(onMapClick) - 它在点击时的发射位置
(loaded) - 当 AmComponent 被加载时发出，在它之后你可以添加数据：

mapLoaded() {
    // Check if ViewChild is correctly init
    if (this.maper && this.mapService.isLoaded) {
      // use that function to load sprites to map
      this.maper.map.events.add('load', (e) => {
        Promise.all([
          // Add sprite to map as icon
          this.maper.map.imageSprite.add('my-pin', '../../../assets/eye-crossed.svg'),
          this.maper.map.imageSprite.add('git', '../../../assets/github-small.svg')
        ]).then((e) => {
          this.isFirst = false;
          this.initPoint();
        })
      })
    } else {
      setTimeout(() => this.mapLoaded(), 400)
    }

  }

Add points to map this.maper.createPoints（特征：AmFeatures）
刷新点数 this.maper.updatePoints（特征：AmFeatures）
移除地图 `this.maper.removeMap() 或 this.maper.map.remove()

你的数据元素应该是 AmFeatures 类型：

interface AmFeature {
  dataElement: any; // Data element
  atlasFeature: atlas.data.Feature; // Map's features object
  layer: string; // Layer for different object
  pinConfig: PinLayerOptions;
}

在你的父组件中你必须创建你的数据。
首先创建地图功能 - 功能< /a> 简单点示例：

  dataPointsInit(data): atlas.data.Feature {
    const pos = new atlas.data.Position(data.localization.lnt, data.localization.lng);
    const point = new atlas.data.Point(pos);
    const feature = new atlas.data.Feature(point, {
      name: data.name,
      icon: 'none',
      type: data.type,
      title: data.name,
      cssClass: cssName //if you want custom pins !!Remeber to set icon: 'nope',
    });
    return feature;
  }

PinLaterOptions 示例：

  dataLayerOptions(item): PinLayerOptions {
    const pinOptions: PinLayerOptions = {
      name: item,
      cluster: false, // true if you want join points
      clusterIcon: 'pin-round-blue',
      textFont: 'SegoeUi-Bold',
      textOffset: [0, 17],
    };
    return pinOptions;
  }

并将其合并为 AmFeature 类型：

mergeDataPoint(data) {
    return {
      dataElement: data,
      atlasFeature: this.dataPointsInit(data),
      layer: data.type
      pinConfig: this.dataLayerOptions(data.type)
    }as AmFeature;
  }

Components

我们的 AtlasMapComponent 将创建您的地图画布，并添加您的地图元素以通过在其上添加的图钉进行映射。
还可以通过父组件 html 文件中的 atlas-popup 指令和 ng-template 在引脚上添加 PopUps：

<div class="container"  *ngIf="mapService.isLoaded">
  <am-map #maper
          [initialConfig]="config"
          [_id]="'id'"
          (onMapClick)="getPos($event)"
  (loaded)="mapLoaded()">


    <ng-template amPopup
                 let-dataElement="dataElement">
      <div [ngSwitch]="dataElement.type">
        <div *ngSwitchCase="'DataCenter'" class="dc_container">
          <div class="name">{{ dataElement.name}}</div>
          <div class="status" [ngStyle]="{'color':dataElement.status === 'Online' ? 'blue' : 'red'}"> {{ dataElement.status }}</div>
        </div>
        <div *ngSwitchCase="'Office'" class="office_container">
          <div class="name">{{ dataElement.name}}</div>
        </div></div>
    </ng-template>

  </am-map>
</div>

[AzureMapDocumentation]：https ://docs.microsoft.com/pl-pl/javascript/api/azure-maps-javascript/ ?view=azure-iot-typescript-最新版本