我使用Angular CLI构建了一个非常基本的应用程序。当我使用ng serve -o
构建并运行应用程序时,一切都成功构建。但是,当我在Chrome中查看应用程序时,地图部分无法加载。进一步检查页面我在控制台中看到了这个错误。
ERROR TypeError: Cannot read property 'basemapLayer' of undefined
这些步骤假设您已经安装了angular CLI。
步骤1-6& 10在终端/ cmd提示窗口中完成
ng new esriLeafletApp
cd esriLeafletApp
npm install --save leaflet
npm install --save esri-leaflet
npm install --save @types/esri-leaflet
npm install --save @types/leaflet
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);
}
}

<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
<div id="map"></div>
&#13;
更新 app.component.css 文件的内容
#map {
height: 500px;
width: 100%;
}
&#13;
构建并运行应用程序ng serve -o
是否有人知道代码块esri
中undefined
为L.esri.basemapLayer('Streets').addTo(map);
的原因以及我如何修复它?
答案 0 :(得分:0)
似乎问题在于esri-leaflet(@ types / esri-leaflet)的打字文件,而不是esri-leaflet本身。我在DefinitelyTyped github上打开了issue。
import * as esri from '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);
}
}