将自定义图像添加到天蓝色地图

Question

我将this wrapper 用于天蓝色地图库。我目前正在实现symbol layer，并且使用其中一个默认标记效果很好，但我无法添加自己的标记。我尝试在 mapReady 函数中添加自定义标记，但响应始终未定义且未添加图像。

这是我的组件：

import {Component, Input, OnInit} from '@angular/core';
import * as atlas from 'azure-maps-control';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  private markerImagePath = 'assets/images/map-marker.png';

  public dataSource: atlas.source.DataSource;
  markerDescription: 'marker';

  public options: atlas.IconOptions = {
    image: this.markerDescription
  };

  points = [
    [52.52437, 13.41053],
    [51.50853, -0.12574]
  ];

  ngOnInit() { }

  mapReady(map: atlas.Map) {
    map.imageSprite.add(this.markerDescription, this.markerImagePath).then(r => {
      console.log(r);
      console.log(map.imageSprite.getImageIds());
      this.dataSource = new atlas.source.DataSource('markers');
      this.points.forEach(p => {
        const point = new atlas.Shape(new atlas.data.Point([p[1], p[0]]));
        this.dataSource.add([point]);
      });
    });
  }
}

这是我的html：

<section>
  <div class="row">
    <div class="col-12 map-dimensions my-2 mx-auto" azure-map zoom="2"
         [dataSources]="[dataSource]" (onReady)="mapReady($event.map)">
    <map-symbol-layer dataSourceId="markers"
                      [iconOptions]="options"></map-symbol-layer>
    </div>
  </div>
</section>

我怀疑我错误地访问了地图数据...你们有谁知道，我如何将自定义图像添加到 imageSprites 以便我将其用作符号层中的标记？

Answer 1

您的代码看起来不错。 imageSprite.add 返回 Promise<void>，因此您的 console.log 将始终记录 undefined。你的图标可能是问题吗？我一直在尝试类似的解决方案，并且一切正常：

import { Component } from '@angular/core';
import * as atlas from 'azure-maps-control';

@Component({
  selector: 'app-root',
  template: '<azure-map zoom="2" [dataSources]="[dataSource]" (onReady)="mapReady($event.map)">' +
    '<map-symbol-layer [id]="blueLayerId" dataSourceId="blue" [iconOptions]="blueIconOptions"></map-symbol-layer>' +
    '</azure-map>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public dataSource: atlas.source.DataSource;

  public blueLayerId: string = "blueLayer";

  public blueIconOptions: atlas.IconOptions = {
    image: 'campground'
  };

  mapReady(map: atlas.Map) {
    map.imageSprite.add('campground', 'assets/campground.png').then(() => {
      this.dataSource = new atlas.source.DataSource('blue');
      for (let i = 0; i < 10; i++) {
        const point = new atlas.Shape(new atlas.data.Point([i * 5, i * 5]));
        this.dataSource.add([point]);
      }
    });
  }
}