1

我无法显示地图或使用 esri-leafleft 提供的搜索：这里是typsescript文件的代码。

import {  Component, OnInit } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
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 esri from "esri-leaflet-geocoder";

/*import * as esri from "esri-leaflet";*/ this one is not working i already installed it.




 @Component({
selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit{
  marker;
title = 'Events Management';
constructor() { }





ngOnInit(){

const apiKey = "I already have the key";

const basemapEnum = "ArcGIS:Navigation";

const map = L.map("map", {
  minZoom: 2

}).setView([-33.8688,151.2093], 14); // Sydney

L.esri.Vector.vectorBasemapLayer(basemapEnum, {
  apiKey: apiKey
}).addTo(map);



const searchControl = esri.Geocoding.geosearch({
  position: "topright",
  placeholder: "Enter an address or place e.g. 1 York St",
  useMapBounds: false,
  providers: [esri.Geocoding.arcgisOnlineProvider({
    apikey: apiKey,
    nearby: {
      lat: -33.8688,
      lng: 151.2093
    },
  })]
}).addTo(map);

const results = L.layerGroup().addTo(map);

searchControl.on("results", (data) => {
  results.clearLayers();
  for (let i = data.results.length - 1; i >= 0; i--) {
    const lngLatString = `${Math.round(data.results[i].latlng.lng * 100000)/100000}, ${Math.round(data.results[i].latlng.lat * 100000)/100000}`;
    const marker = L.marker(data.results[i].latlng);
    marker.bindPopup(`<b>${lngLatString}</b><p>${data.results[i].properties.LongLabel}</p>`)
    results.addLayer(marker);
    marker.openPopup();
  }
});
  }
}

错误类型错误：leaflet__WEBPACK_IMPORTED_MODULE_2__.esri 未定义 这是我在控制台中遇到的错误，我到处查看但一无所获，即使我只用 esri 更改了 L，它也不适用于 Vector 部分

4

1 回答 1

0

我不知道角度，但是您已经注释掉了导入 esri-leaflet 的位置：

/*import * as esri from "esri-leaflet";*/

您应该从 esri-geocoder 重命名您的导入，以免干扰您的 esri 导入：

import * as esri from "esri-leaflet"
import * as EsriGeocoder from "esri-leaflet-geocoder"

如果没有该 esri 导入，esri 对象将不会导入并附加到L，并且对任何内容的任何调用都L.esri将不起作用。

于 2021-02-07T06:12:38.850 回答