Angular Leaflet 蔚蓝地图

Question

随着 Bing 地图的弃用，我想用 Azure 地图中的传单地图替换 Angular 应用程序中的 Bing 地图图层。我已经安装了azure-maps-leaflet库，它是一个纯JS库，但它确实包含一个带有index.d.ts文件的typings文件夹，看起来它是为了将js函数扩展到角度内的leaflet库中而设置的。然而，当我尝试以与 github 库中的 JS 示例类似的方式使用它时，如下所示：

import { Component, ElementRef, HostListener, OnInit} from '@angular/core';
import 'azure-maps-leaflet';
import { Map, Marker, FeatureGroup, featureGroup, LatLng, tileLayer, MapOptions, marker, latLng, TileLayer} from 'leaflet';

...
subscriptionKey = 'my-key';

this.hybridLayer = tileLayer.azureMaps({'authOptions': { 'authType': 'subscriptionKey', 'subscriptionKey': this.azuresubscriptionKey}, 'tilesetId': 'microsoft.base.hybrid'});

我收到此错误：

[错误] TS2339：类型“typeoftileLayer”上不存在属性“azureMaps”。 [插件角度编译器]

src/app/map/map.component.ts:742:33:
  742 │ ...is.hybridLayer = tileLayer.azureMaps({'authOptions': { 'authTy...

打字文件可以在https://github.com/Azure-Samples/azure-maps-leaflet/blob/main/typings/index.d.ts

找到

仅供参考，我没有使用“L”来引用传单。相反，我有一个typings.d.ts 文件，其中包含以下内容 从“传单”导入 * 作为 L； 声明模块“传单”{}

现在我可以只使用leaflet函数而不必使用L。例如，我不使用L.map，我只使用map。我想我需要修改typings文件夹中的index.d.ts以适应我引用传单的方式，但我不确定如何做。有什么建议吗？

在index.d.ts文件中，我尝试更改行： 从“传单”导入传单； 到 进口单张；

但这并没有改变错误的任何内容。

Answer 1

如果您计划仅使用订阅密钥进行身份验证（而不是 Microsoft Entra ID 或 SAS 令牌），则无需使用此库。只需使用传单中的图块图层即可直接从渲染服务中提取 Azure Maps 图块：https://learn.microsoft.com/en-us/rest/api/maps/render/get-map-tile?view =rest-maps-2024-04-01&tabs=HTTP