效果圖：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<%@include file="/context/mytags.jsp"%> <html> <head> <meta charset="utf-8"> <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="plug-in/jquery/jquery-1.8.3.js"></script> <script type="text/javascript" src="plug-in/Highcharts-2.2.5/highcharts.js"></script> <script type="text/javascript" src="plug-in/Highcharts-2.2.5/modules/exporting.js"></script> <link rel="stylesheet" type="text/css" href="http://192.168.2.10:8080/ljms/arcgis_js_api/3.9/js/dijit/themes/tundra/tundra.css" /> <%-- 內網訪問，需要將IP修改為服務器IP，不能為localhost --%> <link rel="stylesheet" type="text/css" href="http://192.168.2.10:8080/ljms/arcgis_js_api/3.9/js/esri/css/esri.css" /> <link rel="stylesheet" type="text/css" href="http://192.168.2.10:8080/ljms/arcgis_js_api/3.9/js/esri/css/main.css" /> <link rel="stylesheet" type="text/css" href="http://192.168.2.10:8080/ljms/arcgis_js_api/3.9/js/dijit/themes/claro/claro.css" /> <script type="text/javascript" src="http://192.168.2.10:8080/ljms/arcgis_js_api/3.9/init.js"></script> <style> #mapDiv { padding: 0; margin: 0; height: 200%; width: 100%; } #search { display: block; position: absolute; z-index: 3; top: 20px; left: 75px; } </style><script> var CITY_DATA={ "total":8, "items":[ {"id":0,"name":"A公司","X":87.602117,"Y":42.790939}, {"id":1,"name":"B公司","X":117.484777,"Y":34.045128}, {"id":2,"name":"C公司","X":115.380243,"Y":39.98116}, {"id":3,"name":"D公司","X":107.0365,"Y":34.667072}, {"id":4,"name":"E公司","X":91.13605,"Y":29.653589}, {"id":5,"name":"F公司","X":119.287813,"Y":26.01859}, {"id":6,"name":"G公司","X":101.750053,"Y":32.066039}, {"id":7,"name":"H公司","X":104.319768,"Y":21.806543}, ] }; var JTJ_DATA={ "total":14, "items":[ {"id":0,"name":"0組織機構","X":52.748,"Y":39.909}, {"id":1,"name":"1組織機構","X":122.484,"Y":41.115}, {"id":2,"name":"2組織機構","X":115.700,"Y":38.857}, {"id":3,"name":"3組織機構","X":126.315,"Y":43.893}, {"id":4,"name":"4組織機構","X":116.107,"Y":35.704}, {"id":5,"name":"5組織機構","X":106.510,"Y":29.558}, {"id":6,"name":"6組織機構","X":114.878,"Y":40.817}, {"id":7,"name":"7組織機構","X":118.186,"Y":35.267}, {"id":8,"name":"8組織機構","X":120.097,"Y":30.866}, {"id":9,"name":"9組織機構","X":114.868,"Y":35.307}, {"id":10,"name":"10組織機構","X":117.392,"Y":23.088}, {"id":11,"name":"11組織機構","X":108.402,"Y":25.310}, {"id":12,"name":"12組織機構","X":107.138,"Y":34.382}, {"id":13,"name":"13組織機構","X":118.144,"Y":26.735} ] }; var ZQ_DATA; var JTJ_NUM; $(function(){ var groupNames=new Array(8); for (var i=0; i<CITY_DATA.items.length; i++) { groupNames[i] = CITY_DATA.items[i].name; } //通過ajax請求獲取公司級別的甲產品、乙產品、丙產品數量 $.ajax( { url:'ljStatisticController.do?getStaNumForIndex',// 跳轉到 action data:{ groupNames:"A公司,B公司,C公司,D公司,E公司,F公司,G公司,H公司" }, type:'post', cache:false, async : false, dataType:'json', success:function(data) { ZQ_DATA = data; //alert(ZQ_DATA.obj[0].pmapnum); }, error : function() { alert("異常！"); } }); //通過ajax請求獲取組織機構級別的甲產品、乙產品、丙產品數量 $.ajax( { url:'ljStatisticController.do?getStaNumForIndex',// 跳轉到 action data:{ groupNames:"0組織機構,1組織機構,2組織機構,3組織機構,4組織機構,5組織機構,6組織機構,7組織機構,8組織機構,9組織機構,10組織機構,11組織機構,12組織機構,13組織機構" }, type:'post', cache:false, async : false, dataType:'json', success:function(data) { JTJ_NUM = data; //alert(ZQ_DATA.obj[0].pmapnum); }, error : function() { alert("異常！"); } }); }); require([ "dojo/dom-construct", "dojo/dom-class", "esri/map", "esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/SimpleRenderer", "esri/Color", "esri/layers/GraphicsLayer", "esri/layers/LabelLayer", "esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/TextSymbol", //"esri/symbols/Font", "esri/geometry/Point", "esri/layers/FeatureLayer", "esri/geometry/Extent", "esri/InfoTemplate", "dojo/domReady!", "dojo/dom", "dojo/json", "dojox/charting/Chart", "dojox/charting/themes/Dollar", "esri/tasks/QueryTask", "esri/tasks/query", "esri/dijit/editing/Update" ], function( domConstruct, domClass, Map, Popup, PopupTemplate, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, Color, //Font, GraphicsLayer, LabelLayer, PictureMarkerSymbol, SimpleMarkerSymbol, TextSymbol, Point, FeatureLayer, Extent, InfoTemplate, Chart, theme, QueryTask, query, jsonUtil, Update, dom ) { var bounds = new Extent({ "xmin":67.91203396031673, "ymin": 3.8196613667440213, "xmax":136.49127655152418, "ymax": 54.69378269257668, "spatialReference":{"wkid":4214} }); var fill = new SimpleFillSymbol("solid", null, new Color("#ca67ce")); var popup = new Popup({ fillSymbol: fill, titleInBody: false }, domConstruct.create("div")); domClass.add(popup.domNode, "dark"); var map = new Map("mapDiv", { logo:false, extent: bounds, zoom: 4, sliderPosition:"top-right", infoWindow: popup }); var f_line = new FeatureLayer("http://192.168.2.10:6080/arcgis/rest/services/test/city/MapServer/3",{"id":"lineLayer"}); map.addLayer(f_line); var url = "http://192.168.2.10:6080/arcgis/rest/services/test/city/MapServer/4"; var template = new PopupTemplate({ title: "{NAME}>的數據統計信息", description: "甲產品：{PMAPNUM}<br/>乙產品：{DMAPNUM}<br/>丙產品：{BDNUM}", fieldInfos: [{ //define field infos so we can specify an alias fieldName: "PMAPNUM", label: "甲產品" },{ fieldName: "DMAPNUM", label: "乙產品" },{ fieldName: "BDNUM", label: "丙產品" }], mediaInfos:[{ //define the bar chart caption: "", type:"columnchart", value:{ theme: "Dollar", fields:["PMAPNUM","DMAPNUM","BDNUM"] } }], }); //var template2 = new InfoTemplate("選擇單位", "{NAME}"); var f_zq = new FeatureLayer(url, { id: "zqLayer", mode: FeatureLayer.MODE_SNAPSHOT,//注意這里的mode一定要指定MODE_SNAPSHOT，否則每次放大或縮小或者是平移都會執行FeatureLayer的update-end操作 infoTemplate: template, //showLabels:true, outFields: ["*"] }); map.addLayer(f_zq); var loginGroupOrder = $("#loginGroupOrder").val(); if (loginGroupOrder=="2") { //級別 var loginGroupName = $("#loginGroupName").val(); var query = new esri.tasks.Query(); query.where = "1=1"; query.outFields = [ "*" ]; f_zq.queryFeatures(query, function(featureSet) { for (var i=0,i1=featureSet.features.length; i<i1; i++) { var zqgraphic = featureSet.features[i]; //var name = feature.attributes.NAME; //ok var name = zqgraphic.attributes["NAME"]; if (name!=loginGroupName) { zqgraphic.setSymbol(new SimpleFillSymbol("solid", null, new Color("#dbf875"))); map.graphics.add(zqgraphic); //高亮顯示 } } }); } f_zq.on("update-end", function(){ //輸出其中一個graphic(面要素)的所有屬性 for(var i=0;i<f_zq.graphics.length;i++){ //自定義數據，在每個面要素中添加nico屬性 var name = f_zq.graphics[i].attributes["NAME"]; f_zq.graphics[i].attributes["PMAPNUM"]=ZQ_DATA.obj[i].pmapnum; f_zq.graphics[i].attributes["DMAPNUM"]=ZQ_DATA.obj[i].dmapnum; f_zq.graphics[i].attributes["BDNUM"]=ZQ_DATA.obj[i].bdnum; } }); /*var renderer = new SimpleRenderer(new SimpleFillSymbol().setOutline(new SimpleLineSymbol().setWidth(0.1).setColor(new Color([128,128,128])))); renderer.setColorInfo({ //使用nico屬性進行渲染 field: "nico", minDataValue: 0, maxDataValue: 40, colors: [ new Color([0, 255, 0]), new Color([255, 0, 0]) ] }); f_zq.on("update-end", function(){ //輸出其中一個graphic(面要素)的所有屬性 for(var i = 0;i<f_zq.graphics.length;i++){ //自定義數據，在每個面要素中添加nico屬性 f_zq.graphics[i].attributes["nico"]=i; f_zq.graphics[i].attributes["PMAPNUM"]=i; f_zq.graphics[i].attributes["DMAPNUM"]=i; f_zq.graphics[i].attributes["BDNUM"]=i; } f_zq.setRenderer(renderer); f_zq.redraw(); //輸出FeatureLayer中所有的graphic數 console.log("number of graphics in featureLayer:"+f_zq.graphics.length); //輸出其中一個graphic(面要素)的所有屬性 console.log("10th graphic attributes in featureLayer:"); console.log(f_zq.graphics[10].attributes); });*/ //updateFeature(0); //updateFeature(1); //updateFeature(2); //////////////////////// /*f_zq.on("click", function(evt) { var objectId = evt.graphic.attributes.NAME; map.infoWindow.setTitle(objectId); });*/ //////////////////////// /*var layerDefinition = { "geometryType": "esriGeometryPolygon", "fields": [{ "NAME": "A公司", "type": "esriFieldTypeInteger", "alias": "A公司" }] }; var featureCollection = { layerDefinition: layerDefinition, featureSet: null }; var testFeatureLayer = new FeatureLayer(featureCollection, { showLabels: true, infoTemplate: template }); map.addLayer(testFeatureLayer);*/ ///////////////////////////////// function searchFeather(id,callback){ //得到要素圖層的主鍵屬性 var idProperty = f_zq.objectIdField; //featureLayer有objectIdField, 但不是作為屬性，不能這樣取出來 //alert(idProperty); //定義查詢參數 var query = new esri.tasks.Query(); //是否返回幾何形狀 query.returnGeometry = false; //圖層的主鍵名稱（根據自己要求修改） query.objectIds = [id]; //查詢條件1=1意思是：只根據主鍵查詢，忽略where子句 query.where = "1=1"; //進行查詢 f_zq.selectFeatures(query, FeatureLayer.SELECTION_NEW,function(result){ //如果callback不存在，說明僅僅是查詢操作 if(!callback){ //因為我們根據主鍵查詢，一定只有一個元素 var graphic=result[0]; //獲得屬性 var attributes=graphic.attributes; //得到該屬性信息轉換成字符串 var result=jsonUtil.stringify(attributes); } else {//如果callback存在，說明是更新操作 callback(result); } }); } //根據id修改要素 function updateFeature(id){ //注意:（第二個參數）這里傳入一個回調函數，用於處理查詢出來的數據 searchFeather(id,function(result){ //獲得舊的要素 var oldgraphic=result[0]; //新的要素 var newgraphic=new esri.Graphic(oldgraphic.toJson()); //將alias屬性修改為:修改后的C區 newgraphic.attributes.NAME="修改后的C區"; //創建更新對象 var update1=new Update({ "featureLayer":f_zq, "postUpdatedGraphics":[newgraphic],//修改之后的要素 "preUpdatedGraphics":[oldgraphic]//修改之前的要素 }); //執行刷新操作 update1.performRedo(); //刷新視圖 f_zq.refresh(); alert("修改成功"); }); } ///////////////////////////////// //dojo.connect(map, "onClick", executeQueryTask);//暫時屏蔽掉，目前不需要 var queryTask = new esri.tasks.QueryTask(url); var query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ["NAME"]; function executeQueryTask(evt) { //用戶點擊onClick事件返回地圖上EVT點. //包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素點). //設置查詢幾何等於evt.mapPoint query.geometry = evt.mapPoint; //執行任務和完成showResults queryTask.execute(query, showResults); } var zqgraphic = null; function showResults(featureSet) { for (var i=0,i1=featureSet.features.length; i<i1; i++) { if (zqgraphic!=null && zqgraphic!="") { map.graphics.remove(zqgraphic); //去掉原來的高亮顯示 } zqgraphic = featureSet.features[0]; //var name = feature.attributes.NAME; //ok var name = zqgraphic.attributes["NAME"]; //TODO根據name執行查詢，用於管理模塊中的查詢 zqgraphic.setSymbol(fill); map.graphics.add(zqgraphic); //高亮顯示 } //alert("ss"); } var chartLayer = new GraphicsLayer({"id":"chartLayer"}); map.addLayer(chartLayer); //chartLayer.on("click",showDetailChart); addReadPopup(CITY_DATA); function addReadPopup(data){ var items= data.items; for(var i=0;i<data.total;i++){ var symbol = new PictureMarkerSymbol("images/bar.png",20,30); symbol.setOffset(-10,10); var pt=new Point(items[i].X,items[i].Y,map.spatialReference); var graphic = new esri.Graphic(pt,symbol,items[i]); chartLayer.add(graphic); }; }; var textLayer = new GraphicsLayer({"id":"textLayer"}); map.addLayer(textLayer); addTextPopup(CITY_DATA); function addTextPopup(data){ var items= data.items; for(var i=0;i<data.total;i++){ var pt=new Point(items[i].X,items[i].Y,map.spatialReference); var symbol = new TextSymbol(items[i].name); symbol.setOffset(-10,-15); var graphic = new esri.Graphic(pt,symbol, {}); textLayer.add(graphic); }; }; var textLayerOfJTJ = new GraphicsLayer({"id":"jtjTextLayer"}); var f_jituanjun = new FeatureLayer("http://192.168.2.10:6080/arcgis/rest/services/test/city/MapServer/5", { id: "jituanjunLayer", mode: FeatureLayer.MODE_SNAPSHOT,//注意這里的mode一定要指定MODE_SNAPSHOT，否則每次放大或縮小或者是平移都會執行FeatureLayer的update-end操作 infoTemplate: template, //showLabels:true, outFields: ["*"] }); f_jituanjun.on("update-end", function(){ //輸出其中一個graphic(面要素)的所有屬性 for(var i=0;i<f_jituanjun.graphics.length;i++){ //自定義數據，在每個面要素中添加nico屬性 var name = f_jituanjun.graphics[i].attributes["NAME"]; f_jituanjun.graphics[i].attributes["PMAPNUM"]=JTJ_NUM.obj[i].pmapnum; f_jituanjun.graphics[i].attributes["DMAPNUM"]=JTJ_NUM.obj[i].dmapnum; f_jituanjun.graphics[i].attributes["BDNUM"]=JTJ_NUM.obj[i].bdnum; } }); var level=4; map.on("zoom-end",function(zoom){ //縮放后，重繪graphics //去掉選擇的高亮顯示 if (zqgraphic!=null && zqgraphic!="") { map.graphics.remove(zqgraphic); //去掉原來的高亮顯示 } var graphics = chartLayer.graphics; var zoomFactor = zoom.zoomFactor; if (zoomFactor>=1) { level = level + zoomFactor/2; } else { level = level - 0.5/zoomFactor; } if (graphics.length>0) { //var width = graphics[0].symbol.width; //var height = graphics[0].symbol.height; var width = level>3 ? 20 : 20/(4-level+1); var height = level>3 ? 30 : 30/(4-level+1); var symbol = new PictureMarkerSymbol("images/bar.png",width,height); if (level>3) { symbol.setOffset(-10,10); } else { symbol.setOffset(-10/(4-level+1),10/(4-level+1)); } for(var i=0;i<graphics.length;i++){ graphics[i].symbol = symbol; chartLayer.redraw(); textLayer.redraw(); } } var items= CITY_DATA.items; var graphics2 = textLayer.graphics; if (graphics2.length>0) { for(var i=0;i<graphics2.length;i++){ var symbol = new TextSymbol(items[i].name);; if (level>3) { symbol.setOffset(-10,-15); } else { symbol.setOffset(-10/(4-level+1),-15/(4-level+1)); } graphics2[i].symbol = symbol; textLayer.redraw(); } } if (level>=5) { //縮放到5級時，添加組織機構級的圖層 map.addLayer(f_jituanjun); map.addLayer(textLayerOfJTJ); addTextPopupJTJ(JTJ_DATA); function addTextPopupJTJ(data){ var items= data.items; for(var i=0;i<data.total;i++){ var pt=new Point(items[i].X,items[i].Y,map.spatialReference); var symbol = new TextSymbol(items[i].name); symbol.setOffset(-10,-20); var graphic = new esri.Graphic(pt,symbol, {}); textLayerOfJTJ.add(graphic); }; }; } else { //小於5級時，移除組織機構的圖層 map.removeLayer(f_jituanjun); map.removeLayer(textLayerOfJTJ); } }); var f_zq_p = new FeatureLayer("http://192.168.2.10:6080/arcgis/rest/services/test/city/MapServer/0",{"id":"zqPointLayer"}); map.addLayer(f_zq_p); var f_bj = new FeatureLayer("http://192.168.2.10:6080/arcgis/rest/services/test/city/MapServer/1",{"id":"bjLayer"}); map.addLayer(f_bj); } ); </script> </head> <body> <%-- --%> <div id="search"></div> <%-- <a id="hidelj" href="#" class="">折疊</a> --%> <input type="hidden" id="loginGroupOrder" value="${sessionScope.LOCAL_CLINET_USER.currentDepart.departOrder}"/> <input type="hidden" id="loginGroupName" value="${sessionScope.LOCAL_CLINET_USER.currentDepart.departname}"/> <c:if test="${sessionScope.LOCAL_CLINET_USER.currentDepart.departOrder=='1'}"> <div id="container" style="max-width:300px;height:300px"> </div> <div id="mapDiv" style="width:1700px; height:900px; margin-top: -300px;"class="MapClass"> </div> </c:if> <c:if test="${sessionScope.LOCAL_CLINET_USER.currentDepart.departOrder!='1'}"> <div id="mapDiv" style="width:1700px; height:900px; "class="MapClass"> </div> </c:if> <script> $("a#hidelj").click(function(){ $("div#container").hide(); $("div#mapDiv").css("style","width:1700px; height:900px; margin-top: 0px;"); }); $(function () { $.ajax({ type : "POST", url : 'ljStatisticController.do?getLJStaNumForIndex&reportType=column', data:{ groupNames:"總公司" }, success : function(jsondata) { data = eval(jsondata); var xAxisCategories = new Array(); var yNum = new Array(); for(var i = 0; i < data[0].data.length; i++){ xAxisCategories[i] = data[0].data[i].name; yNum[i] = data[0].data[i].y; } $('#container').highcharts({ chart: { type: 'column' }, title: { text: data[0].name }, subtitle: { text: '' }, xAxis: { categories: xAxisCategories, crosshair: true }, yAxis: { min: 0, title: { text: '數量' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.lf}</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0, dataLabels: { enabled:true, color:'#0000FF' } }, }, series: [{ name: '總公司', data: yNum }], exporting:{ enabled:false }, credits: { enabled: false }, }); } }); }); </script> </body> </html>