arcgis for js 开发-工具箱操作面积长度计算

最新推荐文章于 2024-01-27 07:47:32 发布

chiguozhu9463

最新推荐文章于 2024-01-27 07:47:32 发布

阅读量332

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/1764582/blog/1843650

本文介绍如何使用ArcGIS API进行在线地图的绘制及地理数据的测量计算，包括点、线、面的绘制，以及长度和面积的计算。通过实例代码展示了如何集成ArcGIS地图服务，实现自定义绘图工具，并进行距离和面积的实时测量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>第一个地图应用</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<script src="https://js.arcgis.com/3.17/"></script>

 
     <style type="text/css">
         .MapClass
         {  width:900px;
              height:600px;
              border:1px solid #000;
             
             }
     </style>
    <script type="text/javascript">
        var MyGraphicsLayer = null;
        var MyGeometryServerToolbar = null;
        var MyGeometryData = null;
        var MyGeometryService = null;
        var MyMap = null;
        dojo.require("esri.map");//块加载地图组件
        dojo.require("esri.toolbars.draw");
        dojo.require("esri.tasks.LengthsParameters");
        dojo.require("esri.tasks.AreasAndLengthsParameters");
        dojo.addOnLoad(function () 
        {
            MyMap = new esri.Map("MyMapDiv",{
                logo : false,
                center : [116.4,39.9],
                zoom : 6 
            });
            MyGeometryService = new esri.tasks.GeometryService(
            "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");//创建几何服务对象，url地址为几何服务地址
            MyMap.on("load",function(){
               MyGeometryServerToolbar = new esri.toolbars.Draw(MyMap);//创建绘图工具对象
             
               MyGraphicsLayer = new esri.layers.GraphicsLayer();
               MyMap.addLayer(MyGraphicsLayer);

               initTools();//绑定画图事件               
            });
             
            var MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
            ("http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer");
             MyMap.addLayer(MyTiledMapServiceLayer);
         });
         function initTools(){
            dojo.addOnLoad(function(){
            dojo.connect(MyGeometryService, "onLengthsComplete", MyOutputDistance);//绑定长度计算完成后事件
            dojo.connect(MyGeometryService, "onAreasAndLengthsComplete",MyOutputAreaAndLength);//绑定面积周长完成后事件
            dojo.connect(MyGeometryServerToolbar, "onDrawEnd", function(geometry) {//绑定绘图结束事件
                      MyGeometryData = geometry;
                      switch (geometry.type) {
                        case "point":
                        var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
                         break;
                        case "polyline":
                        var lengthParams = new esri.tasks.LengthsParameters();//长度计算对象
                            lengthParams.polylines = [geometry];
                            lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
                            lengthParams.geodesic = true;
                            MyGeometryService.lengths(lengthParams);
                        var symbol = new esri.symbol.SimpleLineSymbol();
                         break;
                        case "polygon":
                        var areasAndLengthParams = new esri.tasks.AreasAndLengthsParameters();//面积周长计算对象
                            areasAndLengthParams.polygons = [geometry];
                            areasAndLengthParams.areaUnit = esri.tasks.GeometryService.UNIT_SQUARE_KILOMETERS;
                            areasAndLengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_KILOMETER; 
                            outSR = new esri.SpatialReference(102100);
                            MyGeometryService.project([geometry],outSR,function(geometry){  
                                MyGeometryService.simplify(geometry, function(simplifiedGeometries) {  
                                    areasAndLengthParams.polygons = simplifiedGeometries;  
                                    MyGeometryService.areasAndLengths(areasAndLengthParams);  
                                });  
                            });
                        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;
                    }
                    MyGraphicsLayer.add(new esri.Graphic(geometry,symbol));
               });
              });
            }
          function drawLine(){
                MyGeometryServerToolbar.deactivate();//清除画图状态
                MyGeometryServerToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);//绘制图形方法
             }
          function drawArea(){
                MyGeometryServerToolbar.deactivate();
                MyGeometryServerToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);
             }
          function drawCircle(){
                MyGeometryServerToolbar.deactivate();
                MyGeometryServerToolbar.activate(esri.toolbars.Draw.CIRCLE);
             }
          function drawElltpse(){
                MyGeometryServerToolbar.deactivate();
                MyGeometryServerToolbar.activate(esri.toolbars.Draw.ELLIPSE);
             }
          function drawPoint(){
                MyGeometryServerToolbar.deactivate();
                MyGeometryServerToolbar.activate(esri.toolbars.Draw.POINT);
             }
           function drawRectangle(){
                MyGeometryServerToolbar.deactivate();
                MyGeometryServerToolbar.activate(esri.toolbars.Draw.RECTANGLE);
             }
            function drawArrow(){
                MyGeometryServerToolbar.deactivate();
                MyGeometryServerToolbar.activate(esri.toolbars.Draw.ARROW);
             }
            function MyOutputDistance(result){//长度计算后执行此方法
            console.info(result);
            console.info(MyGeometryData);
              MyMap.infoWindow.setTitle("距离测量");//设置弹框的标题
              MyMap.infoWindow.setContent("&nbsp;测量距离为：<strong>" + dojo.number.format(result.lengths[0]/1000) + "千米</strong>");//设置弹框内容
              var  CurX   =  MyGeometryData.paths[0][MyGeometryData.paths[0].length - 1][0];//计算弹框显示位置经度
              var  CurY   =  MyGeometryData.paths[0][MyGeometryData.paths[0].length - 1][1];//计算弹框显示位置纬度
              var  CurPos  =  new  esri.geometry.Point(CurX, CurY, MyMap.spatialReference);//创建点对象
             MyMap.infoWindow.show(CurPos);//在当前点位置显示弹框
            }
            function MyOutputAreaAndLength(result){//面积计算后执行此方法
               MyMap.infoWindow.setTitle("面积测量");
               MyMap.infoWindow.setContent("&nbsp;测量面积为：<strong>" + dojo.number.format(result.areas[0]) + "平方公里</strong><br/>"+"&nbsp;周长为：<strong>" + dojo.number.format(result.lengths[0]) + "千米</strong>");
               var  CurX   =  MyGeometryData.rings[0][MyGeometryData.rings[0].length - 1][0];
               var  CurY   =  MyGeometryData.rings[0][MyGeometryData.rings[0].length - 1][1];
               var  CurPos  =  new  esri.geometry.Point(CurX, CurY, MyMap.spatialReference);
               MyMap.infoWindow.show(CurPos);
            }
    </script>
  </head>
  <body class="tundra">
    <input type="button" onclick="drawLine()" value="画线"></input>
    <input type="button" onclick="drawArea()" value="画面"></input>
    <input type="button" onclick="drawCircle()" value="画圆"></input>
    <input type="button" onclick="drawElltpse()" value="画椭圆"></input>
    <input type="button" onclick="drawPoint()" value="画点"></input>
    <input type="button" onclick="drawArrow()" value="画箭头"></input>
    <input type="button" onclick="drawRectangle()" value="画矩形"></input>
    <div id="MyMapDiv"  class="MapClass"></div>
  </body>
</html>

转载于:https://my.oschina.net/u/1764582/blog/1843650