1.作用:
聚簇類是用於前端顯示優化,使POI點要素顯示更為美觀。大量的Marker距離太近會引起壓蓋而對瀏覽或者操作產生不便,因此,一般在超過1K點的時候,用此類。、
2.使用方式:
1: // cluster layer that uses OpenLayers style clustering
2: clusterLayer = new ClusterLayer({
3: "data": photoInfo.data,
4: "distance": 100,
5: "id": "clusters",
6: "labelColor": "#fff",
7: "labelOffset": 10,
8: "resolution": map.extent.getWidth() / map.width,
9: "singleColor": "#888",
10: "maxSingles":1999,
11: "singleTemplate": popupTemplate
12: });
13: var defaultSym = new SimpleMarkerSymbol().setSize(4);
14: var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
15:
16: var picBaseUrl = "http://static.arcgis.com/images/Symbols/Shapes/";
17: var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
18: var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
19: var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
20: renderer.addBreak(0, 2, blue);
21: renderer.addBreak(2, 200, green);
22: renderer.addBreak(200, 1001, red);
23:
24: clusterLayer.setRenderer(renderer);
25: map.addLayer(clusterLayer);
構造函數源碼重點:
return declare([GraphicsLayer], {
constructor: function(options) {
// options:
// data: Object[]
// Array of objects. Required. Object are required to have properties named x, y and attributes. The x and y coordinates have to be numbers that represent a points coordinates.要素對象集合是必要字段。而要素是Json格式,有三個key,x,y,attributes,坐標值之外的屬性數據全部放在attributes字段里。
// distance: Number?
// Optional. The max number of pixels between points to group points in the same cluster. Default value is 50.該字段是設定兩點之間小於多少個像素值就被歸類於同一個簇中
默認值是50.
// labelColor: String?
// Optional. Hex string or array of rgba values used as the color for cluster labels. Default value is #fff (white).
// labelOffset: String?
// Optional. Number of pixels to shift a cluster label vertically. Defaults to -5 to align labels with circle symbols. Does not work in IE.
// resolution: Number
// Required. Width of a pixel in map coordinates. Example of how to calculate:
// map.extent.getWidth() / map.width
// showSingles: Boolean?
// Optional. Whether or graphics should be displayed when a cluster graphic is clicked. Default is true.
// singleSymbol: MarkerSymbol?
// Marker Symbol (picture or simple). Optional. Symbol to use for graphics that represent single points. Default is a small gray SimpleMarkerSymbol.
// singleTemplate: PopupTemplate?
// PopupTemplate</a>. Optional. Popup template used to format attributes for graphics that represent single points. Default shows all attributes as "attribute = value" (not recommended).
// maxSingles: Number?
// Optional. Threshold(閾值) for whether or not to show graphics for points in a cluster. Default is 1000.
// webmap: Boolean?
// Optional. Whether or not the map is from an ArcGIS.com webmap. Default is false.
// spatialReference: SpatialReference?
// Optional. Spatial reference for all graphics in the layer. This has to match the spatial reference of the map. Default is 102100. Omit this if the map uses basemaps in web mercator.
官方實例在這。點擊下載
