【openlayers-3】加载图标

 

目录

1、通过overlay方式添加

2、通过overlay + css方式

3、通过Feature + style方式实现 

---

在OpenLayer3中添加图标有两种方式，一种是通过overlay方式，另一种是通过Feature + Style的方式。 

1、通过overlay方式添加

2、通过overlay + css方式添加

实现代码和上述方式一致，在body中添加style。

为image添加id：

3、通过Feature + style方式添加

// 我们需要一个vector的layer来放置图标
var layer = new ol.layer.Vector({
  source: new ol.source.Vector()
})

var url = 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}';

var map = new ol.Map({
  // 设置地图图层
  layers: [
	new ol.layer.Tile({ source: new ol.source.XYZ({ url: url }) }),
	layer    
  ],
  // 设置显示地图的视图
  view: new ol.View({
	center: [117.23, 36.43],
	zoom: 10,
	projection: 'EPSG:4326'//设置坐标系，地图本身3857坐标系，即横轴墨卡托投影，因为中心点用的度，所以设置成wgs84代号是4326
  }),
  // 让id为map的div作为地图的容器
  target: 'mapCon',
});

// 创建一个Feature，并设置好在地图上的位置
var anchor = new ol.Feature({
  geometry: new ol.geom.Point([117.5, 36.8])
});
// 设置样式，在样式中就可以设置图标
anchor.setStyle(new ol.style.Style({
  image: new ol.style.Icon({
	src: '../testdata/1.png'
  })
}));
// 添加到之前的创建的layer中去
layer.getSource().addFeature(anchor);

 

效果与1一样，但实现代码不一样：
overlay需要HTML元素img，但这种方式不需要;
overlay是添加在map上的，但是这种方式需要一个Vector的layer，并添加在其上，没有办法像overlay那样使用一些HTML技术。

根据层级放大缩小图标：

// 监听地图层级变化
map.getView().on('change:resolution', function(){
	var style = anchor.getStyle();
	// 重新设置图标的缩放率，基于层级10来做缩放
	style.getImage().setScale(this.getZoom() / 10);
	anchor.setStyle(style);
})

 设置字体格式：

// 设置文字style
anchor.setStyle(new ol.style.Style({
  text: new ol.style.Text({
	// font: '10px sans-serif' 默认这个字体，可以修改成其他的，格式和css的字体设置一样
	text: '学习cesium',
	fill: new ol.style.Fill({
		color: 'red'
	})
  })
}));