zoukankan      html  css  js  c++  java
  • ArcGIS.Server.9.3和ArcGIS API for JavaScript实现距离量算和面积量算(九)

    目的:
    1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现距离量算和面积量算,这里主要是通过GeometryServer实现。
    准备工作:
    1. 在ArcGis Server9.3中发布名为usa的MapServer。
    2.ArcGis Server9.3中发布名为Geometry的GeometryServer
    完成后的效果图:


    开始
    0.关于GeometryServer的介绍,Geometry Service,Geometry Service是给程序提供几何计算如 buffering, simplifying, calculating areas 、lengths,  projecting等功能,Geometry Service可以用来代替ArcObjects 或geoprocessing service等做的这些几何计算,它是ArcGIS Server 9.3提供的新功能,本例子中就用到了simplifyingcalculating areas 、lengths、projecting四个功能。
    1.启动vs新建名为MeasureSample的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了,纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了,毕竟可以调试js脚本了。
    2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建wabapp.js的文件,这里用来编写我们自己的js代码了,在Default.aspx页面里添加对这个js文件的引用,同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体、3个input的功能按钮、一个信息显示的span:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MeasureSample._Default" %>

    <!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 runat="server">
        
    <title>Untitled Page</title>
        
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">
        
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
        
    <script type="text/javascript" src="javascript/webapp.js"></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="512px; height:400px; border:1px solid #000;"></div>
        
    </form>
    </body>
    </html>
    3.上面的html代码非常的简单了,主要可以看一下3个功能按钮的onclick事件方法。
    4.切换到wabapp.js文件编写js功能代码,功能主要是分为3部分,第一载入地图进行显示;第二在地图上进行画线画面的功能;第三根据画的线或者面进行距离或者面积的量算。
    5.这样讲一下关于距离和面积的量算,本例子的地图数据usa是采用是地理坐标系wkid为4269,要进行距离或者面积时就必须转换到大地坐标系下,就是地图投影了。本例子中用GeometryServer的project方法把usa投影到大地坐标系下wkid为32618。所以这里无论是距离测量还是面积测量首先必须进行project,对于距离测量完成投影后就可以直接用GeometryServer的lengths方法进行测量,对于面积测量还需要先进行simplify操作后在用GeometryServer的areasAndLengths方法进行测量。
    6.具体的代码和说明如下:
    dojo.require("esri.map");
    dojo.require(
    "esri.toolbars.draw");
    dojo.require(
    "esri.tasks.geometry");

    var map, toolbar, symbol, geometryService;
    function init()
    {
       map 
    = new esri.Map("map");
       
    var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://mypc/ArcGIS/rest/services/USA/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://mypc/ArcGIS/rest/services/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({"wkid":32618}));
    }

    //投影转换完成后调用方法
    function projectComplete(graphics)
    {
      
    //如果为线类型就进行lengths距离测算
      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);
    7.完成编码运行查看效果。
  • 相关阅读:
    Dojo(发音:豆粥)的目标是解决DHTML应用程序长期存在的历史问题
    如何用Fireworks制作图标的透明效果
    2021.09.15膜你赛
    2021.09.14 膜你赛
    2021.08.29 膜你赛
    2021.08.28 膜你赛
    2021.10.06 膜你赛
    2021.09.18 膜你赛
    2021.09.13膜你赛
    2021.10.05膜你赛
  • 原文地址:https://www.cnblogs.com/hll2008/p/1347112.html
Copyright © 2011-2022 走看看