地理信息系统(GIS)系列——ArcGIS 开发的各种示例

1、BDVecLayer 图层调用

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .base-map-ano {
            position: absolute;
            right: 0pt;
            top: 18pt;
            background: #e6edf1;
            border: #96aed1 1px solid;
            padding: 4px 5px;
            padding-left: 0px;
            padding-top: 0px;
            display: none;
            font-weight: normal;
        }
        .base-map {
            position: absolute;
            right: 15pt;
            top: 15pt;
            background: #f0f0f0;
            border: #96aed1 1px solid;
            width: auto;
            height: auto;
            z-index: 99;
            font: normal 11px "宋体",Arial;
            color: #868686;
        }
        .base-map-switch {
            padding: 4px 8px;
            float: left;
        }
        .base-map-switch-active {
            background: #e6edf1;
            font-weight: bold;
            color: #4d4d4d;
        }
        .base-map-switch:hover {
            cursor: pointer;
        }
        .base-map-switch-center {
            border: 1px #96aed1 solid;
            border-top: none;
            border-bottom: none;
        }
    </style>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'layer',
                location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/layer"
            }]
        };
    </script>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map;
        require([
        	"esri/map",
            "layer/BDVecLayer",
            "esri/layers/FeatureLayer",
            "esri/geometry/Point",
            "esri/SpatialReference",
            "dojo/domReady!"
        ], function (
        	Map,
            BDVecLayer,
            FeatureLayer,
            Point,
            SpatialReference
        ) {
               map = new Map("map", {
                   logo: false
               });
               var vecMap = new BDVecLayer();
               map.addLayer(vecMap);

               var pt = new Point(7038512.810510807, 2629489.7975553474, new SpatialReference({ wkid: 102100 }));
               map.centerAndZoom(pt, 5);
           });
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

2、BDimgLayer 图层调用

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .base-map-ano {
            position: absolute;
            right: 0pt;
            top: 18pt;
            background: #e6edf1;
            border: #96aed1 1px solid;
            padding: 4px 5px;
            padding-left: 0px;
            padding-top: 0px;
            display: none;
            font-weight: normal;
        }
        .base-map {
            position: absolute;
            right: 15pt;
            top: 15pt;
            background: #f0f0f0;
            border: #96aed1 1px solid;
            width: auto;
            height: auto;
            z-index: 99;
            font: normal 11px "宋体",Arial;
            color: #868686;
        }
        .base-map-switch {
            padding: 4px 8px;
            float: left;
        }
        .base-map-switch-active {
            background: #e6edf1;
            font-weight: bold;
            color: #4d4d4d;
        }
        .base-map-switch:hover {
            cursor: pointer;
        }
        .base-map-switch-center {
            border: 1px #96aed1 solid;
            border-top: none;
            border-bottom: none;
        }
    </style>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'layer',
                location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/layer"
            }]
        };
    </script>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map;
        require([
        	"esri/map",
            "layer/BDimgLayer",
            "esri/layers/FeatureLayer",
            "esri/geometry/Point",
            "esri/SpatialReference",
            "dojo/domReady!"
        ], function (
        	Map,
            BDimgLayer,
            FeatureLayer,
            Point,
            SpatialReference
        ) {
               map = new Map("map", {
                   logo: false
               });
               var vecMap = new BDimgLayer();
               map.addLayer(vecMap);

               var pt = new Point(7038512.810510807, 2629489.7975553474, new SpatialReference({ wkid: 102100 }));
               map.centerAndZoom(pt, 5);
           });
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

3、jQuery 构建树形图层列表

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var map;
            var layer, visible = [];
            require([
            	"dojo/parser", 
            	"dojo/_base/window", 
            	"dojo/dom-style", 
            	"dojo/topic", 
            	"dijit/registry",
                "esri/map", 
                "esri/layers/ArcGISTiledMapServiceLayer", 	
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "dojo/domReady!"
            ], function (
            	parser, 
            	win, 
            	domStyle, 
            	topic, 
            	registry, 
            	Map, 
            	ArcGISTiledMapServiceLayer, 
            	ArcGISDynamicMapServiceLayer
           	) {
                    parser.parse();
                    map = new Map("mapDiv");
                    layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer")
                    map.addLayer(layer);
                    if (layer.loaded) {
                        buildLayerList(layer);
                    } else {
                        dojo.connect(layer, "onLoad", buildLayerList);
                    }
                });
                
            function getChildrenNodes(parentnodes, node) {
                for (var i = parentnodes.length - 1; i >= 0; i--) {

                    var pnode = parentnodes[i];
                    // 如果是父子关系,为父节点增加子节点,退出for循环
                    if (pnode.id == node.pid) {
                        pnode.state = "closed";//关闭二级树
                        pnode.children.push(node);
                        return;
                    } else {
                        // 如果不是父子关系,删除父节点栈里当前的节点,
                        // 继续此次循环,直到确定父子关系或不存在退出for循环
                        parentnodes.pop();
                    }
                }
            }
            // 树的构造
            function buildLayerList(layer) {
                // 构建图层树形结构
                var layerinfos = layer.layerInfos;
                // jquery-easyui的tree用到的tree_data.json数组
                var treeList = [];
                // 保存所有的父亲节点
                var parentnodes = [];
                // 增加一个根节点
                var root = { "id": "rootnode", "text": "所有图层", "children": [] };
                var node = {};
              	// alert(layerinfos.length);
                if (layerinfos != null && layerinfos.length > 0) {

                    for (var i = 0, j = layerinfos.length; i < j; i++) {
                        var info = layerinfos[i];
                        if (info.defaultVisibility) {
                            visible.push(info.id);
                        }
                        // node为tree用到的json数据
                        node = {
                            "id": info.id,
                            "text": info.name,
                            "pid": info.parentLayerId,
                            "checked": info.defaultVisibility ? true : false,
                            "children": []
                        };
                        if (info.parentLayerId == -1) {
                            parentnodes.push(node);
                            root.children.push(node);
                        } else {
                            getChildrenNodes(parentnodes, node);
                            parentnodes.push(node);
                        }
                    }
                }
                treeList.push(root);
                // jquery-easyui的树        
                $("#tt").tree({
                    data: treeList,
                    // 使节点增加选择框
                    checkbox: true, 
                    // 更新显示选择的图层
                    onCheck: function (node, checked) {
                        var visible = [];

                        var nodes = $('#tt').tree("getChecked");
                        dojo.forEach(nodes, function (node) {
                            visible.push(node.id);
                        });
                        // 如果没有现实图层设置为-1
                        if (visible.length === 0) {
                            visible.push(-1);
                        }
                        layer.setVisibleLayers(visible);
                    }
                });
            }            
        });     
    </script>
</head>
<body class="soria">
    <div>
        <ul id="tt" style="margin-top:0;width:250px"></ul>
        <div id="mapDiv">
        </div>
    </div>
</body>
</html>

