为什么这个 ngx-leaflet 参数不能正常工作？

Question

我正在尝试在Angular 和ngx-angular 中的leaflet 项目中尽可能地完成所有工作，但找不到使它们正常工作的方法。

这是我的参数代码：

zoomControl = {position: 'bottomright'};

readonly drawOptions = {
position: 'topright',
draw: {
  circle: false,
  circlemarker: false
},
edit: {
  featureGroup: this.drawItems,
  remove: false
  }
};

正如您在此快照中所见，这不起作用，position 参数被忽略，circle and circlemarker 属性也被忽略。

当然，它们包含在具有ngx-leaflet 属性调用的div 映射标记中，我想知道是否有可能在不使用纯JS 的情况下使它们工作。

Answer 1

使用ngx-leaflet-draw 库可以实现您的目标。

在此处包含 leafletDrawOptions 以等于在您的组件上定义的变量 drawOptions：

<div
  leaflet
  style="height: 400px;"
  leafletDraw
  [leafletOptions]="options"
  [leafletDrawOptions]="drawOptions"
  (leafletDrawCreated)="onDrawCreated($event)"
>
  <div [leafletLayer]="drawnItems"></div>
</div>

在您的组件中，您可以定义哪些选项将是可见的，就像您在上面的示例中尝试的那样：

{
    position: "topleft",
    draw: {
      ...,
      polyline: false,
      circle: false,
      circlemarker: false,
      rectangle: {
        shapeOptions: {
          color: "#85bb65"
        }
      }
    },
    edit: {
      featureGroup: this.drawnItems,
      remove: false
    }
  };

这里是关于如何安装 ngx-leaflet-draw 的 guide 和这里是 demo 来观看它。不要担心绘图图标不可见。在您的应用程序中应该没问题。它与codesandbox有关。