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

Question

我正在尝试使用 ngx-angular 在 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
    }
  };

这里是 guide on how to install ngx-leaflet-draw and here is a demo 现场观看。不要担心绘图图标不可见。在您的应用程序中应该没问题。跟codesandbox有关。

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

Why this ngx-leaflet params are not working properly?

leaflet

typescript

angular

ngx-leaflet

ngx-leaflet-draw