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

Question

我正在尝试用Angular和ngx-angular在我的leaflet项目中尽可能地让所有的东西都能正常工作，但是我找不到方法让它们正常工作。

这是我的params代码：

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库能够实现您正在尝试的目标。

此处包含与组件上定义变量drawOptions相等的leafletDrawOptions：

<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有关。