ArcGIS For JavaScript API Measurement Widget —— 测量工具

描述：测量组件提供工具，用于计算当前位置（获取位置）,测量距离测量距离和面积（面积量算）。如果地图的坐标系统不是Web Mercator 或 geographic,如果复杂的多边形绘制的措施的部件将需要使用 geometry service项目或简化的几何形状,使用esri.config.defaults指定的几何服务为您的应用

此示例显示了如何测量部件添加到您的应用程序。测量部件，在2.3版本的新功能，提供了一些工具，用于确定X，Y位置和测量的面积和长度。

var measurement = new esri.dijit.Measurement({
   map: map
}, dojo.byId('measurementDiv'));
measurement.startup();

您也可以选择定义一个自定义的线和点符号，测量的部件将在地图上绘制时使用。
这个例子是启用snapping为这个地图使用 map.enableSnapping();当 snapping 开启后，这个测量工具会显示在地图上

在线演示
http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_measurement/index.html

引用地址
http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_measurement

esri.symbol.SimpleFillSymbol的常量

常量	描述
STYLE_BACKWARD_DIAGONAL	The fill is backward diagonal lines.（向后的对角线）
STYLE_CROSS	The fill is a cross.（交叉线）
STYLE_DIAGONAL_CROSS	The fill is a diagonal cross.（对角交叉）
STYLE_FORWARD_DIAGONAL	The fill is forward diagonal lines.（向前的对角线）
STYLE_HORIZONTAL	The fill is horizontal lines.（水平线）
STYLE_NULL	The polygon has no fill.（无）
STYLE_SOLID	The fill is solid.（实线）
STYLE_VERTICAL	The fill is vertical lines.（垂直线）

代码如下：

<!DOCTYPE html>  
<html>   
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
    <title>Measure Tool</title>  
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">  
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">  
    <style>  
      html,body {  
        height:100%;  
        width:100%;  
        margin:0;  
      }  
      body {  
        background-color:#FFF;  
        overflow:hidden;  
        font-family:"Trebuchet MS";  
      }  
      #map {  
        border:solid 2px #808775;  
        -moz-border-radius:4px;  
        -webkit-border-radius:4px;  
        border-radius:4px;  
        margin:5px;  
        padding:0px;  
      }  
      #titlePane{  
        width:240px;  
      }  
      .claro .dijitTitlePaneTitle {  
        background: #808775;  
        font-weight:600;  
        border:solid 1px #29201A;  
      }  
      .claro .dijitTitlePaneTitleHover {  
        background:#808775;  
      }  
      .claro .dijitTitlePaneTitleActive {  
        background:#808775;  
      }  
      .claro .dijitTitlePaneContentOuter {  
        border-right: solid 2px #808775 !important;  
        border-bottom: solid 2px #808775 !important;  
        border-left: solid 2px #808775 !important;  
      }  
      </style>  
      <script>  
        var dojoConfig = {   
            parseOnLoad:true   
        };  
      </script>  
      <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>  
    <script>  
      dojo.require("dijit.layout.BorderContainer");  
      dojo.require("dijit.layout.ContentPane");  
      dojo.require("dijit.TitlePane");   
      dojo.require("dijit.form.CheckBox");  
        
      dojo.require("esri.map");  
      dojo.require("esri.dijit.Measurement");  
      dojo.require("esri.SnappingManager");  
      dojo.require("esri.dijit.Scalebar");  
      dojo.require("esri.layers.FeatureLayer");  
        
      var map;  
        
      function init() {  
  
        // 这个示例可能需要处理通信与ArcGIS Server服务代理页面。您将需要更换以下链接的位置在你的机器上的代理.  
        // 请参阅'Using the proxy page' 帮助主题 设立代理页面的详细信息.  
        esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";  
        esri.config.defaults.io.alwaysUseProxy = false;  
          
        //此服务仅用于开发和测试目的。我们建议您创建您自己的geometry service在您的应用程序中使用  
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");  
          
        // 指定范围  
       var initialExtent = new esri.geometry.Extent({  
           "xmin":-9545482,  
           "ymin":4615382,  
           "xmax":-9544248,  
           "ymax":4616059,  
           "spatialReference":{  
               "wkid":102100  
            }  
        });  
    
        map = new esri.Map("map", {  
          basemap: "satellite", // 指定的地图底图。以下是有效选项："streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".  
          center: [-85.743, 38.256], // 经纬度  
          zoom: 17  // 缩放深度  
        });  
  
        /**  
         * SimpleFillSymbol 用于在图形图层上绘制多边形的功能,可以是固体,透明,或一个的几个剖面线模式.此外,符号可以具有可选的轮廓,它被定义为线符号.  
         */  
        var sfs = new esri.symbol.SimpleFillSymbol(  
            esri.symbol.SimpleFillSymbol.STYLE_SOLID,   // 样式请参考上方  
            new esri.symbol.SimpleLineSymbol(  
                esri.symbol.SimpleLineSymbol.STYLE_SOLID,  // 样式,STYLE_DASH(破折号),STYLE_DASHDOT(点划线),STYLE_DASHDOTDOT,STYLE_DOT(点),STYLE_NULL,STYLE_SOLID(实线)    
                new dojo.Color([195,176,23]),   // 颜色  
                2   // 像素  
            ),  
            null  
        );  
          
        var parcelsLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/0", {  
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND, // 模式，请参考上一篇文章介绍  
          outFields: ["*"]  // 字段  
        });  
        parcelsLayer.setRenderer(new esri.renderer.SimpleRenderer(sfs));  
          
        dojo.connect(map, "onLayersAddResult", function(results){   // 所有图层使用map.addLayers方法添加到地图后触发  
          //dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac.  
          var snapManager = map.enableSnapping({  // 激活按键，默认是ctrl键  
              snapKey:dojo.keys.copyKey  
          });     
          var layerInfos = [{layer: parcelsLayer}];  
          snapManager.setLayerInfos(layerInfos);  
  
          var measurement = new esri.dijit.Measurement({    // 测量工具  
            map: map  
          }, dojo.byId('measurementDiv'));    
          measurement.startup();    // 开启  
        });  
        map.addLayers([parcelsLayer]);  
      }  
      dojo.ready(init);  
    </script>  
  </head>  
  <body class="claro">  
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"  
    style="width:100%; height:100%;">  
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">  
        <div style="position:absolute; right:20px; top:10px; z-Index:999;">  
          <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">  
            <div id="measurementDiv"></div>  
            <span style="font-size:smaller;padding:5px 5px;">请用 <b>CTRL</b> 来开启snapping.</span>  
          </div>  
        </div>  
      </div>  
    </div>  
  </body>  