4、SVG 绘制 Polygon

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
        <polygon points="100,10 40,180 190,60 10,60 160,180"
                 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
    </svg>
</body>
</html>

5、HTML5 datalist 标签

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <input list="browsers">
    <datalist id="browsers">
	    <option value="Internet Explorer">
	    <option value="Firefox">
	    <option value="Chrome">
	    <option value="Opera">
	    <option value="Safari">
   	</datalist>
</body>
</html>

6、HTML5 keygen 标签

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form action="Default.aspx" method="get">
        用户名: <input type="text" name="usr_name">
        加密: <keygen name="security">
        <input type="submit">
    </form>
</body>
</html>

7、HTML5 output 标签

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        0
        <input type="range" id="a" value="50">100
        +<input type="number" id="b" value="50">
        =<output name="x" for="a b"></output>
    </form>

</body>
</html>

8、HTML5 input 新类型

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form>
        选择周: <input type="week" name="year_week">
    </form>
</body>
</html>

9、canvas 绘制矩形

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <canvas id="myCanvas" width="600" height="300" style="border:1px solid #000000;"></canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 150, 75);
    </script>
</body>
</html>

10、点击按钮获取当前坐标

<!DOCTYPE html>
<html>
<body>
    <p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
    <button onclick="getLocation()">点我</button>
    <script>
        var x = document.getElementById("demo");
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.watchPosition(showPosition);
            }
            else { x.innerHTML = "该浏览器不支持获取地理位置。"; }
        }
        function showPosition(position) {
            x.innerHTML = "纬度: " + position.coords.latitude +
            "<br>经度: " + position.coords.longitude;
        }
    </script>
</body>
</html>

11、定位要素并绘制要素

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Geolocation API</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
        html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
            width: 100%;
        }
        @-webkit-keyframes pulse {
            0% {
                opacity: 1.0;
            }

            45% {
                opacity: .20;
            }

            100% {
                opacity: 1.0;
            }
        }
        @-moz-keyframes pulse {
            0% {
                opacity: 1.0;
            }

            45% {
                opacity: .20;
            }

            100% {
                opacity: 1.0;
            }
        }
        #map_graphics_layer {
            -webkit-animation-duration: 3s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-name: pulse;
            -moz-animation-duration: 3s;
            -moz-animation-iteration-count: infinite;
            -moz-animation-name: pulse;
        }
    </style>

    <script src="https://js.arcgis.com/3.16compact/"> </script>
    <script>
        var map;
        var graphic;
        var currLocation;
        var watchId;
        require([
          "esri/map", 
          "esri/geometry/Point",
          "esri/symbols/SimpleMarkerSymbol", 
          "esri/symbols/SimpleLineSymbol",
          "esri/graphic", 
          "esri/Color", 
          "dojo/domReady!"
        ], function (
          Map, 
          Point,
          SimpleMarkerSymbol, 
          SimpleLineSymbol,
          Graphic, 
          Color
        ) {
            map = new Map("map", {
                basemap: "oceans",
                center: [-85.957, 17.140],
                zoom: 2
            });
            map.on("load", initFunc);

            function orientationChanged() {
                if (map) {
                	// 地图返回原来位置
                    map.reposition();
                    // 设置地图大小
                    map.resize();
                }
            }

            function initFunc(map) {
                if (navigator.geolocation) {
                    // 获取当前位置
                    navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
                    // 查看定位
                    watchId = navigator.geolocation.watchPosition(showLocation, locationError);
                } else {
                    alert("Browser doesn't support Geolocation. Visit http://caniuse.com to see browser support for the Geolocation API.");
                }
            }
            // 错误信息
            function locationError(error) {
                // error occurred so stop watchPosition
                if (navigator.geolocation) {
                    navigator.geolocation.clearWatch(watchId);
                }
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        alert("Location not provided");
                        break;

                    case error.POSITION_UNAVAILABLE:
                        alert("Current location not available");
                        break;

                    case error.TIMEOUT:
                        alert("Timeout");
                        break;

                    default:
                        alert("unknown error");
                        break;
                }
            }
            // 放大定位
            function zoomToLocation(location) {
                var pt = new Point(location.coords.longitude, location.coords.latitude);
                addGraphic(pt);
                map.centerAndZoom(pt, 12);
            }
            // 现实定位
            function showLocation(location) {
                // zoom to the users location and add a graphic
                var pt = new Point(location.coords.longitude, location.coords.latitude);
                if (!graphic) {
                    addGraphic(pt);
                } else { 
                	// move the graphic if it already exists
                    graphic.setGeometry(pt);
                }
                map.centerAt(pt);
            }
            // 添加位置图元
            function addGraphic(pt) {
                var symbol = new SimpleMarkerSymbol(
                  SimpleMarkerSymbol.STYLE_CIRCLE,
                  12,
                  new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([210, 105, 30, 0.5]),
                    8
                  ),
                  new Color([210, 105, 30, 0.9])
                );
                graphic = new Graphic(pt, symbol);
                map.graphics.add(graphic);
            }
        });
    </script>
</head>

<body onorientationchange="orientationChanged();">
    <div id="map" style="width:100%; height:100%;"></div>
</body>
</html>

12、HeatmapRenderer:热图渲染适配器

步骤:
  1. 绘制底图
  2. 获取热点数据 FeatureLayer,FeatureServer
  3. HeatmapRenderer
  4. 地图中添加热点数据
