<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="/3.19/dijit/themes/tundra/">
<link rel="stylesheet" href="/3.19/esri/css/">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ margin: 0; padding: 0; }
</style>
<script>
// helpful for understanding vs. :
// /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="/jquery-3.1."></script>
<script src="/3.19/"></script>
<script>
var map;
require([
"dojo/parser",
"dojo/ready",
"esri/Color",
"esri/map",
"esri/graphic",
"esri/geometry/Extent",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/renderers/ClassBreaksRenderer",
"esri/SpatialReference",
"esri/geometry/Point",
"esri/geometry/webMercatorUtils",
"extras/ClusterLayer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!",
"esri/dijit/Basemap",
"esri/dijit/BasemapLayer"
], function(
parser, ready, Color, Map, Graphic, Extent,
SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol,
ClassBreaksRenderer, SpatialReference, Point, webMercatorUtils,
ClusterLayer,Basemap,BasemapLayer
) {
ready(function() {
parser.parse();
var provinceLayer = new BasemapLayer({
url:"/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
});
var provincebasemap = new Basemap({
layers: [provinceLayer]
});
map = new Map("map", {
basemap:provincebasemap,// "osm",
center: [119.3, 26.05],
zoom: 12
});
map.on("load", function() {
addCluster_1();
addCluster_2();
});
function corrdinateFn(p) {
var wgs = new SpatialReference({"wkid": 4326});
var latlng = new Point(parseFloat(p.x), parseFloat(p.y), wgs);
var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
return {
"x": webMercator.x,
"y": webMercator.y,
"attributes": p.attributes
};
}
var picBaseUrl = "/images/Symbols/Shapes/";
function addCluster_1() {
var datas = new Array();
var corrdinates = new Array();
corrdinates.push({x:119.32,y:26.05,attributes:{}});
corrdinates.push({x:119.326,y:26.057,attributes:{}});
corrdinates.push({x:119.328,y:26.06,attributes:{}});
corrdinates.push({x:119.33,y:26.04,attributes:{}});
corrdinates.push({x:118.93,y:25.87,attributes:{}});
$.each(corrdinates,function (i,e) {
datas.push(corrdinateFn(e));
});
var clusterLayer = new ClusterLayer({
"data": datas,
"distance": 100,
"id": "cluster1",
"labelColor": "#fff",
"labelOffset": 10,
"resolution": map.extent.getWidth() / map.width,
"singleColor": "#888"
});
var defaultSym = new SimpleMarkerSymbol().setSize(4);
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
var green = new PictureMarkerSymbol(picBaseUrl + "", 32, 32).setOffset(0, 15);
var yellow = new PictureMarkerSymbol(picBaseUrl + "", 64, 64).setOffset(0, 15);
var red = new PictureMarkerSymbol(picBaseUrl + "", 72, 72).setOffset(0, 15);
renderer.addBreak(0, 1, green);
renderer.addBreak(1, 2, yellow);
renderer.addBreak(2, 1001, red);
clusterLayer.setRenderer(renderer);
map.addLayer(clusterLayer);
}
function addCluster_2() {
var datas = new Array();
var corrdinates = new Array();
corrdinates.push({x:118.17,y:26.65,attributes:{}});
corrdinates.push({x:119.33,y:26.05,attributes:{}});
corrdinates.push({x:119.34,y:26.05,attributes:{}});
corrdinates.push({x:119.337,y:26.06,attributes:{}});
$.each(corrdinates,function (i,e) {
datas.push(corrdinateFn(e));
});
var clusterLayer = new ClusterLayer({
"data": datas,
"distance": 100,
"id": "cluster2",
"labelColor": "#fff",
"labelOffset": 10,
"resolution": map.extent.getWidth() / map.width,
"singleColor": "#888"
});
var defaultSym = new SimpleMarkerSymbol().setSize(4);
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
var blue = new PictureMarkerSymbol(picBaseUrl + "", 32, 32).setOffset(0, 15);
var orange = new PictureMarkerSymbol(picBaseUrl + "", 64, 64).setOffset(0, 15);
var black = new PictureMarkerSymbol(picBaseUrl + "", 72, 72).setOffset(0, 15);
renderer.addBreak(0, 1, blue);
renderer.addBreak(1, 2, orange);
renderer.addBreak(2, 1001, black);
clusterLayer.setRenderer(renderer);
map.addLayer(clusterLayer);
}
});
});
</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>