1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
| /**
| * 功能描述：聚合
| * 开发公司：广东蓝图
| * 开发人员：蔡工
| * 开发时间：2019-07-25 ~ 2019-09
| */
|
| define([
| "dojo/_base/declare",
| "esri/request",
| "esri/SpatialReference",
| "dojo/_base/array",
| "esri/geometry/Point",
| "esri/geometry/webMercatorUtils",
| "esri/dijit/PopupTemplate",
| "scripts/extras/ClusterLayer",
| "esri/symbols/SimpleMarkerSymbol",
| "esri/symbols/SimpleFillSymbol",
| "esri/symbols/PictureMarkerSymbol",
| "esri/renderers/ClassBreaksRenderer",
| "esri/layers/GraphicsLayer"
| ], function(declare, esriRequest, SpatialReference, arrayUtils, Point, webMercatorUtils, PopupTemplate, ClusterLayer, SimpleMarkerSymbol,
| SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer, GraphicsLayer) {
| var clazz;
| clazz = declare("Cluster", null, {
| constructor: function () {
| },
| show: function() {
| var photos = esriRequest({
| url: "./data/1000-photos.json",
| handleAs: "json"
| });
| photos.then(this.addClusters, this.error);
| },
| addClusters: function(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);
| console.log(12345678);
| 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",
| "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 = "";
| var blue = new PictureMarkerSymbol(picBaseUrl + "images/cluster/BluePin1LargeB.png", 32, 32).setOffset(0, 15);
| var green = new PictureMarkerSymbol(picBaseUrl + "images/cluster/GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
| var red = new PictureMarkerSymbol(picBaseUrl + "images/cluster/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);
| },
| error: function(err) {
| console.log("something failed: ", err);
| }
| });
| clazz.getInstance = function() {
| if (instance === null) {
| instance = new clazz();
| }
| return instance;
| };
| return clazz;
| });
|
|