<!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>FeatureLayer using HeatmapRenderer</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
  <style>
    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.16/"></script>
  <script>
    var map;
    require([
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "esri/map",
        "esri/renderers/HeatmapRenderer",
        "dojo/domReady!"
      ], function (
      	InfoTemplate, 
      	FeatureLayer, 
      	Map, 
      	HeatmapRenderer
      ){

        // --------------------------------------------------------------------
        // Formatting functions for attribute values in the InfoWindow//定义格式化信息
        // Data is not what you expect, turn your dirty data into
        // readable stuff in the infowindow
        // --------------------------------------------------------------------
        formatFatalities = function (value, key, data){
          var result = value > 1 ? value + " people " : value + " person ";
          return result;
        }
        formatGender = function (value, key, data){
          var lookup = {1: "male", 2: "female", 8: "unknown", 9: "unknown"};
          return lookup[value];
        }
        formatConditions = function (value, key, data){
          var lookup = {0: "No Additional Atmospheric Conditions", 1: "Clear", 2: "Rain", 3: "Sleet, Hail (Freezing Rain or Drizzle)", 4: "Snow", 5: "Fog, Smog, Smoke", 6: "Severe Crosswinds", 7: "Blowing Sand, Soil, Dirt", 8: "Other", 10: "Cloudy", 11: "Blowing Snow", 98: "Not Reported", 99: "Unknown"};
          if (value !== 1) {
            return "Road conditions: " + lookup[value] + "<br>";
          }
        }
        formatWorkZone = function (value, key, data){
          var lookup = {0: "None", 1: "Construction", 2: "Maintenance", 3: "Utility", 4: "Work Zone, Type Unknown"};
          if (value !== 0) {
            return "Work Zone: " + lookup[value] + "<br>";
          }
        }
        formatAlcoholTestResults = function (value, key, data){
          // --------------------------------------------------------------------
          // The field is a string and we only want values of 8 - 94 since the
          // California legal limit is 0.08% BAC. If value is between 8 and 94
          // then we will report that they were over the legal limit.
          // --------------------------------------------------------------------
          var isMatch = value.match(/\b(?!9[5-9])[0-9][0-9]\b|\b[8-9]{1}\b/m);
          if (isMatch) {
            return "Driver was over the legal limit for alcohol";
          }
        }

        map = new Map("map", {
          basemap: "gray",
          center: [-119.11, 36.65],
          zoom: 7,
          minZoom: 7,
          maxZoom: 9
        });
        var infoContentDesc = "<p>${numfatal:formatFatalities} died when a ${age} year old ${sex:formatGender} was involved in a fatal speeding accident.</p>";
        var infoContentDetails = "${atmcond:formatConditions}${conszone:formatWorkZone}${alcres:formatAlcoholTestResults}";
        var infoContent = infoContentDesc + infoContentDetails;
        var infoTemplate = new InfoTemplate("Accident details", infoContent);

        var serviceURL = "//services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/2012_CA_NHTSA/FeatureServer/0";
        var heatmapFeatureLayerOptions = {
          mode: FeatureLayer.MODE_SNAPSHOT,
          infoTemplate: infoTemplate,
          outFields: [
            "atmcond",
            "numfatal",
            "conszone",
            "age",
            "alcres",
            "sex"
          ]
        };
        var heatmapFeatureLayer = new FeatureLayer(serviceURL, heatmapFeatureLayerOptions);
        var heatmapRenderer = new HeatmapRenderer();
        heatmapFeatureLayer.setRenderer(heatmapRenderer);
        map.addLayer(heatmapFeatureLayer);
      });
  </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

13、打印服务

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      body{
        background-color: #fff; overflow:hidden; 
        font-family: sans-serif;
      } 
      label {
        display: inline-block;
        padding: 5px 5px 0 5px;
        font-weight: 400;
        font-size: 12pt;
      }
      .button {
        width: 100%;
        margin: 3px auto;
        text-align: center;
      }
      #header {
        padding-top: 4px;
        padding-right: 15px;
        color: #444; 
        font-size:16pt; text-align:right;font-weight:bold;
        height:55px;
        background: #fff;
        border-bottom: 1px solid #444;
      }
      #subheader {
        font-size:small;
        color: #444;
        text-align:right;
        padding-right:20px;
      }
      #rightPane{
        margin: 0;
        padding: 10px;
        background-color: #fff;
        color: #421b14;
        width: 180px;
      }

      .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
      #ds-h div { width: 100%; }
      #ds-l div, #ds-r div { height: 100%; }
      #ds-r div { right: 0; }
      #ds .o1 { filter: alpha(opacity=10); opacity: .1; }
      #ds .o2 { filter: alpha(opacity=8); opacity: .08; }
      #ds .o3 { filter: alpha(opacity=6); opacity: .06; }
      #ds .o4 { filter: alpha(opacity=4); opacity: .04; }
      #ds .o5 { filter: alpha(opacity=2); opacity: .02; }
      #ds .h1 { height: 1px; }
      #ds .h2 { height: 2px; }
      #ds .h3 { height: 3px; }
      #ds .h4 { height: 4px; }
      #ds .h5 { height: 5px; }
      #ds .v1 { width: 1px; }
      #ds .v2 { width: 2px; }
      #ds .v3 { width: 3px; }
      #ds .v4 { width: 4px; }
      #ds .v5 { width: 5px; }

      /* make all dijit buttons the same width */
      .dijitButton .dijitButtonNode, #drawingWrapper, #printButton {
        width: 160px;
      }
      .esriPrint {
        padding: 0;
      }
    </style>

    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var app = {};
      app.map = null; app.toolbar = null; app.tool = null; app.symbols = null; app.printer = null;
      require([
        "esri/map", 
        "esri/toolbars/draw", 
        "esri/dijit/Print",
        "esri/layers/ArcGISTiledMapServiceLayer", 
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/LayerDrawingOptions",
        "esri/symbols/SimpleMarkerSymbol", 
        "esri/symbols/SimpleLineSymbol", 
        "esri/symbols/SimpleFillSymbol", 
        "esri/graphic",
        "esri/renderers/ClassBreaksRenderer",
        "esri/config",
        "dojo/_base/array", 
        "esri/Color", 
        "dojo/parser", 
        "dojo/query", 
        "dojo/dom", 
        "dojo/dom-construct", 
        "dijit/form/CheckBox", 
        "dijit/form/Button",
        "dijit/layout/BorderContainer", 
        "dijit/layout/ContentPane", 
        "dojo/domReady!"
      ], function(
        Map, 
        Draw, 
        Print,
        ArcGISTiledMapServiceLayer, 
        ArcGISDynamicMapServiceLayer,
        LayerDrawingOptions,
        SimpleMarkerSymbol, 
        SimpleLineSymbol,
        SimpleFillSymbol, 
        Graphic,
        ClassBreaksRenderer,
        esriConfig,
        arrayUtils, 
        Color, 
        parser, 
        query, 
        dom, 
        domConstruct, 
        CheckBox, 
        Button
      ) {
        parser.parse();

        esriConfig.defaults.io.proxyUrl = "/proxy/";
        
        app.map = new Map("map", {
          center: [-90.733, 30.541],
          zoom: 8
        });
        app.map.on("load", function() {
          app.toolbar = new Draw(app.map);
          app.toolbar.on("draw-end", addToMap);
        });

        // 打印对象
        app.printer = new Print({
          map: app.map,
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
        }, dom.byId("printButton"));
        app.printer.startup();
        // 底图数据
        var url = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
        var tiledLayer = new ArcGISTiledMapServiceLayer(url, { "id": "Ocean" });
        app.map.addLayer(tiledLayer);
       	// 动态数据
        var layer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", {
          id: "County Population",
          opacity: 0.5
        });
        layer.setVisibleLayers([3]);
        // 数据渲染
        var layerDefs = [];
        layerDefs[3] = "state_name = 'Louisiana'";
        layer.setLayerDefinitions(layerDefs);
        // 类专题
        var renderer = new ClassBreaksRenderer(null, "pop2000");
        var outline = new SimpleLineSymbol("solid", new Color([0,0,0,0.5]), 1);
        var colors = [
          new Color([255,255,178,0.5]),
          new Color([254,204,92,0.5]),
          new Color([253,141,60,0.5]),
          new Color([240,59,32,0.5]),
          new Color([189,0,38,0.5])
        ];
        renderer.addBreak(0, 20000, new SimpleFillSymbol("solid", outline, colors[0]));
        renderer.addBreak(20000, 50000, new SimpleFillSymbol("solid", outline, colors[1]));
        renderer.addBreak(50000, 100000, new SimpleFillSymbol("solid", outline, colors[2]));
        renderer.addBreak(10000, 1000000, new SimpleFillSymbol("solid", outline, colors[3]));
        renderer.addBreak(1000000, 10000000, new SimpleFillSymbol("solid", outline, colors[4]));
        var drawingOptions = new LayerDrawingOptions();
        drawingOptions.renderer = renderer; 
        // set the drawing options for the relevant layer
        // optionsArray index corresponds to layer index in the map service
        var optionsArray = [];
        optionsArray[3] = drawingOptions;
        layer.setLayerDrawingOptions(optionsArray);
        app.map.addLayer(layer);

        // create a check box for each map layer
        arrayUtils.forEach(["County Population", "Ocean"], function(id) {
          new CheckBox({
            id: "cb_" + id,
            name: "cb_" + id,
            checked: true,
            onChange: function(bool) {
              bool ? 
                app.map.getLayer(this.id.split("_")[1]).show() :
                app.map.getLayer(this.id.split("_")[1]).hide();
            }
          }, domConstruct.create("input", { 
            id: "lyr_" + id 
          })).placeAt(dom.byId("layerToggle"));

          // create a label for the check box
          var label = domConstruct.create('label', { 
            "for": "cb_" + id,
            "innerHTML": id
          });
          domConstruct.place(label, dom.byId("layerToggle"));
          domConstruct.place(domConstruct.create("br"), dom.byId("layerToggle"));
        });

        // 点线面填充定义    
        app.symbols = {};
        app.symbols.point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol(), new Color([0, 255, 0, 0.75]));
        app.symbols.polyline = new SimpleLineSymbol("solid", new Color([255, 128, 0]), 2);
        app.symbols.polygon = new SimpleFillSymbol().setColor(new Color([255,255,0,0.25]));
        app.symbols.circle = new SimpleFillSymbol().setColor(new Color([0, 0, 180, 0.25]));

        // 绘图绑定事件
        query(".drawing").forEach(function(btn) {
          var button = new Button({
            label: btn.innerHTML,
            onClick: function() {
              activateTool(this.id);
            }
          }, btn);
        });

        function activateTool(type) {
          app.tool = type.replace("freehand", "");
          app.toolbar.activate(type);
          app.map.hideZoomSlider();
        }

        function addToMap(evt) {
          app.toolbar.deactivate();
          app.map.showZoomSlider();
          
          var graphic = new Graphic(evt.geometry, app.symbols[app.tool]);
          app.map.graphics.add(graphic);
        }
      });
    </script>
  </head>
  <body class="nihilo">
    <div id="mainWindow" 
         data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="header" 
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'top'">
        Print Dijit:  Out of the Box Printing for the ArcGIS API for JavaScript
        <div id="subheader">Requires ArcGIS Server 10.1</div>
      </div>
      <div id="map" class="shadow" 
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
        
        <div id="ds">
          <div id="ds-h">
            <div class="ds h1 o1"></div>
            <div class="ds h2 o2"></div>
            <div class="ds h3 o3"></div>
            <div class="ds h4 o4"></div>
            <div class="ds h5 o5"></div>
          </div>
          <div id="ds-r">
            <div class="ds v1 o1"></div>
            <div class="ds v2 o2"></div>
            <div class="ds v3 o3"></div>
            <div class="ds v4 o4"></div>
            <div class="ds v5 o5"></div>
          </div>
        </div> 
            
      </div>
      <div id="rightPane"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'right'">

        <div id="printButton"></div>
        <hr />
        
        <div id="drawingWrapper">
          Add some graphics:
          <div id="point" class="drawing">Point</div>
          <div id="freehandpolyline" class="drawing">Freehand Polyline</div>
          <div id="freehandpolygon" class="drawing">Freehand Polygon</div>
          <div id="circle" class="drawing">Circle</div>
        </div>
        <hr />
        <div id="layerToggle">
          Toggle Layers: <br />          
        </div>
      </div>
    </div>
  </body>