</html>

效果如下：

也可以使用自定义的方式来控制测量的图标，线的显示。

在线演示：

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_measureworld/index.html

参考联接：

http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_measureworld

代码如下：

<!DOCTYPE html>  
<html>   
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
    <title>Measure Tool</title>  
  
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">  
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">  
    <style>  
      html,body {  
        height:100%;  
        width:100%;  
        margin:0;  
      }  
      body {  
        background-color:#FFF;  
        overflow:hidden;  
        font-family:"Trebuchet MS";  
      }  
      #map {  
        padding:0px;  
      }  
      #rightPane{  
        width:200px;  
      }  
    </style>  
  
    <script>var dojoConfig = { parseOnLoad:true };</script>  
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>  
    <script>  
      dojo.require("dijit.layout.BorderContainer");  
      dojo.require("dijit.layout.ContentPane");  
      dojo.require("esri.map");  
      dojo.require("esri.dijit.Measurement");  
      dojo.require("esri.dijit.Scalebar");  
  
      var map;  
  
      function init() {  
        // 这个示例可能需要处理通信与ArcGIS Server服务代理页面。您将需要更换以下链接的位置在你的机器上的代理.  
        // 请参阅'Using the proxy page' 帮助主题 设立代理页面的详细信息.  
        esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";  
        esri.config.defaults.io.alwaysUseProxy = false;  
          
        //此服务仅用于开发和测试目的。我们建议您创建您自己的geometry service在您的应用程序中使用  
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");  
          
        map = new esri.Map("map", {  
          basemap: "hybrid",  
          center: [-34.541, 32.843],  
          zoom: 3  
        });  
  
        dojo.connect(map, 'onLoad', function(map) {  
          initToolbar(map);  
        });  
      }  
  
      function initToolbar(mymap) {  
        // 定义一个新的符号和点线符号使用测量工具  
        var pms = new esri.symbol.PictureMarkerSymbol("images/flag.png",24,24);  
        pms.setOffset(9,11);  
        var sls = new esri.symbol.SimpleLineSymbol(  
            esri.symbol.SimpleLineSymbol.STYLE_DOT,  
            new dojo.Color([255,0,0,.55]),  
            4  
        );  
        var measurement = new esri.dijit.Measurement({  
            map: mymap,  
            lineSymbol:sls, // 线符号，用来画线测量线和测量距离的工具。可选参数。  
            pointSymbol:pms // 默认的符号是一个24×24的图片标记符号9 x偏移和Y偏移量11。可选参数  
        }, dojo.byId('measurementDiv'));  
        measurement.startup();  // 开启  
        measurement.setTool("area",true);   // 启动之后才能设置激活  
      }  
      dojo.ready(init);  
    </script>  
  </head>  
    
  <body class="claro">  
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:true"  
    style="width:100%; height:100%;">  
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">  
      </div>  
      <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'">  
        <div>使用测量构件计算面积，找到位置之间的距离，并显示当前鼠标位置.</div>  
        <div id="measurementDiv"></div>  
      </div>  
    </div>  
  </body>  
</html>

效果如图：

未经允许请勿转载：程序喵 » ArcGIS For JavaScript API Measurement Widget —— 测量工具

程序喵

ArcGIS For JavaScript API 添加 terrain basemap with operational layer(与业务层相关的地形底图)

ArcGIS For JavaScript API 默认参数及示例

ArcGIS For JavaScript API OpenStreetMap Layer (打开街道地图层)

ArcGIS开发Questions小总结

ArcGIS For JavaScript API dynamic Service —— 动态服务

ArcGIS For JavaScript API topographic map —— 地形图

ArcGIS For JavaScript API add topographic map with graphics —— 地形图与图形

ArcGIS For JavaScript API world imagery —— 世界图像