arcgis server for js添加柱状图

来源：互联网发布：java 值得看的源码编辑：程序博客网时间：2024/06/04 17:44

原文地址：http://www.mamicode.com/info-detail-987072.html

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>    <title>Simple Map</title>    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">    <style>        html, body, #map {            height: 100%;            margin: 0;            padding: 0;        }        body {            background-color: #FFF;            overflow: hidden;            font-family: "Trebuchet MS";        }    </style>    <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>    <script src="jquery-1.8.3.js"></script>    <script>        var CITY_DATA={            "total":34,            "items":[{"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212},                {"id":2,"name":"拉萨","X":91.162998,"Y":29.71042},                {"id":3,"name":"西宁","X":101.797303,"Y":36.593642},                {"id":4,"name":"兰州","X":103.584297,"Y":36.119086},                {"id":5,"name":"成都","X":104.035508,"Y":30.714179},                {"id":6,"name":"重庆","X":106.519115,"Y":29.478925},                {"id":7,"name":"贵阳","X":106.668071,"Y":26.457312},                {"id":8,"name":"昆明","X":102.726775,"Y":24.969385},                {"id":9,"name":"银川","X":106.167225,"Y":38.598524},                {"id":10,"name":"西安","X":108.967128,"Y":34.276112},                {"id":11,"name":"南宁","X":108.233931,"Y":22.748296},                {"id":12,"name":"海口","X":110.346181,"Y":19.96992},                {"id":13,"name":"广州","X":113.226683,"Y":23.18307},                {"id":14,"name":"长沙","X":112.947928,"Y":28.169916},                {"id":15,"name":"南昌","X":115.893715,"Y":28.652363},                {"id":16,"name":"福州","X":119.246768,"Y":26.070765},                {"id":17,"name":"台北","X":121.503567,"Y":25.008274},                {"id":18,"name":"杭州","X":120.183046,"Y":30.330584},                {"id":19,"name":"上海","X":121.449707,"Y":31.253361},                {"id":20,"name":"武汉","X":114.216597,"Y":30.579253},                {"id":21,"name":"合肥","X":117.262302,"Y":31.838353},                {"id":22,"name":"南京","X":118.805692,"Y":32.085022},                {"id":23,"name":"郑州","X":113.6511,"Y":34.746308},                {"id":24,"name":"济南","X":117.048331,"Y":36.60841},                {"id":25,"name":"石家","X":114.478215,"Y":38.033276},                {"id":26,"name":"太原","X":112.483066,"Y":37.798404},                {"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},                {"id":28,"name":"天津","X":117.351094,"Y":38.925719},                {"id":29,"name":"沈阳","X":123.296299,"Y":41.801604},                {"id":30,"name":"长春","X":125.26142,"Y":43.981984},                {"id":31,"name":"哈尔","X":126.567138,"Y":45.69381},                {"id":32,"name":"北京","X":116.068276,"Y":39.892225},                {"id":33,"name":"香港","X":114.093117,"Y":22.427852},                {"id":34,"name":"澳门","X":113.552482,"Y":22.184495}            ]        };        var map, mapCenter;        require([            "esri/map",            "esri/layers/ArcGISTiledMapServiceLayer",            "esri/layers/FeatureLayer",            "esri/layers/GraphicsLayer",            "esri/geometry/Point",            "esri/symbols/PictureMarkerSymbol",            "esri/symbols/SimpleLineSymbol",            "esri/renderers/SimpleRenderer",            "dojo/_base/Color",            "dojo/domReady!"],        function(Map,             Tiled,             FeatureLayer,             GraphicsLayer,             Point,             PictureMarkerSymbol,             SimpleLineSymbol,             SimpleRenderer,             Color)        {            map = new Map("map", {logo:false,slider: true});            var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");            map.addLayer(tiled,0);            mapCenter = new Point(103.847, 36.0473, map.spatialReference);            map.centerAndZoom(mapCenter,4);            var chartLayer = new GraphicsLayer({"id":"chartLayer"});            map.addLayer(chartLayer,1);            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("bar.png",20,30);                    symbol.setOffset(-10,18);                    var pt=new Point(items[i].X,items[i].Y,map.spatialReference);                    var graphic = new esri.Graphic(pt,symbol,items[i]);                    chartLayer.add(graphic);                }                map.on("zoom-end",function(zoom){                    var level=zoom.level;                    var symbol = new PictureMarkerSymbol("bar.png",20*(level-3),30*(level-3));                    symbol.setOffset(-10*(level-3),18*(level-3));                    var graphics = chartLayer.graphics;                    for(var i=0;i<graphics.length;i++){                        graphics[i].symbol = symbol;                        chartLayer.redraw();                    }                });            };            function showDetailChart(evt){                var graphic = evt.graphic;                graphic.symbol.url="bar_select.png";                chartLayer.redraw();                map.infoWindow.setTitle("<b>"+graphic.attributes.name+"</b>");                var content="<div style='text-align: center;'><img src='bar_detail.png'/></div>";                map.infoWindow.setContent(content);                map.infoWindow.show(graphic.geometry);                $(".maximize").hide();                $(".close").click(function(){                    restoreChart(evt);                });            };            function restoreChart(evt){                var graphic = evt.graphic;                graphic.symbol.url="bar.png";                chartLayer.redraw();            };        });    </script></head><body><div id="map"></div></body></html>

0 1