代码之家 › 专栏 › 技术社区 › Danie

如何在Angular中使用Azure地图

azure-maps angular

Danie · 技术社区 · 6 年前

我找不到在Angular中使用Azure地图的任何支持、模块或文档。

我尝试了以下模块但没有成功: https://www.npmjs.com/package/angular-azure-maps

我曾尝试过遵循微软在Azure地图文档中的说明(非角度),但没有成功。

我使用的是Angular版本5.2.9。

3 回复 | 直到 6 年前

rbrundritt 6 年前

Azure地图是相当新的,我们还没有机会研究我们自己(我是Azure地图上地图控件的程序经理)。这里有一个由社区发起的开源项目: https://github.com/Acaisoft/angular-azure-maps 我相信这是源代码库你正在尝试的npm。

我们确实计划在新的一年里研究如何使Azure地图更容易在Angular中使用,但很可能首先将其集成到现有的众多Angular地图库中。

我建议您提出一个功能请求,这样我们就可以跟踪它,其他人也可以在这里投票: https://feedback.azure.com/forums/909172-azure-maps

Vlad 5 年前

使用带有角度的Azure地图很容易。

首先,您需要安装npm包: npm i azure-maps-control --save .

angular.json 文件。将文件包含到 styles 和 scripts :

"styles": [
    "node_modules/azure-maps-control/dist/atlas.min.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/azure-maps-control/dist/atlas.min.js"
]

然后在组件中创建 ViewChild

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Map, AuthenticationType } from 'azure-maps-control';
import { environment } from '@environments/environment';

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

    @ViewChild('map', { static: true })
    public mapContainer: ElementRef;

    public ngAfterViewInit(): void {
        const map = new Map(this.mapContainer.nativeElement, {
            center: [50.016, 36.13],
            zoom: 8,
            authOptions: {
                authType: AuthenticationType.subscriptionKey,
                subscriptionKey: environment.azureMapsSubscriptionKey
            }
        });
    }
}

这是你的 map.component.html

<div #map></div>

Alexey 6 年前

我认为最好的方法是使用本地语言 azure-maps-control Azure Maps Web Control Samples .

以@角度测试:“^7.2.4”。

npm install azure-maps-control

Azure地图Web控件的TypeScript定义。

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

@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.scss']
})

export class MapsComponent implements OnInit {

  // Azure Active Directory Authentication Client ID
  // or Shared Key Authentication KEY
  // get it from portal.azure.com
  key: string = '{key}';
  map: any;

  constructor(
  ) {
  }

  ngOnInit() {
    //Initialize a map instance.
    this.map = new atlas.Map('mapContainer', {
      authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: this.key
      }
    });

    //Wait until the map resources are ready.
    this.map.events.add('ready', () => {
      //Create a HTML marker and add it to the map.
      this.map.markers.add(new atlas.HtmlMarker({
        color: 'DodgerBlue',
        text: '10',
        position: [0, 0]
      }));
    });
  }

}

地图.component.html
```
<div id="mapContainer"></div>
```

Community CDub 4 年前

除了@rbrundritt answer之外,我一直在尝试Acaisoft Azure地图库,而且,它充满了错误,从GitHub存储库链接的任何示例都无法工作。。。但我想我有个好消息 a Post, by Chris Pendleton,"Principal PM Manager, Azure Maps" ,谈到S1定价层,我发现

... 我们还将TypeScript定义与azuremapswebsdk源代码的副本相结合,并将其作为NPM包提供,从而使其更容易与现代Web框架集成,并为您提供了将azuremapswebsdk与应用程序本地托管的选项,以便更快地加载。你可以找到 Azure-Maps-Control 或者使用以下命令行安装它:

npm i azure地图控件

我尝试了这个库,但没有成功,同时Azure地图团队创建了适当的文档,并希望有一个操作指南,使之在我将继续使用传单和MapBox。

hxs 4 年前

@Vlad和@Alexey的答案非常有帮助,但我想为任何想使用 sample library Fuzzy Search with Services Module 以最小的调整必要的角度使用。

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import * as atlas from 'azure-maps-control';
import * as atlasRest from 'azure-maps-rest'; // install npm azure-maps-rest

@Component({
    selector: 'map',
    templateUrl: './map.component.html',
    styles: ['#map {height: 300px; width: 1110px;}']
    //Remember to set the dimensions of the map container or layers may appear
    //offset or behind the map.
})

export class MapComponent implements AfterViewInit {
    @ViewChild('input') public input: ElementRef;
    @ViewChild('mapContainer') public mapContainer: ElementRef;
    private key: string = '<Your Azure Maps Key>';
    public map: any;
    public dataSource: any;
    public popup: any;
    public searchURL: any;

