openLayers2点聚合常用操作

1、地图初始化及响应事件

	map = new Geo.View2D.Map("mapContainerId", {   
		eventListeners: {
			'zoomend': zoomendF
		}
	})
	// 地图注册事件的另一种方式
	map.events.register('moveend', this, moveendF)
	
	// 基础图层
	let baseLayer = new OpenLayers.Layer('baseLayer', {
		maxResolution: (360 / 256) / Math.pow(2, 10),
	    minResolution: (360 / 256) / Math.pow(2, 19),
	    maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
	    displayInLayerSwitcher: false,
	    isBaseLayer: true,
    })
	map.addControl(new Geo.View2D.Control.MousePosition())
	map.addLayer(baseLayer)

2、点聚合、描点、点及聚合点自定义图标

	clusterLayer = new OpenLayers.Layer.Vector('clusterLayer', {
		strategis: [strategy],
		styleMap: new OpenLayers.StyleMap({
			default: style,
			select: {}
		})
	})
	for (let i = 0; i < list.length; i++) {
		let point3 = new Geo.Geometry.Point(list[i].lon, list[i].lat);
        let geometry = point3.clone();
        // 第二个参数，将点信息放到cluster的attributes属性中
        let pointFeature3 = new Geo.Feature.Vector(geometry, list[i]); 
	}
	// strategy定义
	let strategy = new Geo.Strategy.Cluster({
        distance: 40,
        active: true
    })
 	strategy.distance = 50 || strategy.distance;
 	strategy.threshold = 1 || strategy.threshold;

	// style定义
	style = new OpenLayers.Style({
		pointRadius: '${getPointRadius}',
		label: '${getLabel}',
		externalGraphic: '${getIcon}',   // 点、聚合点图标
		graphicHeight： '${getHeight}',  // 图标宽高，可根据实际情况处理
		graphicWidth: '${getWidth}'
		...
		其他属性
		...
	}， {
		context： {
			getPointRadius: function(feature) {
				let pix = 10;
                if (feature.cluster) {
                    pix = Math.min(feature.attributes.count, 7) + 10;
                }
                return pix;
			},
			getLabel: function(feature) {
				// 聚合点展示点个数，单个点则不展示
				return feature.attributes.count > 1 ? feature.attibutes.count : ''
			}，
			getIcon: function(feature) {
				if(feature.attributes.count > 1) {
					return '单个点图标路径'
				} else {
					return '聚合点图标'
				}
			}
		}
	})

3、鼠标悬浮展示弹窗

hoverSelect = new OpenLayers.Control.SelectFeature(clusterLayer, {
	hover: true,
	highlightOnly: true
})
map.addControl(hoverSelect)
hoverSelect.activate()
let popup = null
hoverSelect.events.on({
	'featurehighlighted': function(data){
		let {feature} = data
        if (feature.popup) {
             return
         }
		let content = '自定义内容'
		popup = new OpenLayers.Popup("chicken",
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(280, 140),
            content,
            null,
            true,
            onPopupClose
        )
        feature.popup = popup
        map.addPopup(popup)
	},
	'featureunhighlighted': function (event) {
         let feature = event.feature
         if (feature.popup) {
             map.removePopup(feature.popup);
             feature.popup.destroy()
             delete feature.popup
         }
         if (feature.attributes && feature.attributes.count == 1) {
             map.removePopup(popup)
         }
     }
})


function onPopupClose() {
	 hoverSelect.unselectAll()
}

4、鼠标点击展示弹窗

iSelect = new OpenLayers.Control.SelectFeature(clusterLayer, {
	 clickout: true,
     toggle: false,
     multiple: false,
     hover: false,
     toggleKey: "ctrlKey", // ctrl key removes from selection
     multipleKey: "shiftKey", // shift key adds to selection,
     box: false
})
map.addControl(hoverSelect)
iSelect.activate()
clusterLayer.events.on({
	featureselected: function(event) {
		 if (feature.popup) {
            map.removePopup(feature.popup);
             feature.popup.destroy();
             delete feature.popup;
         }
         // 打开弹窗，操作同上
	},
	featureunselected:  function() {
		// 关闭弹窗，操作同上
	}
})