如何在Angular 10中使用Azure地图?

Question

我到处寻找如何用Angular配置Azure Maps的合适文档，但没有找到任何东西。

我该怎么做?

Answer 1

由于没有关于用Angular配置Azure Maps的文档，本文将代替它。在本文结束时，你应该已经有了一个带有地图标记的Angular版本的Azure Maps。在添加任何代码之前，请按照Microsoft网站的步骤设置Azure Map密钥:https://learn.microsoft.com/en-us/azure/azure-maps/

创建Azure Maps组件的第一步是创建一个新的Angular组件，并将以下内容添加到.html文件中:

<div id="azure-map"></div>

id可以用来在.scss文件中对组件进行样式化。

接下来，我们将处理.ts文件。首先，让我们建立地图。我们将为地图和坐标添加以下类变量:

map: any;
defaultLat: number = 47.608013;  // Seattle coordinates
defaultLng: number = -122.335167;

和下面的输出将坐标发送到映射的父组件:

@Output() outputCoordinates: EventEmitter<number[]> = new EventEmitter<number[]>();

现在我们将创建一个名为InitMap()的函数，并在其中添加以下代码片段来初始化基本映射及其属性:

this.map = new atlas.Map('azure-map', {
center: [this.defaultLng, this.defaultLat],
zoom: 12,
language: 'en-US',
showLogo: true,
showFeedbackLink: false,
dragRotateInteraction: false,
authOptions: {
authType: AuthenticationType.subscriptionKey,
subscriptionKey: 'YOUR_SUBSCRIPTION_KEY_HERE'
}
});

接下来，我们将在InitMap()中添加以下代码片段，以注册地图单击处理程序和缩放控件:

this.map.events.add('ready', () => {
// Register the map click handler
this.map.events.add('click', (e) => {
this.outputCoordinates.emit([e.position[0], e.position[1]]); // 0 = longitude, 1 = latitude
});
//Construct a zoom control and add it to the map.
this.map.controls.add(new atlas.control.ZoomControl({
style: ControlStyle.auto,
zoomDelta: 1
}), {position: ControlPosition.BottomLeft});
});

我们必须在ngOnInit()中调用InitMap()函数

下一步是创建允许用户在地图上放置和移动大头针的功能。此函数将擦除地图上的当前标记，设置新标记的坐标，初始化标记拖动处理程序，并设置地图的边界以跟踪新放置的引脚标记。为了处理所有这些操作，我们将添加这个类变量:

markersReference: Marker[] = [];

和这个函数:

