问题描述
我尝试在Angular项目上使用地理编码形式的esri-leaflet库,但是我遇到导入类问题。
这是我的组件代码:
import { Component,OnInit,AfterViewInit,Type } from '@angular/core';
import { latLng,tileLayer,layerGroup,marker,Layer,Control,circle,polygon,Map } from 'leaflet';
import * as L from 'leaflet';
import * as esri from 'esri-leaflet';
import GeocodeService from 'esri-leaflet-geocoder/dist/esri-leaflet-geocoder';
@Component({
selector: 'abd-map',templateUrl: './abd-map.component.html',styleUrls: ['./abd-map.component.scss']
})
export class AbdMapComponent implements OnInit,AfterViewInit {
constructor() {}
ngOnInit(): void {
}
ngAfterViewInit(): void{
const openStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
const googleMap = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
maxZoom: 20,subdomains: ['mt0','mt1','mt2','mt3']
});
const map = L.map('map',{
center: [39.61,-105.02],zoom: 13,layers: [openStreetMap,googleMap]
});
const baseMaps = {
'openStreetMap': openStreetMap,'googleMap': googleMap
};
L.control.layers(baseMaps).addTo(map);
const searchControl = esri.Geocoding.geosearch().addTo(map);
}
}
当我运行“ ng serve”时,出现此错误:
./src/app/abd-map/abd-map.component.ts中的ERROR 41:30-44 “在'esri-leaflet'中找不到导出的'Geocoding'(导入为'esri')
有人可以帮助我吗? 谢谢。
解决方法
您应该导入:
import "leaflet/dist/leaflet.css";
import * as L from "leaflet";
import "esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css";
import "esri-leaflet-geocoder/dist/esri-leaflet-geocoder";
import * as ELG from "esri-leaflet-geocoder";
然后像这样初始化插件:
const searchControl = new ELG.Geosearch();
const results = new L.LayerGroup().addTo(map);
searchControl
.on("results",function (data) {
results.clearLayers();
for (let i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
}
})
.addTo(map);