</html>

14、自定义加载天地图

步骤:
  1. 配置环境,就是我们 JavaScript 加载包的环境
  2. 定义我们的天地图加载组件
  3. 在UI界面调用我们的组件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="http://localhost:13103/js/esri/css/esri.css">
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{ name: 'tdlib', location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/tdlib" }]
        };
    </script>
    <script src="http://localhost:13103/js/init.js"></script>
    <script>
        var map;
        require([
        	"esri/map", 
        	"tdlib/TDTLayer",
            "tdlib/TDTAnnoLayer",
            "esri/layers/FeatureLayer",
            "esri/geometry/Point",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "dojo/_base/Color", 
            "dojo/domReady!"
        ], function (
        	Map,
            TDTLayer, 
            TDTAnnoLayer, 
            FeatureLayer, 
            Point, 
            SimpleFillSymbol, 
            SimpleLineSymbol, 
            Color
        ) {
              map = new Map("map", { logo: false });
              var basemap = new TDTLayer();
              map.addLayer(basemap);
              // 城市标注
              var annolayer = new TDTAnnoLayer();
              map.addLayer(annolayer);
              
              var pt = new Point(103.847, 36.0473);
              map.centerAndZoom(pt, 3);
          }); 
     </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

15、网络分析——路径范围分析

ServiceAreaTask

  • 范围服务分析类,根据时间分析,可以到达的路径范围

ServiceAreaParameters

  • 范围服务分析参数类

ServiceAreaSolveResult

  • 返回结果类
步骤:
  1. 获取坐标点
  2. 使用时间组件
