arcgis api for javascript 点聚合
2018-03-23 16:05
609 查看
目录：
html代码：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Cluster</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ margin: 0; padding: 0; }
/* center the image in the popup */
.esriViewPopup .gallery { margin: 0 auto !important; }
</style>
<script>
// helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
// http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/ var dojoConfig = {
paths: {
extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
}
};
</script>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map;
require([
"dojo/parser",
"dojo/ready",
"dojo/_base/array",
"esri/Color",
"dojo/dom-style",
"dojo/query",
"esri/map",
"esri/request",
"esri/graphic",
"esri/geometry/Extent",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/renderers/ClassBreaksRenderer",
"esri/layers/GraphicsLayer",
"esri/SpatialReference",
"esri/dijit/PopupTemplate",
"esri/geometry/Point",
"esri/geometry/webMercatorUtils",
"extras/ClusterLayer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
parser, ready, arrayUtils, Color, domStyle, query,
Map, esriRequest, Graphic, Extent,
SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer,
GraphicsLayer, SpatialReference, PopupTemplate, Point, webMercatorUtils,
ClusterLayer
) {
ready(function() {
parser.parse();
var clusterLayer;
var popupOptions = {
"markerSymbol": new SimpleMarkerSymbol("circle", 20, null, new Color([0, 0, 0, 0.25])),
"marginLeft": "20",
"marginTop": "20"
};
map = new Map("map", {
basemap: "oceans",
center: [-117.789, 33.543],
zoom: 13
});
map.on("load", function() {
// hide the popup's ZoomTo link as it doesn't make sense for cluster features
domStyle.set(query("a.action.zoomTo")[0], "display", "none");
// get the latest 1000 photos from instagram/laguna beach
var photos = esriRequest({
url: "data/1000-photos.json",
handleAs: "json"
});
photos.then(addClusters, error);
});
function addClusters(resp) {
var photoInfo = {};
var wgs = new SpatialReference({
"wkid": 4326
});
photoInfo.data = arrayUtils.map(resp, function(p) {
var latlng = new Point(parseFloat(p.lng), parseFloat(p.lat), wgs);
var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
var attributes = {
"Caption": p.caption,
"Name": p.full_name,
"Image": p.image,
"Link": p.link
};
return {
"x": webMercator.x,
"y": webMercator.y,
"attributes": attributes
};
});
// popupTemplate to work with attributes specific to this dataset
var popupTemplate = new PopupTemplate({
"title": "",
"fieldInfos": [{
"fieldName": "Caption",
visible: true
}, {
"fieldName": "Name",
"label": "By",
visible: true
}, {
"fieldName": "Link",
e795
"label": "On Instagram",
visible: true
}]
});
// cluster layer that uses OpenLayers style clustering
clusterLayer = new ClusterLayer({
"data": photoInfo.data,
"distance": 100,
"id": "clusters",
"labelColor": "#fff",
"labelOffset": 10,
"resolution": map.extent.getWidth() / map.width,
"singleColor": "#888",
"singleTemplate": popupTemplate
});
var defaultSym = new SimpleMarkerSymbol().setSize(4);
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
var picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/";
var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
renderer.addBreak(0, 2, blue);
renderer.addBreak(2, 200, green);
renderer.addBreak(200, 1001, red);
clusterLayer.setRenderer(renderer);
map.addLayer(clusterLayer);
// close the info window when the map is clicked
map.on("click", cleanUp);
// close the info window when esc is pressed
map.on("key-down", function(e) {
if (e.keyCode === 27) {
cleanUp();
}
});
}
function cleanUp() {
map.infoWindow.hide();
clusterLayer.clearSingles();
}
function error(err) {
console.log("something failed: ", err);
}
// show cluster extents...
// never called directly but useful from the console
window.showExtents = function() {
var extents = map.getLayer("clusterExtents");
if ( extents ) {
map.removeLayer(extents);
}
extents = new GraphicsLayer({ id: "clusterExtents" });
var sym = new SimpleFillSymbol().setColor(new Color([205, 193, 197, 0.5]));
arrayUtils.forEach(clusterLayer._clusters, function(c, idx) {
var e = c.attributes.extent;
extents.add(new Graphic(new Extent(e[0], e[1], e[2], e[3], map.spatialReference), sym));
}, this);
map.addLayer(extents, 0);
};
});
});
</script>
</head>
<body>
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
ClusterLayer.js代码：/**
* Created by Administrator on 2018/3/23 0023.
*/
define([
"dojo/_base/declare",
"dojo/_base/array",
"esri/Color",
"dojo/_base/connect",
"esri/SpatialReference",
"esri/geometry/Point",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/TextSymbol",
"esri/dijit/PopupTemplate",
"esri/layers/GraphicsLayer"
], function (
declare, arrayUtils, Color, connect,
SpatialReference, Point, Graphic, SimpleMarkerSymbol, TextSymbol,
PopupTemplate, GraphicsLayer
) {
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.
// distance: Number?
// Optional. The max number of pixels between points to group points in the same cluster. Default value is 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.
this._clusterTolerance = options.distance || 50;
this._clusterData = options.data || [];
this._clusters = [];
this._clusterLabelColor = options.labelColor || "#000";
// labelOffset can be zero so handle it differently
this._clusterLabelOffset = (options.hasOwnProperty("labelOffset")) ? options.labelOffset : -5;
// graphics that represent a single point
this._singles = []; // populated when a graphic is clicked
this._showSingles = options.hasOwnProperty("showSingles") ? options.showSingles : true;
// symbol for single graphics
var SMS = SimpleMarkerSymbol;
this._singleSym = options.singleSymbol || new SMS("circle", 6, null, new Color(options.singleColor));
this._singleTemplate = options.singleTemplate || new PopupTemplate({ "title": "", "description": "{*}" });
this._maxSingles = options.maxSingles || 1000;
this._webmap = options.hasOwnProperty("webmap") ? options.webmap : false;
this._sr = options.spatialReference || new SpatialReference({ "wkid": 102100 });
this._zoomEnd = null;
},
// override esri/layers/GraphicsLayer methods
_setMap: function(map, surface) {
// calculate and set the initial resolution
this._clusterResolution = map.extent.getWidth() / map.width; // probably a bad default...
this._clusterGraphics();
// connect to onZoomEnd so data is re-clustered when zoom level changes
this._zoomEnd = connect.connect(map, "onZoomEnd", this, function() {
// update resolution
this._clusterResolution = this._map.extent.getWidth() / this._map.width;
this.clear();
this._clusterGraphics();
});
// GraphicsLayer will add its own listener here
var div = this.inherited(arguments);
return div;
},
_unsetMap: function() {
this.inherited(arguments);
connect.disconnect(this._zoomEnd);
},
// public ClusterLayer methods
add: function(p) {
// Summary: The argument is a data point to be added to an existing cluster. If the data point falls within an existing cluster, it is added to that cluster and the cluster's label is updated. If the new point does not fall within an existing cluster, a new cluster is created.
//
// if passed a graphic, use the GraphicsLayer's add method
if ( p.declaredClass ) {
this.inherited(arguments);
return;
}
// add the new data to _clusterData so that it's included in clusters
// when the map level changes
this._clusterData.push(p);
var clustered = false;
// look for an existing cluster for the new point
for ( var i = 0; i < this._clusters.length; i++ ) {
var c = this._clusters[i];
if ( this._clusterTest(p, c) ) {
// add the point to an existing cluster
this._clusterAddPoint(p, c);
// update the cluster's geometry
this._updateClusterGeometry(c);
// update the label
this._updateLabel(c);
clustered = true;
break;
}
}
if ( ! clustered ) {
this._clusterCreate(p);
p.attributes.clusterCount = 1;
this._showCluster(p);
}
},
clear: function() {
// Summary: Remove all clusters and data points.
this.inherited(arguments);
this._clusters.length = 0;
},
clearSingles: function(singles) {
// Summary: Remove graphics that represent individual data points.
var s = singles || this._singles;
arrayUtils.forEach(s, function(g) {
this.remove(g);
}, this);
this._singles.length = 0;
},
onClick: function(e) {
// remove any previously showing single features
this.clearSingles(this._singles);
// find single graphics that make up the cluster that was clicked
// would be nice to use filter but performance tanks with large arrays in IE
var singles = [];
for ( var i = 0, il = this._clusterData.length; i < il; i++) {
if ( e.graphic.attributes.clusterId == this._clusterData[i].attributes.clusterId ) {
singles.push(this._clusterData[i]);
}
}
if ( singles.length > this._maxSingles ) {
alert("Sorry, that cluster contains more than " + this._maxSingles + " points. Zoom in for more detail.");
return;
} else {
// stop the click from bubbling to the map
e.stopPropagation();
this._map.infoWindow.show(e.graphic.geometry);
this._addSingles(singles);
}
},
// internal methods
_clusterGraphics: function() {
// first time through, loop through the points
for ( var j = 0, jl = this._clusterData.length; j < jl; j++ ) {
// see if the current feature should be added to a cluster
var point = this._clusterData[j];
var clustered = false;
var numClusters = this._clusters.length;
for ( var i = 0; i < this._clusters.length; i++ ) {
var c = this._clusters[i];
if ( this._clusterTest(point, c) ) {
this._clusterAddPoint(point, c);
clustered = true;
break;
}
}
if ( ! clustered ) {
this._clusterCreate(point);
}
}
this._showAllClusters();
},
_clusterTest: function(p, cluster) {
var distance = (
Math.sqrt(
Math.pow((cluster.x - p.x), 2) + Math.pow((cluster.y - p.y), 2)
) / this._clusterResolution
);
return (distance <= this._clusterTolerance);
},
// points passed to clusterAddPoint should be included
// in an existing cluster
// also give the point an attribute called clusterId
// that corresponds to its cluster
_clusterAddPoint: function(p, cluster) {
// average in the new point to the cluster geometry
var count, x, y;
count = cluster.attributes.clusterCount;
x = (p.x + (cluster.x * count)) / (count + 1);
y = (p.y + (cluster.y * count)) / (count + 1);
cluster.x = x;
cluster.y = y;
// build an extent that includes all points in a cluster
// extents are for debug/testing only...not used by the layer
if ( p.x < cluster.attributes.extent[0] ) {
cluster.attributes.extent[0] = p.x;
} else if ( p.x > cluster.attributes.extent[2] ) {
cluster.attributes.extent[2] = p.x;
}
if ( p.y < cluster.attributes.extent[1] ) {
cluster.attributes.extent[1] = p.y;
} else if ( p.y > cluster.attributes.extent[3] ) {
cluster.attributes.extent[3] = p.y;
}
// increment the count
cluster.attributes.clusterCount++;
// attributes might not exist
if ( ! p.hasOwnProperty("attributes") ) {
p.attributes = {};
}
// give the graphic a cluster id
p.attributes.clusterId = cluster.attributes.clusterId;
},
// point passed to clusterCreate isn't within the
// clustering distance specified for the layer so
// create a new cluster for it
_clusterCreate: function(p) {
var clusterId = this._clusters.length + 1;
// console.log("cluster create, id is: ", clusterId);
// p.attributes might be undefined
if ( ! p.attributes ) {
p.attributes = {};
}
p.attributes.clusterId = clusterId;
// create the cluster
var cluster = {
"x": p.x,
"y": p.y,
"attributes" : {
"clusterCount": 1,
"clusterId": clusterId,
"extent": [ p.x, p.y, p.x, p.y ]
}
};
this._clusters.push(cluster);
},
_showAllClusters: function() {
for ( var i = 0, il = this._clusters.length; i < il; i++ ) {
var c = this._clusters[i];
this._showCluster(c);
}
},
_showCluster: function(c) {
var point = new Point(c.x, c.y, this._sr);
this.add(
new Graphic(
point,
null,
c.attributes
)
);
// code below is used to not label clusters with a single point
if ( c.attributes.clusterCount == 1 ) {
return;
}
// show number of points in the cluster
var font = new esri.symbol.Font()
.setSize("10pt");
//.setWeight(esri.symbol.Font.WEIGHT_BOLD);
var label = new TextSymbol(c.attributes.clusterCount)
.setColor(new Color(this._clusterLabelColor))
.setOffset(0, this._clusterLabelOffset)
.setFont(font);
this.add(
new Graphic(
point,
label,
c.attributes
)
);
},
_addSingles: function(singles) {
// add single graphics to the map
arrayUtils.forEach(singles, function(p) {
var g = new Graphic(
new Point(p.x, p.y, this._sr),
this._singleSym,
p.attributes,
this._singleTemplate
);
this._singles.push(g);
if ( this._showSingles ) {
this.add(g);
}
}, this);
this._map.infoWindow.setFeatures(this._singles);
},
_updateClusterGeometry: function(c) {
// find the cluster graphic
var cg = arrayUtils.filter(this.graphics, function(g) {
return ! g.symbol &&
g.attributes.clusterId == c.attributes.clusterId;
});
if ( cg.length == 1 ) {
cg[0].geometry.update(c.x, c.y);
} else {
console.log("didn't find exactly one cluster geometry to update: ", cg);
}
},
_updateLabel: function(c) {
// find the existing label
var label = arrayUtils.filter(this.graphics, function(g) {
return g.symbol &&
g.symbol.declaredClass == "esri.symbol.TextSymbol" &&
g.attributes.clusterId == c.attributes.clusterId;
});
if ( label.length == 1 ) {
// console.log("update label...found: ", label);
this.remove(label[0]);
var newLabel = new TextSymbol(c.attributes.clusterCount)
.setColor(new Color(this._clusterLabelColor))
.setOffset(0, this._clusterLabelOffset);
this.add(
new Graphic(
new Point(c.x, c.y, this._sr),
newLabel,
c.attributes
)
);
// console.log("updated the label");
} else {
console.log("didn't find exactly one label: ", label);
}
},
// debug only...never called by the layer
_clusterMeta: function() {
// print total number of features
console.log("Total: ", this._clusterData.length);
// add up counts and print it
var count = 0;
arrayUtils.forEach(this._clusters, function(c) {
count += c.attributes.clusterCount;
});
console.log("In clusters: ", count);
}
});
});1000-photots.json文件： https://pan.baidu.com/s/1LCnrSmNG-8Lu8ac0c-7Hvg
注：ClusterLayer.js 有所改动。
html代码：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Cluster</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ margin: 0; padding: 0; }
/* center the image in the popup */
.esriViewPopup .gallery { margin: 0 auto !important; }
</style>
<script>
// helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
// http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/ var dojoConfig = {
paths: {
extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
}
};
</script>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map;
require([
"dojo/parser",
"dojo/ready",
"dojo/_base/array",
"esri/Color",
"dojo/dom-style",
"dojo/query",
"esri/map",
"esri/request",
"esri/graphic",
"esri/geometry/Extent",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/renderers/ClassBreaksRenderer",
"esri/layers/GraphicsLayer",
"esri/SpatialReference",
"esri/dijit/PopupTemplate",
"esri/geometry/Point",
"esri/geometry/webMercatorUtils",
"extras/ClusterLayer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
parser, ready, arrayUtils, Color, domStyle, query,
Map, esriRequest, Graphic, Extent,
SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer,
GraphicsLayer, SpatialReference, PopupTemplate, Point, webMercatorUtils,
ClusterLayer
) {
ready(function() {
parser.parse();
var clusterLayer;
var popupOptions = {
"markerSymbol": new SimpleMarkerSymbol("circle", 20, null, new Color([0, 0, 0, 0.25])),
"marginLeft": "20",
"marginTop": "20"
};
map = new Map("map", {
basemap: "oceans",
center: [-117.789, 33.543],
zoom: 13
});
map.on("load", function() {
// hide the popup's ZoomTo link as it doesn't make sense for cluster features
domStyle.set(query("a.action.zoomTo")[0], "display", "none");
// get the latest 1000 photos from instagram/laguna beach
var photos = esriRequest({
url: "data/1000-photos.json",
handleAs: "json"
});
photos.then(addClusters, error);
});
function addClusters(resp) {
var photoInfo = {};
var wgs = new SpatialReference({
"wkid": 4326
});
photoInfo.data = arrayUtils.map(resp, function(p) {
var latlng = new Point(parseFloat(p.lng), parseFloat(p.lat), wgs);
var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
var attributes = {
"Caption": p.caption,
"Name": p.full_name,
"Image": p.image,
"Link": p.link
};
return {
"x": webMercator.x,
"y": webMercator.y,
"attributes": attributes
};
});
// popupTemplate to work with attributes specific to this dataset
var popupTemplate = new PopupTemplate({
"title": "",
"fieldInfos": [{
"fieldName": "Caption",
visible: true
}, {
"fieldName": "Name",
"label": "By",
visible: true
}, {
"fieldName": "Link",
e795
"label": "On Instagram",
visible: true
}]
});
// cluster layer that uses OpenLayers style clustering
clusterLayer = new ClusterLayer({
"data": photoInfo.data,
"distance": 100,
"id": "clusters",
"labelColor": "#fff",
"labelOffset": 10,
"resolution": map.extent.getWidth() / map.width,
"singleColor": "#888",
"singleTemplate": popupTemplate
});
var defaultSym = new SimpleMarkerSymbol().setSize(4);
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
var picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/";
var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
renderer.addBreak(0, 2, blue);
renderer.addBreak(2, 200, green);
renderer.addBreak(200, 1001, red);
clusterLayer.setRenderer(renderer);
map.addLayer(clusterLayer);
// close the info window when the map is clicked
map.on("click", cleanUp);
// close the info window when esc is pressed
map.on("key-down", function(e) {
if (e.keyCode === 27) {
cleanUp();
}
});
}
function cleanUp() {
map.infoWindow.hide();
clusterLayer.clearSingles();
}
function error(err) {
console.log("something failed: ", err);
}
// show cluster extents...
// never called directly but useful from the console
window.showExtents = function() {
var extents = map.getLayer("clusterExtents");
if ( extents ) {
map.removeLayer(extents);
}
extents = new GraphicsLayer({ id: "clusterExtents" });
var sym = new SimpleFillSymbol().setColor(new Color([205, 193, 197, 0.5]));
arrayUtils.forEach(clusterLayer._clusters, function(c, idx) {
var e = c.attributes.extent;
extents.add(new Graphic(new Extent(e[0], e[1], e[2], e[3], map.spatialReference), sym));
}, this);
map.addLayer(extents, 0);
};
});
});
</script>
</head>
<body>
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
ClusterLayer.js代码：/**
* Created by Administrator on 2018/3/23 0023.
*/
define([
"dojo/_base/declare",
"dojo/_base/array",
"esri/Color",
"dojo/_base/connect",
"esri/SpatialReference",
"esri/geometry/Point",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/TextSymbol",
"esri/dijit/PopupTemplate",
"esri/layers/GraphicsLayer"
], function (
declare, arrayUtils, Color, connect,
SpatialReference, Point, Graphic, SimpleMarkerSymbol, TextSymbol,
PopupTemplate, GraphicsLayer
) {
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.
// distance: Number?
// Optional. The max number of pixels between points to group points in the same cluster. Default value is 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.
this._clusterTolerance = options.distance || 50;
this._clusterData = options.data || [];
this._clusters = [];
this._clusterLabelColor = options.labelColor || "#000";
// labelOffset can be zero so handle it differently
this._clusterLabelOffset = (options.hasOwnProperty("labelOffset")) ? options.labelOffset : -5;
// graphics that represent a single point
this._singles = []; // populated when a graphic is clicked
this._showSingles = options.hasOwnProperty("showSingles") ? options.showSingles : true;
// symbol for single graphics
var SMS = SimpleMarkerSymbol;
this._singleSym = options.singleSymbol || new SMS("circle", 6, null, new Color(options.singleColor));
this._singleTemplate = options.singleTemplate || new PopupTemplate({ "title": "", "description": "{*}" });
this._maxSingles = options.maxSingles || 1000;
this._webmap = options.hasOwnProperty("webmap") ? options.webmap : false;
this._sr = options.spatialReference || new SpatialReference({ "wkid": 102100 });
this._zoomEnd = null;
},
// override esri/layers/GraphicsLayer methods
_setMap: function(map, surface) {
// calculate and set the initial resolution
this._clusterResolution = map.extent.getWidth() / map.width; // probably a bad default...
this._clusterGraphics();
// connect to onZoomEnd so data is re-clustered when zoom level changes
this._zoomEnd = connect.connect(map, "onZoomEnd", this, function() {
// update resolution
this._clusterResolution = this._map.extent.getWidth() / this._map.width;
this.clear();
this._clusterGraphics();
});
// GraphicsLayer will add its own listener here
var div = this.inherited(arguments);
return div;
},
_unsetMap: function() {
this.inherited(arguments);
connect.disconnect(this._zoomEnd);
},
// public ClusterLayer methods
add: function(p) {
// Summary: The argument is a data point to be added to an existing cluster. If the data point falls within an existing cluster, it is added to that cluster and the cluster's label is updated. If the new point does not fall within an existing cluster, a new cluster is created.
//
// if passed a graphic, use the GraphicsLayer's add method
if ( p.declaredClass ) {
this.inherited(arguments);
return;
}
// add the new data to _clusterData so that it's included in clusters
// when the map level changes
this._clusterData.push(p);
var clustered = false;
// look for an existing cluster for the new point
for ( var i = 0; i < this._clusters.length; i++ ) {
var c = this._clusters[i];
if ( this._clusterTest(p, c) ) {
// add the point to an existing cluster
this._clusterAddPoint(p, c);
// update the cluster's geometry
this._updateClusterGeometry(c);
// update the label
this._updateLabel(c);
clustered = true;
break;
}
}
if ( ! clustered ) {
this._clusterCreate(p);
p.attributes.clusterCount = 1;
this._showCluster(p);
}
},
clear: function() {
// Summary: Remove all clusters and data points.
this.inherited(arguments);
this._clusters.length = 0;
},
clearSingles: function(singles) {
// Summary: Remove graphics that represent individual data points.
var s = singles || this._singles;
arrayUtils.forEach(s, function(g) {
this.remove(g);
}, this);
this._singles.length = 0;
},
onClick: function(e) {
// remove any previously showing single features
this.clearSingles(this._singles);
// find single graphics that make up the cluster that was clicked
// would be nice to use filter but performance tanks with large arrays in IE
var singles = [];
for ( var i = 0, il = this._clusterData.length; i < il; i++) {
if ( e.graphic.attributes.clusterId == this._clusterData[i].attributes.clusterId ) {
singles.push(this._clusterData[i]);
}
}
if ( singles.length > this._maxSingles ) {
alert("Sorry, that cluster contains more than " + this._maxSingles + " points. Zoom in for more detail.");
return;
} else {
// stop the click from bubbling to the map
e.stopPropagation();
this._map.infoWindow.show(e.graphic.geometry);
this._addSingles(singles);
}
},
// internal methods
_clusterGraphics: function() {
// first time through, loop through the points
for ( var j = 0, jl = this._clusterData.length; j < jl; j++ ) {
// see if the current feature should be added to a cluster
var point = this._clusterData[j];
var clustered = false;
var numClusters = this._clusters.length;
for ( var i = 0; i < this._clusters.length; i++ ) {
var c = this._clusters[i];
if ( this._clusterTest(point, c) ) {
this._clusterAddPoint(point, c);
clustered = true;
break;
}
}
if ( ! clustered ) {
this._clusterCreate(point);
}
}
this._showAllClusters();
},
_clusterTest: function(p, cluster) {
var distance = (
Math.sqrt(
Math.pow((cluster.x - p.x), 2) + Math.pow((cluster.y - p.y), 2)
) / this._clusterResolution
);
return (distance <= this._clusterTolerance);
},
// points passed to clusterAddPoint should be included
// in an existing cluster
// also give the point an attribute called clusterId
// that corresponds to its cluster
_clusterAddPoint: function(p, cluster) {
// average in the new point to the cluster geometry
var count, x, y;
count = cluster.attributes.clusterCount;
x = (p.x + (cluster.x * count)) / (count + 1);
y = (p.y + (cluster.y * count)) / (count + 1);
cluster.x = x;
cluster.y = y;
// build an extent that includes all points in a cluster
// extents are for debug/testing only...not used by the layer
if ( p.x < cluster.attributes.extent[0] ) {
cluster.attributes.extent[0] = p.x;
} else if ( p.x > cluster.attributes.extent[2] ) {
cluster.attributes.extent[2] = p.x;
}
if ( p.y < cluster.attributes.extent[1] ) {
cluster.attributes.extent[1] = p.y;
} else if ( p.y > cluster.attributes.extent[3] ) {
cluster.attributes.extent[3] = p.y;
}
// increment the count
cluster.attributes.clusterCount++;
// attributes might not exist
if ( ! p.hasOwnProperty("attributes") ) {
p.attributes = {};
}
// give the graphic a cluster id
p.attributes.clusterId = cluster.attributes.clusterId;
},
// point passed to clusterCreate isn't within the
// clustering distance specified for the layer so
// create a new cluster for it
_clusterCreate: function(p) {
var clusterId = this._clusters.length + 1;
// console.log("cluster create, id is: ", clusterId);
// p.attributes might be undefined
if ( ! p.attributes ) {
p.attributes = {};
}
p.attributes.clusterId = clusterId;
// create the cluster
var cluster = {
"x": p.x,
"y": p.y,
"attributes" : {
"clusterCount": 1,
"clusterId": clusterId,
"extent": [ p.x, p.y, p.x, p.y ]
}
};
this._clusters.push(cluster);
},
_showAllClusters: function() {
for ( var i = 0, il = this._clusters.length; i < il; i++ ) {
var c = this._clusters[i];
this._showCluster(c);
}
},
_showCluster: function(c) {
var point = new Point(c.x, c.y, this._sr);
this.add(
new Graphic(
point,
null,
c.attributes
)
);
// code below is used to not label clusters with a single point
if ( c.attributes.clusterCount == 1 ) {
return;
}
// show number of points in the cluster
var font = new esri.symbol.Font()
.setSize("10pt");
//.setWeight(esri.symbol.Font.WEIGHT_BOLD);
var label = new TextSymbol(c.attributes.clusterCount)
.setColor(new Color(this._clusterLabelColor))
.setOffset(0, this._clusterLabelOffset)
.setFont(font);
this.add(
new Graphic(
point,
label,
c.attributes
)
);
},
_addSingles: function(singles) {
// add single graphics to the map
arrayUtils.forEach(singles, function(p) {
var g = new Graphic(
new Point(p.x, p.y, this._sr),
this._singleSym,
p.attributes,
this._singleTemplate
);
this._singles.push(g);
if ( this._showSingles ) {
this.add(g);
}
}, this);
this._map.infoWindow.setFeatures(this._singles);
},
_updateClusterGeometry: function(c) {
// find the cluster graphic
var cg = arrayUtils.filter(this.graphics, function(g) {
return ! g.symbol &&
g.attributes.clusterId == c.attributes.clusterId;
});
if ( cg.length == 1 ) {
cg[0].geometry.update(c.x, c.y);
} else {
console.log("didn't find exactly one cluster geometry to update: ", cg);
}
},
_updateLabel: function(c) {
// find the existing label
var label = arrayUtils.filter(this.graphics, function(g) {
return g.symbol &&
g.symbol.declaredClass == "esri.symbol.TextSymbol" &&
g.attributes.clusterId == c.attributes.clusterId;
});
if ( label.length == 1 ) {
// console.log("update label...found: ", label);
this.remove(label[0]);
var newLabel = new TextSymbol(c.attributes.clusterCount)
.setColor(new Color(this._clusterLabelColor))
.setOffset(0, this._clusterLabelOffset);
this.add(
new Graphic(
new Point(c.x, c.y, this._sr),
newLabel,
c.attributes
)
);
// console.log("updated the label");
} else {
console.log("didn't find exactly one label: ", label);
}
},
// debug only...never called by the layer
_clusterMeta: function() {
// print total number of features
console.log("Total: ", this._clusterData.length);
// add up counts and print it
var count = 0;
arrayUtils.forEach(this._clusters, function(c) {
count += c.attributes.clusterCount;
});
console.log("In clusters: ", count);
}
});
});1000-photots.json文件： https://pan.baidu.com/s/1LCnrSmNG-8Lu8ac0c-7Hvg
注：ClusterLayer.js 有所改动。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 天地图结合ArcGIS api for JavaScript实现点聚合ClusterLayer
- [ ArcGIS 10 API for Javascript 系列 ] - 默认的HTTP请求方式
- ArcGIS API for JavaScript 4.6 版本加载腾讯地图
- Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
- 【转】基于ArcGIS for javascript api 轨迹回放
- （八）ArcGIS API For Javascript调用GP服务
- ArcGIS API for Javascript 加载天地图（墨卡托投影）
- Arcgis api for javascript 详细部署
- ArcGIS API for Javascript3.23加载高德地图
- 【一】ArcGIS API for JavaScript之API的使用和部署
- 基于ArcGIS API For JavaScript调用GP服务实现动态插值分析实现
- ArcGIS api for javascript——显示多个查询结果
- ArcGIS API for Javascript 实现在线要素编辑（一）
- Arcgis api for Javascript中多图层查询（上）
- ArcGIS API for JavaScript开发教程系列(二)之地图控件
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
- ArcGIS For JavaScript API Resizable Map（可调整大小的地图）————（十）
- Arcgis API for Javascript入门（一）
- ArcGIS Server for JavaScript API安装部署
- ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）