ArcGIS實現聚合點效果

function queryfunc(){
	map.graphics.clear();
	if(clusterLayer!=undefined){
		map.removeLayer(clusterLayer);
	}
	$.ajax({
		url:'gis/tt',
		data:{month:$('#search_date').val(),city:$('#cityName').combobox('getValue')},
		success : function(data) {
			obj= $.parseJSON(data);
			
			if(obj.length<1){
				alert("當前條件下未查詢到數據");
				return false;
			}
			 require([
				"dojo/_base/array",
				"esri/Color",
				"esri/map",
				"esri/layers/ArcGISTiledMapServiceLayer",
				"esri/request",
				"esri/graphic",
				"esri/geometry/Extent",
				
				"esri/symbols/SimpleMarkerSymbol",
				"esri/symbols/PictureMarkerSymbol",
				"esri/symbols/SimpleLineSymbol",
				"esri/symbols/SimpleFillSymbol",
				"esri/renderers/ClassBreaksRenderer",
				
				"esri/layers/GraphicsLayer",
				"esri/SpatialReference",
				"esri/geometry/Point",
				"esri/geometry/webMercatorUtils",
				"ClusterLayer",
				"dojo/domReady!"
		      ], function (arrayUtils,
		                Color,
		                Map,
		                ArcGISTiledMapServiceLayer,
		                esriRequest,
		                Graphic,
		                Extent,
		                SimpleMarkerSymbol,
		                PictureMarkerSymbol,
		                SimpleLineSymbol,
		                SimpleFillSymbol,
		                ClassBreaksRenderer,
		                GraphicsLayer,
		                SpatialReference,
		                Point,
		                webMercatorUtils,
		                ClusterLayer){
					 	var countyInfo = {};
					 	var multipoint = new esri.geometry.Multipoint();
					 	var resultUnionExtent;    
		         	countyInfo.data = arrayUtils.map(obj, function(item) {
		                 var latlng = new  Point(item.LONGITUDE, item.LATITUDE, map.spatialReference);
		                 multipoint.addPoint(new  Point(item.LONGITUDE, item.LATITUDE));  
		                 var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
		                 var attributes = {
		                   /*   "小區名稱": item.cell_name, */
		                     "經度": item.LONGITUDE,
		                     "緯度": item.LATITUDE,
		                 };
		                 return {
		                     "x": webMercator.x,
		                     "y": webMercator.y,
		                     "attributes": attributes
		                 };
		         	});
		         	clusterLayer = new ClusterLayer({
		                "data": countyInfo.data,
		                "distance": 100,
		                "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 picBaseUrl = "${basePath}app/templates/manage/wyproblemcell/images/";
		            var marker = new PictureMarkerSymbol("${basePath}app/templates/manage/arcgis319/img/marker.png",44,33);
		            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, marker);
		            renderer.addBreak(2, 500, green);
		            renderer.addBreak(500, 20001, red);

		            clusterLayer.setRenderer(renderer);
		            map.addLayer(clusterLayer);
		            if(multipoint.points.length > 0){
					    if(resultUnionExtent == null){
					    	resultUnionExtent = multipoint.getExtent();
					    }else{
					    	resultUnionExtent = resultUnionExtent.union(multipoint.getExtent());
					    }
					 }
					 map.setExtent(resultUnionExtent.expand(1.2)); 
			 });			 
		}
	});	
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章