还是用的上一篇文章的代码,新增了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);