如何使用地理門戶擴展 leaflet 在 map 上添加搜索欄

Question

我正在嘗試更新使用 leaflet 的 map。 我想添加一個地理搜索欄。 為此我安裝了這個擴展

geoportal-extensions-leaflet@2.2.2

現在我嘗試在 JS 中運行這段代碼。

    var searchCtrl = L.geoportalControl.SearchEngine({});
    this.map.addControl(searchCtrl);

TypeError: L.geoportalControl 未定義

L 指的是：

    const L = require('leaflet');

所以現在我的問題是：這個錯誤是否意味着我應該為 leaflet 地理門戶擴展做另一個“要求”？ 或者這是否意味着我錯誤地安裝了擴展程序或者我犯了其他錯誤？ 編輯：我誤解了如何導入庫，因為我只嘗試過像 codepen 這樣的導入不同的在線工具。

Answer 1

需要做的是同時導入 leaflet 和 geoportal-extensions-leaflet。

之后

npm i geoportal-extensions-leaflet

擴展的來源存在於內部

node_modules/geoportal-extensions-leaflet

該庫應使用以下方法在 JS 中導入：

const Gp = require('geoportal-extensions-leaflet');

這段代碼現在可以工作了，但我們應該參考 Gp 以訪問 geoportal-extensions-leaflet：

var searchCtrl = Gp.geoportalControl.SearchEngine({});
this.map.addControl(searchCtrl);