setMarkers(markers: Marker[]) {
if (markers && markers.length > 0) {
this.markersReference = markers;
this.map.markers.clear();
let boundsPositions: Array<{lng: number, lat:number}> = [];
for (let marker of markers) {
if (marker.latitude && marker.longitude) {
let htmlMarker = new atlas.HtmlMarker({
draggable: true,
position: [marker.longitude, marker.latitude]  // longitude first
});
// Register the marker drag handler
this.map.events.add('dragend', htmlMarker, (e) => {
var pos = htmlMarker.getOptions().position;
this.outputCoordinates.emit([pos[0], pos[1]]); // 0 = longitude, 1 = latitude
});
boundsPositions.push({lng: marker.longitude, lat: marker.latitude}) // lat, lng
this.map.markers.add(htmlMarker);
}
}
this.map.setCamera({padding: {top: 20, bottom: 20, left: 20, right: 20}, maxZoom: 16,
bounds: atlas.data.BoundingBox.fromLatLngs(boundsPositions)});
}

现在我们将添加一个函数，允许我们将地图焦点居中到掉落的引脚上:

centerMapWithCoords(lon: number, lat: number) {
this.map.setCamera({zoom: 12, maxZoom: 16, center: [lon, lat]});
}

最后，为了获取用户对地图所做的更改，我们将订阅地图主题及其标记。在类变量旁边添加这些输入:

@Input() markerDataSubject: Subject<Marker[]> = new Subject<Marker[]>();
@Input() centerMapSubject: Subject<{lng: number, lat: number}> = new Subject<{lng: number, lat: number}>();

接下来，将这些订阅添加到ngOnInit()中:

this.subscriptions.push((this.centerMapSubject).asObservable().subscribe((coords) =>
this.centerMapWithCoords(coords.lng, coords.lat)));
this.subscriptions.push((this.markerDataSubject).asObservable().subscribe((markers) =>
this.setMarkers(markers)));

并在组件关闭时取消订阅:

ngOnDestroy() {
for (const s of this.subscriptions) {
s.unsubscribe();
}
}

总的来说，.ts文件中的类应该类似于以下内容:

export class AzureMapComponent implements OnInit {
@Input() markerDataSubject: Subject<Marker[]> = new Subject<Marker[]>();
@Input() centerMapSubject: Subject<{lng: number, lat: number}> = new Subject<{lng: number, lat: number}>();
@Output() outputCoordinates: EventEmitter<number[]> = new EventEmitter<number[]>();
subscriptions: Subscription[] = [];
map: any;
markersReference: Marker[] = [];
defaultLat: number = 47.608013;  // Seattle coordinates
defaultLng: number = -122.335167;
ngOnInit() {
this.InitMap();
this.subscriptions.push((this.centerMapSubject).asObservable().subscribe((coords) =>
this.centerMapWithCoords(coords.lng, coords.lat)));
this.subscriptions.push((this.markerDataSubject).asObservable().subscribe((markers) =>
this.setMarkers(markers)));
}
//Create an instance of the map control and set some options.
InitMap() {
this.map = new atlas.Map('azure-map', {
center: [this.defaultLng, this.defaultLat],
zoom: 12,
language: 'en-US',
showLogo: true,
showFeedbackLink: false,
dragRotateInteraction: false,
authOptions: {
authType: AuthenticationType.subscriptionKey,
subscriptionKey: 'YOUR_SUBSCRIPTION_KEY_HERE'
}
});
this.map.events.add('ready', () => {
// Register the map click handler
this.map.events.add('click', (e) => {
this.outputCoordinates.emit([e.position[0], e.position[1]]); // 0 = longitude, 1 = latitude
});
//Construct a zoom control and add it to the map.
this.map.controls.add(new atlas.control.ZoomControl({
style: ControlStyle.auto,
zoomDelta: 1
}), {position: ControlPosition.BottomLeft});
});
}
setMarkers(markers: Marker[]) {
if (markers && markers.length > 0) {
this.markersReference = markers;
this.map.markers.clear();
let boundsPositions: Array<{lng: number, lat:number}> = [];
for (let marker of markers) {
if (marker.latitude && marker.longitude) {
let htmlMarker = new atlas.HtmlMarker({
draggable: true,
position: [marker.longitude, marker.latitude]  // longitude first
});
// Register the marker drag handler
this.map.events.add('dragend', htmlMarker, (e) => {
var pos = htmlMarker.getOptions().position;
this.outputCoordinates.emit([pos[0], pos[1]]); // 0 = longitude, 1 = latitude
});
boundsPositions.push({lng: marker.longitude, lat: marker.latitude}) // lat, lng
this.map.markers.add(htmlMarker);
}
}
this.map.setCamera({padding: {top: 20, bottom: 20, left: 20, right: 20}, maxZoom: 16,
bounds: atlas.data.BoundingBox.fromLatLngs(boundsPositions)});
}
}
centerMapWithCoords(lon: number, lat: number) {
this.map.setCamera({zoom: 12, maxZoom: 16, center: [lon, lat]});
}
ngOnDestroy() {
for (const s of this.subscriptions) {
s.unsubscribe();
}
}
}

现在你的Azure Maps组件已经完成了，你所要做的就是在你想要放置它的视图的.html中调用你的组件实例，并协调所需的输入和输出:

<app-azure-map
[markerDataSubject]="locationMarkerSubject"
[centerMapSubject]="centerMapSubject"
(outputCoordinates)="updateCoordinates($event)">
</app-azure-map>

父组件上的输入主题应该看起来像这样:

locationMarkerSubject: Subject<Marker[]> = new Subject<Marker[]>();
centerMapSubject: Subject<{lng: number, lat: number}> = new Subject<{lng: number, lat: number}>();

updateCoordinates()函数将处理在单击地图时从用户输入发回的标记数据。