ArcGIS For JavaScript API Measurement Widget(测量工具)————（二十四）

于 2013-01-15 14:13:04 发布
阅读量9.7k 收藏 6
点赞数
分类专栏： ArcGIS Api For Javascript 文章标签： ArcGIS ForJavaScript ArcGIS二次开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaokui_wingfly/article/details/8504085
版权

查看原文： 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_DIAGONALThe fill is backward diagonal lines.（向后的对角线）
STYLE_CROSSThe fill is a cross.（交叉线）
STYLE_DIAGONAL_CROSSThe fill is a diagonal cross.（对角交叉）
STYLE_FORWARD_DIAGONALThe fill is forward diagonal lines.（向前的对角线）
STYLE_HORIZONTALThe fill is horizontal lines.（水平线）
STYLE_NULLThe polygon has no fill.（无）
STYLE_SOLIDThe fill is solid.（实线）
STYLE_VERTICALThe 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

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
}, dojo.byId('measurementDiv'));
measurement.startup();

请注意，当在小部件创建一个div提供dojo.byId（'measurementDiv）。这个div指定的窗口小部件的显示。在此示例中，小部件的显示在一个Dojo内容窗格。

<div id="rightPane"data-dojo-type="dijit.layout.ContentPane"data-dojo-props="region:'right'">
<div>使用测量构件计算面积，找到位置之间的距离，并显示当前鼠标位置. </div>
<div id="measurementDiv"></div>
</div>

代码如下：

<!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>


 

效果如图：

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值