Angular上的传单Esri地理编码未导入地理编码类

问题描述

我尝试在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: '&copy; <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);

Demo

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...