<!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>Basic Service Area</title>  
  <link rel="stylesheet" href="http://localhost:13103/js/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://localhost:13103/js/esri/css/esri.css">
  <style> 
    body, html, #main { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
      width: 100%;
    }
  </style> 
  
  <script src="http://localhost:13103/js/init.js"></script>
  <script>
    var map, serviceAreaTask, params, clickpoint;

    require([
      "esri/map", 
      "esri/config", 
      "esri/tasks/ServiceAreaTask", 
      "esri/tasks/ServiceAreaParameters", 
      "esri/tasks/FeatureSet",
      "esri/symbols/SimpleMarkerSymbol", 
      "esri/symbols/SimpleLineSymbol", 
      "esri/symbols/SimpleFillSymbol",
      "esri/geometry/Point", 
      "esri/graphic",
      "dojo/parser", 
      "dojo/dom", 
      "dijit/registry", 
      "esri/Color", 
      "dojo/_base/array",
      "dijit/layout/BorderContainer", 
      "dijit/layout/ContentPane", 
      "dijit/form/HorizontalRule", 
      "dijit/form/HorizontalRuleLabels", 
      "dijit/form/HorizontalSlider",
      "dojo/domReady!"
    ], function(
      Map, 
      esriConfig, 
      ServiceAreaTask, 
      ServiceAreaParameters, 
      FeatureSet, 
      SimpleMarkerSymbol, 
      SimpleLineSymbol, 
      SimpleFillSymbol,
      Point, 
      Graphic,
      parser, 
      dom, 
      registry,
      Color, 
      arrayUtils
    ) {
      parser.parse();

      // This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to  
      // replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic 
      // for details on setting up a proxy page.
      esriConfig.defaults.io.proxyUrl = "/proxy/";
      
      map = new Map("map", { 
        basemap: "streets",
        center: [-122.447, 37.781],
        zoom: 15
      });

      map.on("click", mapClickHandler);

      params = new ServiceAreaParameters();
      // 数字范围值,时间值
      params.defaultBreaks= [1];
      params.outSpatialReference = map.spatialReference;
      // 如果这是真的,分析结果将返回
      // params.returnFacilities = false;
      
      serviceAreaTask = new ServiceAreaTask("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area");
            
      registry.byId("hslider").on("change", updateHorizontalLabel);
      updateHorizontalLabel();

      // Create function that updates label when changed
      function updateHorizontalLabel() {
        // Get access to nodes/widgets we need to get/set values
        // 获取部件
        var hSlider = registry.byId("hslider");
        var label = dom.byId("decValue");
        // Update label
        // 获取值
        label.innerHTML = hSlider.get("value");
        // 数字范围值
        params.defaultBreaks = [ hSlider.value / 60 ];
        if (clickpoint) {
          mapClickHandler(clickpoint);
        }
      }
      
      function mapClickHandler(evt) {
        clickpoint = evt;
        map.graphics.clear();
        // define the symbology used to display the results and input point
        var pointSymbol = new SimpleMarkerSymbol(
          "diamond",
          20,
          new SimpleLineSymbol(
            "solid",
            new Color([88,116,152]), 2
          ),
          new Color([88,116,152,0.45])
        );
        var inPoint = new Point(evt.mapPoint.x, evt.mapPoint.y, map.spatialReference);//点
        var location = new Graphic(inPoint, pointSymbol);
		// 添加到地图中
        map.graphics.add(location);
        var features = [];
        features.push(location);
        var facilities = new FeatureSet();
        facilities.features = features;
        params.facilities = facilities;

        // 分析出区域
        serviceAreaTask.solve(params,function(solveResult){
          var polygonSymbol = new SimpleFillSymbol(
            "solid",  
            new SimpleLineSymbol("solid", new Color([232,104,80]), 2),
            new Color([232,104,80,0.25])
          );
          arrayUtils.forEach(solveResult.serviceAreaPolygons, function(serviceArea){
            serviceArea.setSymbol(polygonSymbol);
            map.graphics.add(serviceArea);
          });
          
        }, function(err){
          console.log(err.message);
        });
      }
    });
  </script>
</head>

<body class="claro"> 
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0px;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <b>Click to find the service area polygon</b>
      <div style="width: 400px; margin: 10px">        
        <ol data-dojo-type="dijit/form/HorizontalRuleLabels"
          data-dojo-props="
            container: 'topDecoration',
            style: 'height: 1.2em; font-weight: bold; margin: 0 12px;'">
          <li>0</li>
          <li>0:20</li>
          <li>0:40</li>
          <li>1:00</li>
          <li>1:20</li>
          <li>1:40</li>
          <li>2:00</li>
        </ol>
        <div data-dojo-type="dijit/form/HorizontalRule"
          data-dojo-props="
            container: 'topDecoration',
            count: 7,
            style: 'height: 5px; margin: 0 12px;'">
        </div>
        <input id="hslider" value="60" type="range"
          data-dojo-type="dijit/form/HorizontalSlider"
          data-dojo-props="
            minimum: 0,
            maximum: 120,
            showButtons: false,
            discreteValues: 25">
        <div style="padding-top: 10px; text-align: center;">Travel time: <strong id="decValue"></strong> seconds</div>
      </div>
    </div> 
    <div id="map" dojotype="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>    
  </div>
</body>
</html>

16、网络分析-最短路径分析

RouteTask

  • 路径分析

RouteParameters

  • 路径分析参数类

RouteResult

  • 返回结果
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Simple Routing - RouteTask - 4.0</title>
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #paneDiv {
            position: absolute;
            top: 10px;
            left: 62px;
            padding: 0 12px 0 12px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
    <script src="https://js.arcgis.com/4.0/"></script>
    <script>
        require([
          "esri/Map",
          "esri/views/MapView",
          "esri/Graphic",
          "esri/layers/GraphicsLayer",
          "esri/tasks/RouteTask",
          "esri/tasks/support/RouteParameters",
          "esri/tasks/support/FeatureSet",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/Color",
          "esri/core/urlUtils",
          "dojo/on",
          "dojo/domReady!"
        ], function (
          Map, 
          MapView, 
          Graphic, 
          GraphicsLayer, 
          RouteTask, 
          RouteParameters,
          FeatureSet, 
          SimpleMarkerSymbol, 
          SimpleLineSymbol, 
          Color, 
          urlUtils, 
          on
        ) {

            // proxy the route requests to avoid prompt for log in
            urlUtils.addProxyRule({
                urlPrefix: "route.arcgis.com",
                proxyUrl: "/sproxy/"
            });

            // 路径服务
            var routeTask = new RouteTask({
                url: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
            });

            // 停止和路线的结果将存储在这一层
            var routeLyr = new GraphicsLayer();

            // 开始的路径参数
            var routeParams = new RouteParameters({
                stops: new FeatureSet(),
                // autocasts as new SpatialReference()
                outSpatialReference: { 
                    wkid: 3857
                }
            });

            // 定义图标用来显示停止
            var stopSymbol = new SimpleMarkerSymbol({
                style: "cross",
                size: 15,
                // autocasts as new SimpleLineSymbol()
                outline: { 
                    width: 4
                }
            });

            // 定义图标用来显示路线
            var routeSymbol = new SimpleLineSymbol({
                color: [0, 0, 255, 0.5],
                width: 5
            });

            var map = new Map({
                basemap: "streets",
                // Add the route layer to the map
                layers: [routeLyr] 
            });
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-117.195, 34.057],
                zoom: 14
            });
          
            on(view, "click", addStop);

            function addStop(evt) {
                // 添加一个点在地图上的位置单击
                var stop = new Graphic({
                    geometry: evt.mapPoint,
                    symbol: stopSymbol
                });
                routeLyr.add(stop);
                // 执行路由任务如果2个或更多停止输入
                routeParams.stops.features.push(stop);
                if (routeParams.stops.features.length >= 2) {
                    routeTask.solve(routeParams).then(showRoute);
                }
            }
            // 将解决路由添加到地图图形
            function showRoute(data) {
                var routeResult = data.routeResults[0].route;
                routeResult.symbol = routeSymbol;
                routeLyr.add(routeResult);
            }
        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>
    <div id="paneDiv">
        <div></div>
    </div>
</body>
</html>

17、轨迹回放

