如果您使用 Angular 11 来开发您的 ArcGIS-JS-API 应用程序,并且发现您的自定义弹出窗口模板无法显示内容,则可以遵循下面的步骤来解决这个问题。
import { loadModules } from 'esri-loader';
@Component({
...
})
export class MapComponent implements OnInit {
popupTemplate: any;
constructor() {
this.popupTemplate = {
title: '{Name}',
outFields: ['*'],
content: [{
type: 'fields',
fieldInfos: [{
fieldName: 'Type',
label: 'Type'
}]
}]
};
}
ngOnInit() {
loadModules([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer'
]).then(([Map, MapView, FeatureLayer]) => {
const map = new Map({
basemap: 'streets-navigation-vector'
});
const view = new MapView({
container: 'mapView',
map: map,
center: [-118.244, 34.052],
zoom: 13
});
const featureLayer = new FeatureLayer({
url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0',
outFields: ['*'],
popupTemplate: this.popupTemplate
});
map.add(featureLayer);
});
}
}
在这个例子中,我们定义了一个弹出窗口模板,并将其分配给 FeatureLayer 的 popupTemplate 属性。
在这个例子中,我们使用 Angular ESRI 组件来添加 Popup 组件。如果你没有使用 Angular ESRI,则需要手动添加 Popup 组件。