Question

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

我这样做，首先我设置样式：

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
        })
    });

所以我的问题是如何为点设置样式并在地图上实际看到？如果您还能提出如何在点击地图后之后添加这种自定义Point的建议，则可以创建一个包含图层和点的地图，这一点值得高度赞赏。预先感谢。

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);
});

Open Layers 5.3.0项目，Point定制问题

1 个答案: