如何在 OpenLayers 中通过拖放添加自定义样式

Question

我想在使用拖放功能时使用带有开放图层的自定义样式。

我确实喜欢这个示例并且它有效，但我找不到添加自定义样式的方法。

这是我尝试过的。 （我使用的是 angular 11）

styles = [
    new Style({
      stroke: new Stroke({
        color: 'blue',
        width: 3,
      }),
      fill: new Fill({
        color: 'rgba(0, 0, 255, 0.1)',
      }),
    }),
    new Style({
      image: new CircleStyle({
        radius: 5,
        fill: new Fill({
          color: 'orange',
        }),
      }),
    }),
  ]

  // ...
   
  ngAfterViewInit() {
   this.map = new Map({
          interactions: defaultInteractions().extend([this.dragAndDropInteraction]),
          target: 'modal_map',
          layers: [
            new TileLayer({
              source: new OSM(),
              style: this.styles, // <-- tried to add it here but didn't worked
            }),
          ],
          view: this.view,
        })
      // ...
    }
  // ...

Answer 1

您需要在添加要素的图层上设置样式。 在链接的示例中，它会在这里

dragAndDropInteraction.on('addfeatures', function (event) {
  var vectorSource = new VectorSource({
    features: event.features,
  });
  map.addLayer(
    new VectorLayer({
      source: vectorSource,
      style: yourStyle,
    })
  );
  map.getView().fit(vectorSource.getExtent());
});