效果图：
<%@ 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>