打开 Layers 5.3.0 项目，Point 自定义问题

Question

我正在学习 openstreetmaps 和 openlayers。我从应用程序方法 (Parcel + openlayers) 开始。您在这里找到的大多数可能对我有帮助的示例都与旧代码一起使用，据我所知，这些代码不支持所有功能，例如集群和其他内容。我尝试了它们，但无法使其在新环境中工作（因为它不仅仅是复制过去）。我的问题相对简单，我想用 [Points][1] 自定义功能，文档说我可以通过 [setStyle][2] 设置它们的样式，它们也有实际工作的示例。我使用该示例开始，但无论我在其中描述什么样式，我都看不到地图上的新点，并且在 Parsel 或浏览器控制台中存在 none 任何错误。如果我不使用 setStyle，我会在地图上看到我的观点。我尝试了不同的方式来设置样式，但其中 none 确实对我有用。

我是这样做的，首先我设置了样式：

var iconStyle = new Style({ fill: 'red' }); 之后我将点添加到特征数组中

features.push( new Feature({ geometry: new Point(coordinates), address: 'Адрес точки 2', ordererName: 'Имя человека 2', }) ); 然后我为一个点设置了样式：

features[1].setStyle(iconStyle);

并将所有这些放入地图中：

var source = new VectorSource({
        features: features
    });

    var vectorLayer = new VectorLayer({
        source: source
    });

    var raster = new TileLayer({
        source: new OSM()
    });

    //EPSG:3857 - web
    //EPSG:4326 - GPS
    var map = new Map({
        layers: [
            raster, 
            //source,
            //clusters, 
            vectorLayer
        ],
        target: 'map',
        view: new View({
            center: transform(map_center, 'EPSG:4326', 'EPSG:3857'),
            zoom: 13
        })
    });

所以我的问题是如何为一个点设置样式并在地图上实际看到？如果您还能够建议如何在地图上单击在之后添加这样的自定义点，您将创建一个包含图层和点的地图，这是非常受欢迎的。提前致谢。

Answer 1

您的样式设置不完整，要显示一个点，您需要将其样式设置为图像，例如红色实心圆

  var iconStyle = new Style({
    image: new CircleStyle({
      radius: 10,
      fill: new Fill({
        color: 'red'
      })
    })
  });

如果在创建地图后添加要素，它可能如下所示：

map.on('click', function(event) {
  var feature = new Feature({
    geometry: new Point(event.coordinate)
    ...
    ...
  });
  feature.setStyle(...);
  source.addFeature(feature);
});

打开 Layers 5.3.0 项目，Point 自定义问题

Open Layers 5.3.0 project, problem with Point customization

openlayers-5