步骤:
  1. 定义ServiceAreaTask,ServiceAreaParameters,发布/NAServer/Service Area
  2. 获取参考点
  3. 根据我们的参数,设置时间(ServiceAreaParameters 时间数字)
  4. 开始分析
  5. 展现在地图中
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:13103/js/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost:13103/js//esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:13103/js/init.js"></script>
    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.toolbars.draw");
        dojo.require("esri.graphic");
        dojo.require("esri.layers.graphics");
        dojo.require("esri.geometry");
        var ptcount = "2768854.912601498,-1111489.0981985647/4079902.8217484932,-1091921.2189575648/6750918.338144982,-945162.1246500653/";
        var list;
        var defaultSymbol;
        var myMap;
        var icount;
        var i = 0;
        function ptcounntSplit() {
        	// 坐标点数组
	        list =ptcount.split("/");
	        // 坐标点的个数
	        icount=list.length;
        }
        function pPosition() {
            var point = new esri.geometry.Point(2671015.5163964974, -1708309.4150490611, new esri.SpatialReference({ wkid: 102100 }));
            var infoTemplate = new esri.InfoTemplate("<a href='javascript:showDetail()'>查看详情</a>");
            var symbol = new esri.symbol.SimpleMarkerSymbol();
            var graphic = new esri.Graphic(point, symbol, null, infoTemplate);
            myMap.graphics.add(graphic);
            myMap.centerAt(point);
        }
        function gocount() {
	        var pointSymbol = new esri.symbol.SimpleMarkerSymbol();
	        pointSymbol.setOutline= new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([255, 123,222]), 10);
	        pointSymbol.setSize(20);
	        pointSymbol.setColor(new dojo.Color([0, 255, 0, 0.25]));
	        var geometry = new esri.geometry.Point(list[i].substring(0, list[i].indexOf(',')), list[i].substring(list[i].indexOf(',') + 1, list[i].length), new esri.SpatialReference({ wkid: 102100 }));
	        var graphic = new esri.Graphic(geometry, pointSymbol);
	        myMap.graphics.add(graphic);
	        var extent =myMap.extent;
	        if(!extent.contains(graphic.geometry)) {
	            myMap.centerAt(geometry);
	        }
	        i++;
        }
        // 使用时间函数,进行轨迹回放
        function gos() {
            // 绘制点
            gocount();
	        if (i <icount-1) {
	            setTimeout("gos()", "2000");
	        }
	        else {
	            clearTimeout("gos()");
	        }
        }
        function init() {
            myMap = new esri.Map("mapDiv");
            var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
            myMap.addLayer(myTiledMapServiceLayer);
            myMap.setZoom(4);  
        }
        dojo.addOnLoad(init);
    </script>
</head>
<body class="tundra">
    <table>
        <tr>
            <td>
                <div id="mapDiv" style="width:1500px; height:800px;border:1px solid #000;"></div>
            </td>
            <td>
                <input id="Button1" type="button" value="定位" onclick='pPosition()' />
                <input id="Button2" type="button" value="回放" onclick=' ptcounntSplit(); gos()' />
            </td>
        </tr>
    </table>
    <div id="div1"></div>
    <div id="div2">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</body>
</html>

18、饼图嵌入地图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>饼图专题图</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <link href="ChartInfoWindow.css" rel="stylesheet" />
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        var dojoConfig = {
            packages: [{
                name: "CustomModules",
                location: location.pathname.replace(/\/[^/]+$/, "") + "/js/CustomModules"
            }]
        };
    </script>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        require([
        	"esri/map", 
        	"esri/layers/FeatureLayer", 
        	"esri/layers/ArcGISTiledMapServiceLayer", 
        	"esri/symbols/SimpleLineSymbol", 
        	"esri/symbols/SimpleFillSymbol",
            "esri/renderers/SimpleRenderer", 
            "esri/Color",
            "CustomModules/ChartInfoWindow", 
            "CustomModules/CustomTheme", 
            "CustomModules/geometryUtils",
            "dojo/_base/array", 
            "dojo/dom-construct", 
            "dojo/_base/window",
            "dojox/charting/Chart", 
            "dojox/charting/action2d/Highlight", 
            "dojox/charting/action2d/Tooltip", 
            "dojox/charting/plot2d/Pie",
            "dojo/domReady!"
        ], function (
          	Map, 
          	FeatureLayer, 
          	ArcGISTiledMapServiceLayer,
          	SimpleLineSymbol, 
          	SimpleFillSymbol,
          	SimpleRenderer, 
          	Color, 
          	ChartInfoWindow, 
          	CustomTheme, 
          	geometryUtils,
          	array, 
          	domConstruct, 
          	win,
          	Chart, 
          	Highlight, 
          	Tooltip
        ) {
            var map = new Map("map", {
                center: [-95.625, 39.243],
                zoom: 4,
                slider: false
            });
            var agoServiceURL = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
            var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
            map.addLayer(agoLayer);

            var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1", {
                mode: FeatureLayer.MODE_SNAPSHOT,
                outFields: ["STATE_NAME", "WHITE", "BLACK", "AMERI_ES", "ASIAN_PI", "OTHER"]
            });
            var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
            var renderer = new SimpleRenderer(defaultSymbol);
            featureLayer.setRenderer(renderer);
            featureLayer.on("update-end", function (evt) {
                var showFields = ["WHITE", "BLACK", "AMERI_ES", "ASIAN_PI", "OTHER"];
                createChartInfoWindow(featureLayer, showFields);
            });
            map.addLayer(featureLayer);

            function createChartInfoWindow(layer, showFields) {
                var layerId = layer.id;
              
                var featureSums = [];
                array.forEach(layer.graphics, function (graphic) {
                    var sum = 0;
                    for (var i = 0, j = showFields.length; i < j; i++) {
                        sum += graphic.attributes[showFields[i]];
                    }

                    featureSums.push(sum);
                });
                var sumMax = -10000;
                // 获取和的最大值
                array.forEach(featureSums, function (featureSum) {
                    if (sumMax < featureSum) sumMax = featureSum;
                });

                array.forEach(layer.graphics, function (graphic, index) {
                    var infoWindow = new ChartInfoWindow({
                        domNode: domConstruct.create('div', null, document.getElementById('map'))
                    });
                    // 信息窗口
                    infoWindow.setMap(map);
					// 图层中属性的和
                    var curSum = 0;
                    for (var i = 0, j = showFields.length; i < j; i++) {
                        curSum += layer.graphics[index].attributes[showFields[i]];
                    }
                    // 窗口的半径
                    var radius = 80 * curSum / sumMax;
                    var styleStr = "width:" + radius + "px;height:" + radius + "px";
                    // 创建饼图区域标签
                    var nodeChart = domConstruct.create("div", { id: 'nodeTest' + index, style: styleStr }, win.body());
                    // 创建饼图
                    var chart = makePieChart(nodeChart, layer.graphics[index].attributes, showFields);
                    // 设置宽度,高度                 
                    infoWindow.resize(radius + 2, radius + 2);
                    // 设置居中
                    infoWindow.align = "Center";
					// 获取中心点
                    var labelPt = geometryUtils.getPolygonCenterPoint(graphic.geometry);
                    infoWindow.setContent(nodeChart);
                    infoWindow.__mcoords = labelPt;
                    infoWindow.show(map.toScreen(labelPt));
                });
            }
          
            function makePieChart(node, attributes, showFields) {
                var chart = new Chart(node, { margins: { l: 0, r: 0, t: 0, b: 0 } }).
                                setTheme(CustomTheme).
                                addPlot("default", { type: "Pie" });
                var serieValues = [];
                // 属性
                var regionName = attributes["STATE_NAME"];
                // 要显示字段的长度
                var length = showFields.length;
                for (var i = 0; i < length; i++) {
                    serieValues.push({ y: attributes[showFields[i]], legend: showFields[i], region: regionName });
                }
                // 添加信息到饼状图
                chart.addSeries(showFields[i], serieValues, { stroke: { color: "black" } });
				// 创建一个高亮显示
                var anim1 = new Highlight(chart, "default", {
                    highlight: function (e) {
                        return "lightskyblue";
                    }
                });
                // 创建一个提示
                var anim2 = new Tooltip(chart, "default", {
                    text: function (o) {
                        var fieldName = o.chart.series[0].data[o.x].legend;
                        return (o.chart.series[0].data[o.x].region + " " + fieldName + ":" + o.y);
                    }
                });
                chart.render();

                return chart;
            }
        });
    </script>
