openlayers画点标记 (六)

还是用的上一篇文章的代码，新增了images目录放了一张图片

1. 新增点标记

创建2个要素

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point([121.5025,31.237015]),
});

var iconFeature2 = new ol.Feature({
  geometry: new ol.geom.Point([121.5025,31.247015]),
});

样式

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(({
    anchor: [0.5, 0.5], // 锚点 默认值为图片中心
    src: './images/icon.png', // 图标路径
  }))
});

将样式添加进要素里

iconFeature1.setStyle(iconStyle);
iconFeature2.setStyle(iconStyle);

创建矢量图层数据来源

var vectorSource = new ol.source.Vector({
  features: [iconFeature1, iconFeature2]
});

创建矢量图层

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

把矢量图层添加进地图

map.addLayer(vectorLayer);

查看效果

2. 删除点标记

删除标记，直接从矢量图层数据来源删除

vectorSource.removeFeature(iconFeature1);

3. 删除矢量图层

map.removeLayer(vectorLayer);

4. 改变样式

var iconStyle2 = new ol.style.Style({
  image: new ol.style.Icon(({
    anchor: [0.5, 0.5], // 锚点 默认值为图片中心
    src: './images/icon2.png', // 图标路径
  }))
});
iconFeature1.setStyle(iconStyle2);