layer添加元素 openlayer_OpenLayer学习之聚合标注和信息框弹出

首先感觉我做的这个Demo是真的烂，查资料都没有多少，自己摸索着做出来，虽然比较烂，但是毕竟是一种思路

一、聚合图层的组成

1、Vector的source，这里面主要放feature，这个source不是直接加载到Vector图层中的source

for (var i = 0; i < dataSource.length; i++) {

var coordinate = ol.proj.transform([dataSource[i].x, dataSource[i].y], 'EPSG:4326', 'EPSG:3857');

var attr = {

attribute: dataSource[i].attribute

};

features[i] = new ol.Feature({

geometry: new ol.geom.Point(coordinate),

attribute: attr

});

}

console.log(features);

var source = new ol.source.Vector({

features: features,

});

2、声明ol.source.Cluster

var clusterSource = new ol.source.Cluster({

distance: 40,

source: source

});

注意这里source是上面ol.source.Vector

二、初始化聚合图层

//加载聚合标注的矢量图层

var styleCache = {};

var layerVetor = new ol.layer.Vector({

source: clusterSource,//注意一定不要搞错了

style: function (feature, resolution) {

var size = feature.get('features').length;

var style = styleCache[size];

if (!style) {

style = [new ol.style.Style({

image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({

anchor: [0.5, 60],

anchorOrigin: 'top-right',

anchorXUnits: 'fraction',

anchorYUnits: 'pixels',

offsetOrigin: 'top-right',

offset: [0, 1],//偏移量设置

scale: 0.2, //图标缩放比例

opacity: 0.75, //透明度

src: 'Script/Marker.png'//图标的url

})),

text: new ol.style.Text({

text: size.toString(),

fill: new ol.style.Fill({

color: 'blue'

})

})

})];

styleCache[size] = style;

}

return style;

}

});

var map = new ol.Map({

layers: [

new ol.layer.Tile({

source: new ol.source.OSM()

})

],

view: new ol.View({

center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),

zoom: 10

}),

target: 'map',

controls: ol.control.defaults().extend([

new ol.control.FullScreen(),

new ol.control.OverviewMap(),

new ol.control.Zoom(),

new ol.control.MousePosition()

]),

});

map.addLayer(layerVetor);

三、弹出框的设置

/**

* 实现popup的html元素

*/