</head>
<body class="claro">
    <div id="map"></div>
</body>
</html>
## ChartInfoWindow.js

define([
	"dojo/_base/declare", 
	"esri/InfoWindowBase", 
	"esri/domUtils", 
	"esri/geometry/Point", 
	"dojo/_base/lang", 
	"dojo/dom-class", 
	"dojo/dom-construct", 
	"dojo/dom-style", 
	"dojo/_base/array"
], function (
	declare, 
	InfoWindowBase, 
	domUtils, 
	Point, 
	lang, 
	domClass, 
	domConstruct, 
	domStyle, 
	array
) {
    return declare(
    	// 父类
		InfoWindowBase, 		{
		    coords: null,
		    align: "Middle_Top",

		    constructor: function (parameters) {
		        lang.mixin(this, parameters);
		        isContentShowing = false;

		        domClass.add(this.domNode, "myInfoWindow");
		        this._content = domConstruct.create("div", { "class": "content" }, this.domNode);
		        this._eventConnections = [];
		        domUtils.hide(this.domNode);
		        this.isShowing = false;
		    },

		    setMap: function (map) {
		        this.inherited(arguments);
		        this._eventConnections.push(map.on("pan", lang.hitch(this, this.__onMapPan)));
		        this._eventConnections.push(map.on("extent-change", lang.hitch(this, this.__onMapExtChg)));
		        this._eventConnections.push(map.on("zoom-start", lang.hitch(this, this.__onMapZmStart)));
		        this._eventConnections.push(map.on("zoom", lang.hitch(this, this.onMapZm)));
		    },

		    setContent: function (content) {
		        this.place(content, this._content);
		    },

		    move: function (point, isDelta) {
		        if (isDelta) {
		            point = this.coords.offset(point.x, point.y);
		        }
		        else {
		            this.coords = point;
		            if (this.mapCoords) {
		                this.mapCoords = this.map.toMap(point);
		            }
		        }
		        this._adjustPosition(point);
		    },

		    __onMapPan: function (evt) {
		        this.move(evt.delta, true);
		    },

		    onMapZm: function (evt) {
		        var extent = evt.extent, zoomFactor = evt.zoomFactor, anchor = evt.anchor;
		        var x = (this.coords.x - anchor.x) * zoomFactor + anchor.x;
		        var y = (this.coords.y - anchor.y) * zoomFactor + anchor.y;
		        var newPostion = new Point(x - this.coords.x, y - this.coords.y);
		        this.move(newPostion, true);
		    },

		    __onMapZmStart: function () {},

		    __onMapExtChg: function (evt) {
		        var extent = evt.extent, delta = evt.delta, levelChange = evt.levelChange;

		        var map = this.map, mapPoint = this.mapCoords;
		        if (mapPoint) {
		            if (this.isShowing == true) {
		                this.show(mapPoint);
		            }
		        }
		        else {
		            var screenPoint;
		            if (levelChange) {
		                screenPoint = map.toScreen(this.__mcoords);
		            }
		            else {
		                screenPoint = this.coords.offset(
                            (delta && delta.x) || 0,
                            (delta && delta.y) || 0
                        );
		            }
		            if (this.isShowing == true) {
		                this.show(screenPoint);
		            }
		        }
		    },

		    show: function (location) {
		        if (location.spatialReference) {
		            this.mapCoords = location;
		            location = this.map.toScreen(location);
		        }
		        else {
		            this.mapCoords = null;
		            this.coords = location;
		            if (typeof (this.__mcoords) === "undefined") {
		            }
		        }

		        this._adjustPosition(location);
		        domUtils.show(this.domNode);
		        this.isShowing = true;
		        this.onShow();
		    },

		    hide: function () {
		        domUtils.hide(this.domNode);
		        this.isShowing = false;
		        this.onHide();
		    },

		    resize: function (width, height) {
		        domStyle.set(this._content, {
		            width: width + "px",
		            height: height + "px"
		        });

		        if (this.coords) {
		            this._adjustPosition(this.coords);
		        }
		    },

		    _adjustPosition: function (location) {
		        var width = domStyle.get(this._content, "width");
		        var height = domStyle.get(this._content, "height");
		        var left = "", top = "";
		        if (this.align == "Center") {
		            left = (location.x - width / 2) + "px";
		            top = (location.y - height / 2) + "px";
		        }
		        else {
		            left = (location.x - width / 2) + "px";
		            top = (location.y - height) + "px";
		        }

		        domStyle.set(this.domNode, {
		            left: left,
		            top: top
		        });
		    },

		    destroy: function () {
		        array.forEach(this._eventConnections, function (handle) {
		            handle.remove();
		        });
		        domConstruct.destroy(this.domNode);
		        this._closeButton = this._title = this._content = this._eventConnections = null;
		    }
		}
	);
});
## CustomTheme.js

