ERROR TypeError: Cannot read property 'basemapLayer' of undefined

Question

错误类型错误：无法读取未定义的 属性 'basemapLayer'

我使用 Angular CLI 构建了一个非常基本的应用程序。当我构建并 运行 使用 ng serve -o 的应用程序时，一切都会成功构建。但是，当我在 Chrome 中查看应用程序时，地图部分未加载。进一步检查页面，我在控制台中看到此错误。

ERROR TypeError: Cannot read property 'basemapLayer' of undefined

设置

• Angular 4
• Chrome61
• 传单 1.2.0
• esri-传单 2.1.1
• types/leaflet 1.2
• types/esri-leaflet 2.1.

重现错误的步骤：

这些步骤假设您已经安装了 angular CLI。

步骤 1-6 和 10 在 terminal/cmd 提示 window

中完成

1. 创建新应用程序ng new esriLeafletApp
2. 导航到新应用程序cd esriLeafletApp
3. npm install --save leaflet
4. npm install --save esri-leaflet
5. npm install --save @types/esri-leaflet
6. npm install --save @types/leaflet
7. 更新app.component.ts文件的内容

import { Component, OnInit } from '@angular/core';

import * as L from 'leaflet';
import 'esri-leaflet';

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

export class AppComponent implements OnInit {
  title = 'app';

  constructor() { }

  ngOnInit () {
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.esri.basemapLayer('Streets').addTo(map);
  }
}

8. 更新app.component.html文件的内容

<div style="text-align:center">
    <h1>
       Welcome to {{title}}!
    </h1>
</div>
<div id="map"></div>

9. 更新app.component.css文件的内容

   #map {
     height: 500px;
     width: 100%;
   }
   

10. 构建并运行应用程序ng serve -o

11. 查看Chrome
中的申请
12. 检查代码并在检查器控制台中查看错误

请帮忙

有谁知道为什么 esri 在代码块 L.esri.basemapLayer('Streets').addTo(map); 中是 undefined 以及我该如何修复它？

Answer 1

问题似乎在于 esri-leaflet (@types/esri-leaflet) 的类型文件，而不是 esri-leaflet 本身。我在 DefinitelyTyped github.

上打开了一个 issue

解决方法：

• 从 package.json 和 node_modules
中删除 ESRI 类型
• 导入 esri：import * as esri from 'esri-leaflet';
• 直接使用 esri（即不作为 Leaflet 的扩展）。
• 仍然可以毫无问题地使用传单打字。

import { Component, OnInit } from '@angular/core';

import * as L from 'leaflet';
import * as esri from 'esri-leaflet';

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

export class AppComponent implements OnInit {
  title = 'app';

  constructor() { }

  ngOnInit () {
    const map = L.map('map', {
      maxZoom: 18,
      minZoom: 0
    }).setView([51.505, -0.09], 15);

    const esriLayer = esri.basemapLayer('Imagery');
    map.addLayer(esriLayer);
  }
}