openlayers使用——ol地图上标注

因为近期在使用openlayers,记录下比较常见的地图标注的用法。

下面是在地图上标注图片的方法。data为经纬度数据,例如 :[{longitude:116.40,latitude:39.90}](注:北京经纬度),url为图片url。

function(data,url){
			var features = [],
				feature,
				name; 
			data.forEach(v => {			
				feature = new Feature(new Point(ol_transform([v.longitude, v.latitude], 'EPSG:4326', 'EPSG:3857')));
				name = 'test';
				features.push(feature);
			});
			var clusterSource = new Cluster({
				distance: 40,
				source: new VectorSource({
					features: features
				})
			});
			var clusterLayer = new VectorLayer({
				source: clusterSource,
				name: name,
				id: name,
				zIndex: 10, 
				listen: true,
				style: new Style({
					image: new Icon({
						src: `${url}.png`, 
						scale: 0.1 
					})
				})
			});
			this.map.addLayer(clusterLayer);//map为所要标注的地图
		},

 

你可能感兴趣的:(新手)