define(["dojox/charting/Theme", "dojo/_base/Color"], function (Theme, Color) {
    var CustomTheme = new Theme({
        chart: {
            stroke: null,
            fill: "inherit"
        },
        plotarea: {
            stroke: null,
            fill: "transparent"
        },
        axis: {
            stroke: null,
            majorTick: {
                color: "black",
                width: 1,
                length: 0
            },
            minorTick: {
                color: "#666",
                width: 1,
                length: 0
            },
            font: "normal normal normal 0pt Tahoma",
            fontColor: "#999",
            fill: "transparent"
        },
        series: {
            outline: { width: 10, color: "black" },
            stroke: {width:1, color: "red"},
            fill: new Color([0x3b, 0x44, 0x4b, 0.85]),
            font: "normal normal normal 7pt Tahoma",
            fontColor: "#717171"
        },
        marker: {
            stroke: { width: 1, color: "black" },
            fill: "#333",
            font: "normal normal normal 7pt Tahoma",
            fontColor: "black"
        },
        colors: [
			Color.fromRgb("rgb(152,141,194)"),
			Color.fromRgb("rgb(126,182,204)"),
			Color.fromRgb("rgb(108,217,150)"),
			Color.fromRgb("rgb(164,230,90)"),
			Color.fromRgb("rgb(242,166,65)")
		]
    });
    return CustomTheme;
});
## geometryUtils.js

define(["esri/geometry/Point", "esri/geometry/Extent"], function (Point, Extent) {
    var geometryUtils = {};

    /*
    得到多边形的质心点
    */
    geometryUtils.getPolygonCenterPoint = function (polygon) {
        var momentX = 0;
        var momentY = 0;
        var weight = 0;
        var ext = polygon.getExtent();
        var p0 = new Point([ext.xmin, ext.ymin]);
        for (var i = 0; i < polygon.rings.length; i++) {
            var pts = polygon.rings[i];
            for (var j = 0; j < pts.length - 1; j++) {
                var p1 = polygon.getPoint(i, j);
                var p2;
                if (j == pts.length - 1) {
                    p2 = polygon.getPoint(i, 0);
                }
                else {
                    p2 = polygon.getPoint(i, j + 1);
                }
                var dWeight = (p1.x - p0.x) * (p2.y - p1.y) - (p1.x - p0.x) * (p0.y - p1.y) / 2 - (p2.x - p0.x) * (p2.y - p0.y) / 2 - (p1.x - p2.x) * (p2.y - p1.y) / 2;
                weight = weight + dWeight;
                var pTmp = new Point([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]);
                var gravityX = p0.x + (pTmp.x - p0.x) * 2 / 3;
                var gravityY = p0.y + (pTmp.y - p0.y) * 2 / 3;
                momentX = momentX + gravityX * dWeight;
                momentY = momentY + gravityY * dWeight;
            }
        }

        return new Point(momentX / weight, momentY / weight, polygon.spatialReference);
    };

    return geometryUtils;
});
已标记关键词 清除标记
ArcGIS10.1目前已正式发布!ArcGIS 10.1真正做到了将空间信息技术普适化,让普适的GIS未来能够深入到每个人的工作和生活中。ArcGIS10.1兼具云端化、移动化、智能化、个性化和简捷化等五大特征,提供简便易用的使用方式,便捷灵活的开发手段,实现随时随地对空间信息的获取和共享,使得任何人在任何地点通过任何方式都可以享用智能的地图服务。   云端化:完整、开放、可落地的云GIS解决方案,为使用者提供灵活、按需的地理信息、GIS功能和服务。   移动化:支持各类主流移动平台,随时随地的在线和离线应用,真正使GIS无处不在。   智能化:提供强大的处理和分析建模及其运行作业环境,实现聪明的地图自适应改变和智能交互;基于规则的批量3D建模,用户体验和工作效率获得极大改善。   个性化:提供丰富的开发接口和快速灵活的开发方式,满足用户按需定制的个性化需求。   简捷化:更简单的操作、更便捷的开发和更容易的部署,为GIS应用和开发带来前所未有的乐趣以及更专业的效果 。   ArcGIS10.1彻底架起了端到云的桥梁,使得空间信息的创造者与使用者紧密连接,通过ArcMap、Portal for ArcGIS、云中ArcGIS Server及移动终端上ArcGIS的App,每个人都可以成为空间信息的分享者和使用者。制图上强调简化的操作,流程式的处理以及更专业的效果,这些特性使得GIS工作者可以用最短的时间分享最好的信息成果;数据管理上强调更开放的Geodatabase 接口,更便捷的工具和强健的企業级空间数据库能力,DBA从此能够得心应手的操作空间数据,组织用于共享的分布式数据仓库架构;数据的编辑上强调支持更多的数据类型,栅格影像、Lidar点云都不再是单一功能软件的专宠,模板化的业务特性以及更安全、更丰富的角色、权限分配,使得在共享环境下的浏览器端、移动端数据编辑具有了传统桌面环境中的专业能力;服务端强调RESTful的服务、松耦合、可监控、自服务、定量化,这些云的特征为信息共享奠定了坚实、可靠而灵活的基础。   为开发者设计的各个环境的Runtime,其轻便性、易部署性及一致的开发模式,将会为GIS定制开发降低复杂度,带来前所未有的乐趣;轻量级的服务端产品Spatial Data Server可以将任何空间数据极快速的发布为Feature Services,借助Web端的Viewer轻松搭建basemap+Operational layer的应用;而Portal for ArcGIS将会翻开共享的新篇章,从单向共享到互相共享,真正体现出共享的本质。   ArcGIS10.1体现出普适GIS的巨大价值,无论产品功能的改进还是新产品的推出,都为普适GIS深入到各行各业和大众生活,提供了强有力的支撑。   了解更多ArcGIS10.1的新特性,请参阅ArcGIS 在线体验中心上的相关内容:http://tm.arcgisonline.cn/list.php?catid=52&page=1 +++++++++++++++++++ ArcGIS Desktop 10.1的十大改进,包括发布、动态图例、索引型标注、Goedatabase管理器、新的制图综合工具、增强对KML的支持、GPX转要素、地理标记照片转点、编辑追踪和搜索坐标系。 【大家自行百度】 1) 搜索功能 在ArcGIS中有4634个投影坐标系,可以通过选择投影对话框中的搜索按钮按照关键字快速定位你的资源。另外,ArcGIS 10.1中还添加了过滤器,这些都可以使用的工作更加高效。 2) 编辑 在编辑时,知道谁在什么时候编辑了什么特别重要。在ArcGIS 10.1中,如果你新添加要素,那么最后更新的时间就被记录在Last Editor Date中。同样,你做修改的操作,例如拆分多边形,那么最新更新的时间也会被记录下来。 这个是GDB的新特性,在整套产品中都是可用的(Desktop/Mobile/Online)。 3) Geotagged Photos to Points 工具。它可以创建标记的点,然后将地理标注的图片作为GDB的附件,直接在地图上显示出来。 4)GPX 2 Feature工具。它可以让GPS数据更容易,更直接地导入到ArcGIS中。 5) ArcMap对KML支持的改进 KML2Layer工具现在支持直接从KML文件中获取符号、标注以及HTML pop-ups。 6)两个地图概况的工具 Callapse Road Detail以及Delineate Build-up Area。通过这些工具的使用,在不同的比例尺下,我们可以看到道理的详细程度可以展开也可以收缩。 7)对GDB的管理 以前版本,我们通过命令行对SDE进行管理,现在通过可视化的对
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页