目录:
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({