    ngAfterViewInit(): void {
        this.map = new atlas.Map(this.mapContainer.nativeElement, {
            view: 'Auto',
            authOptions: {
                authType: atlas.AuthenticationType.subscriptionKey,
                subscriptionKey: this.key
            }
        });

        //Create a pipeline using the Azure Maps subscription key.
        var pipeline = atlasRest.MapsURL.newPipeline(new atlasRest.SubscriptionKeyCredential(atlas.getSubscriptionKey()));

        //Create an instance of the SearchURL client.
        this.searchURL = new atlasRest.SearchURL(pipeline);

        //Wait until the map resources are ready.
        this.map.events.add('ready', () => {

            // Add zoom control
            this.map.controls.add(new atlas.control.ZoomControl(), {
                position: 'bottom-left'
            });

            //Create a data source and add it to the map.
            this.dataSource = new atlas.source.DataSource();
            this.map.sources.add(this.dataSource);

            //Add a layer for rendering the results as symbols.
            var resultsLayer = new atlas.layer.SymbolLayer(this.dataSource);
            this.map.layers.add(resultsLayer);

            //Create a popup but leave it closed so we can update it and display it later.
            this.popup = new atlas.Popup({
                position: [0, 0],
                pixelOffset: [0, -18]
            });

            //Add a click event to the results symbol layer.
            //Remember to bind the event to 'this' or the this.popup and this.map
            //lines of the symbolClicked function will return undefined!
            this.map.events.add('click', resultsLayer, this.symbolClicked.bind(this));
        });
    }

    public closePopup(): void {
        this.popup.close();
    }

    public search(): void {
        var query = this.input.nativeElement.value;

        //Remove any previous results from the map.
        this.dataSource.clear();

        this.searchURL.searchFuzzy(atlasRest.Aborter.timeout(10000), query, {
            radius: 100000,
            view: 'Auto'
        }).then(results => {
            //Get the results in GeoJSON format and add it to the data source.
            var data = results.geojson.getFeatures();
            this.dataSource.add(data);

            //Set the camera to the bounds of the results.
            this.map.setCamera({
                bounds: data.bbox,
                padding: 40
            });
        });
    }

    public symbolClicked(e): void {
        //Make sure the event occurred on a point feature.
        if (e.shapes && e.shapes.length > 0 && e.shapes[0].getType() === 'Point') {
            var properties = e.shapes[0].getProperties();

            //Using the properties, create HTML to fill the popup with useful information.
            var html = ['<div style="padding:10px;"><span style="font-size:14px;font-weight:bold;">'];
            var addressInTitle = false;

            if (properties.type === 'POI' && properties.poi && properties.poi.name) {
                html.push(properties.poi.name);
            } else if (properties.address && properties.address.freeformAddress) {
                html.push(properties.address.freeformAddress);
                addressInTitle = true;
            }

            html.push('</span><br/>');

            if (!addressInTitle && properties.address && properties.address.freeformAddress) {
                html.push(properties.address.freeformAddress, '<br/>');
            }

            html.push('<b>Type: </b>', properties.type, '<br/>');

            if (properties.entityType) {
                html.push('<b>Entity Type: </b>', properties.entityType, '<br/>');
            }

            if (properties.type === 'POI' && properties.poi) {
                if (properties.poi.phone) {
                    html.push('<b>Phone: </b>', properties.poi.phone, '<br/>');
                }

                if (properties.poi.url) {
                    html.push('<b>URL: </b>', properties.poi.url, '<br/>');
                }

                if (properties.poi.classifications) {
                    html.push('<b>Classifications:</b><br/>');
                    for (var i = 0; i < properties.poi.classifications.length; i++) {
                        for (var j = 0; j < properties.poi.classifications[i].names.length; j++) {
                            html.push(' - ', properties.poi.classifications[i].names[j].name, '<br/>');
                        }
                    }
                }

            }

            html.push('</div>');
            
            //Set the popup options.
            this.popup.setOptions({
                //Update the content of the popup.
                content: html.join(''),

                //Update the position of the popup with the pins coordinate.
                position: e.shapes[0].getCoordinates()
            });

            //Open the popup.
            this.popup.open(this.map);
        }
    }
}

html将类似于:

<input type="search" #input>
<button (click)="search()">Search</button>

<div #mapContainer id="map"></div>

(注意:这个示例的目的是尽可能接近示例代码,以使比较更简单,但可以使用Angular和TypeScript约定进行改进)。

mda_lyon 4 年前

这就是我如何让Azure地图为sattelite视图工作的。

(只需导入,无需向imports数组添加任何内容)。

import 'leaflet';

const azureMapsUrl = `https://atlas.microsoft.com/map/imagery/png?api-version=1&style=satellite&zoom={z}&x={x}&y={y}&subscription-key=${myAzureMapsKey}`;
this.satelliteLayer = new L.TileLayer(azureMapsUrl);

然后我将图层添加到我的传单选项中:

this.leafletOptions = {
        zoomControl: false,
        minZoom: 6,
        layers: [this.satelliteLayer],
        zoom: 6,
        center: ...
};