master

分支 (1)

管理

管理

master

arcgismapdemo
/
distance_area.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta charset="utf-8" />
     <title>Untitled Page</title>
     <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.11/3.11/esri/css/esri.css"/>
	<link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.11/3.11/dijit/themes/claro/claro.css">

	<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.11/3.11/init.js"></script>

	<script type="text/javascript">
	<!--
		dojo.require("esri.map");
 		dojo.require("esri.toolbars.draw");
 		dojo.require("esri.tasks.geometry");
 		dojo.require('esri.SpatialReference');

var map, toolbar, symbol, geometryService;
function init()
 {
    map = new esri.Map("map");
    var dynamicMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer('http://10.187.203.178:6080/arcgis/rest/services/HK_TEXT2/MapServer');
    map.addLayer(dynamicMapServiceLayer);
    toolbar = new esri.toolbars.Draw(map);
    //添加toolbar画图完成后天事件监听调用doMeasure
   dojo.connect(toolbar, "onDrawEnd", doMeasure);

    //实例化GeometryService，地址为ags发布的GeometryServer
   geometryService = new esri.tasks.GeometryService("http://10.187.203.178:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
    //添加onProjectComplete完成后事件监听
   // dojo.connect(geometryService, "onProjectComplete", projectComplete);
 }

//量算
function doMeasure(geometry)
 {
    //更加类型设置显示样式
   switch (geometry.type)
    {
       case "polyline":
          var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 2);
          break;
       case "polygon":
          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
          break;
    }
    //设置样式
   var graphic = new esri.Graphic(geometry, symbol);
    //清除上一次的画图内容
   map.graphics.clear();
    //
   map.graphics.add(graphic);
    //进行投影转换，完成后调用projectComplete
   geometryService.project([graphic],new esri.SpatialReference(4326), projectComplete);
 }

//投影转换完成后调用方法
function projectComplete(graphics)
 {
   //如果为线类型就进行lengths距离测算
   alert(1);
  if(graphics[0].geometry.type=="polyline")
   {
      dojo.connect(geometryService, "onLengthsComplete", outputDistance);
      geometryService.lengths([graphics[0]]);
   }
   //如果为面类型需要先进行simplify操作在进行面积测算
  else if(graphics[0].geometry.type=="polygon")
   {
      dojo.connect(geometryService, "onSimplifyComplete", simplifyComplete);
      geometryService.simplify([graphics[0]]);
   }
 }

//显示测量距离
function outputDistance(result)
 {
    dojo.byId("distance").innerHTML = "距离："+dojo.number.format(result.lengths[0] / 1000) + "千米";
 }

//显示测量面积
function outputAreaAndLength(result)
 {
    dojo.byId("distance").innerHTML ="面积："+ dojo.number.format(result.areas[0] / 1000000) + "平方公里"+" 长度："+dojo.number.format(result.lengths[0]/1000) + "千米";
}

//对面对象simplify完成后调用方法
function simplifyComplete(graphics)
 {
   dojo.connect(geometryService, "onAreasAndLengthsComplete", outputAreaAndLength);
   //进行面积测量
  geometryService.areasAndLengths(graphics);
 }

 dojo.addOnLoad(init);
	//-->
	</script>
</head>
<body class="tundra">
     <form id="form1" runat="server">
     <div>
         <input id="Button1" type="button" value="距离测量" onclick="toolbar.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();" /> <input id="Button2"
             type="button" value="面积测量" onclick="toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();" /> <input id="Button3" type="button"
             value="漫 游" onclick="toolbar.deactivate();map.showZoomSlider();" /><span id="distance"></span></div>
     <div id="map" class="tundra" style="width:512px; height:400px; border:1px solid #000;"></div>
     </form>
</body>
</html>