区域选择传单地图 Angular 9

【问题标题】：Area Select Leaflet Map Angular 9区域选择传单地图 Angular 9
【发布时间】：2020-09-11 22:13:19
【问题描述】：

我安装了leaflet-area-select (https://github.com/w8r/leaflet-area-select) 插件，但是当我定义选择区域时出现以下错误

我启动了npm install --save leaflet-area-select

在我添加的 angular.json 中

"scripts": [
   "node_modules/leaflet/dist/leaflet.js",
   "node_modules/leaflet-area-select/dist/Map.SelectArea.min.js",
   "node_modules/jquery/dist/jquery.min.js"
],

在代码中，我添加的说明如下：

import SelectArea from 'leaflet-area-select';
public map: L.map;
this.map = L.map('map', {
   center: [37.606655, 15.1606003],
   selectArea: true,
   zoom: 10
});
    
this.map.on('areaselected', (e) => {
   console.log(e.bounds.toBBoxString()); // lon, lat, lon, lat
});
    
this.map.selectArea.setCtrlKey(true);

似乎无法识别 SelectArea

如果我在行上移动鼠标， 'SelectArea' 已声明，但其值从未被读取出现

我该如何解决这个问题？

【问题讨论】：

标签： angular leaflet

【解决方案1】：

在识别类型时看起来像 TS 问题，或者您可以使用 RequireJS。所以安装节点类型npm install @types/node --save，然后在tsconfig文件中添加节点类型。

"types": [
      "node"
 ]

然后像 node require 一样使用它而不是 commonjs 样式

var L = require("leaflet")

否则如果你想坚持commonjs风格，那么你可以使用module aigmentation创建自己的.d.ts（定义文件）文件

declare module leaflet 
{       
}

然后像这样导入它，应该可以工作。

import * as L from 'leaflet'

最后你还需要在 tsconfig.json 中添加这个自定义类型路径才能使其工作。

"typeRoots": [ "./your_custom_type_folder_here", "./node_modules/@types"]

【讨论】：