错误类型错误：无法读取未定义的属性"底图图层"

Question

错误typeerror：无法读取未定义的

的属性'basemaplayer'

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

ERROR TypeError: Cannot read property 'basemapLayer' of undefined

设置

• Angular 4
• Chrome 61
• 传单1.2.0
• Esri-Leaflet 2.1.1
• 1.2的类型/传单
• 类型/ESRI-LEAFLET 2.1。

重现错误的步骤：

这些步骤假定您已经安装了角CLI。

步骤1-6＆amp;10在终端/CMD提示窗口

中完成

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的内容 file

<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（@type/esri-Leaflet）的打字文件，而不是与Esri-Leaflet本身。我已经在肯定的github上打开了一个问题。

解决方法：

• 从软件包中删除ESRI键入。JSON和NODE_MODULES
• 导入ESRI：import * as esri from 'esri-leaflet';
• 直接使用ESRI（即不是作为传单的延伸）。
• 仍然可以使用传单打字而没有问题。

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);
  }
}