queryTask，geometryService操作，通过画矩形获得外接图形

最新推荐文章于 2023-06-03 18:57:59 发布

绛门人

最新推荐文章于 2023-06-03 18:57:59 发布

阅读量913

点赞数

分类专栏： arcgis server javascript api

arcgis server javascript api 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Convex Hull</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #mapu { padding:0; }
      #titlePane {
        width:200px;
        height:300px;
      }
      .claro .dijitTitlePaneTitle {
        background: #A4BDA7;
        font-weight:600;
        color:#33292B;
      }
      .dijitButtonNode {
        background-color: #A4BDA7 !important;
        border: 1px solid #646750 !important;
        color:#33292B !important;
      }
    </style>

    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.TitlePane"); 
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");     
      dojo.require("esri.toolbars.draw");
      dojo.require("esri.tasks.geometry");

      var map;
      var toolbar;
      var geometryService;
      var featureLayer;
      
      function init() {
        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
        esri.config.defaults.io.proxyUrl = "/proxy/";
        esri.config.defaults.io.alwaysUseProxy = false;
        geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-72.517, 42.372],
          zoom: 16
        });
        
        //add the census block points to the map 
        featureLayer = new esri.layers.FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["POP2000","BLOCK"]
        });
        
        //define a selection symbol for the feature layer
        var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 12, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([247, 0, 171, 0.9]), 2), new dojo.Color([247, 0, 171, 0.5]));
        featureLayer.setSelectionSymbol(symbol);
        
        map.infoWindow.resize(175,100);
        map.addLayer(featureLayer);

        dojo.connect(map, 'onLoad', function(theMap) {
          //create the draw toolbar 
          toolbar = new esri.toolbars.Draw(map);
          dojo.connect(toolbar,"onDrawEnd",drawEndHandler);
        });
      }
      function activateToolbar(){
        toolbar.activate(esri.toolbars.Draw.EXTENT);
      }
      function drawEndHandler(geometry){
        toolbar.deactivate();
        map.graphics.clear();
        //select the points within the extent
        var query = new esri.tasks.Query();
        query.geometry = geometry;
        featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features){
          //calculate the convex hull
          var points = dojo.map(features,function(feature){
            return feature.geometry;
          });
          geometryService.convexHull(points,function(result){
            var symbol;
            switch(result.type){
              case "point":
                symbol = new esri.symbol.SimpleMarkerSymbol();
                break;
              case "polyline":
                symbol = new esri.symbol.SimpleLineSymbol();
                break;
              case "polygon":
                symbol = new esri.symbol.SimpleFillSymbol();
                break;
            }
            map.graphics.add(new esri.Graphic(result,symbol));
          },function(error){
            console.log("An error occured during convex hull calculation");
          });        
        });
      }
      dojo.ready(init);
    </script>
  </head>
  
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:'false',design:'headline'" style="width: 100%; height: 100%;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"  style="overflow:hidden;">
      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Convex Hull', closable:'false', open:'true'">
            <p style="padding:5px 2px;color:#33292B;">Draw a rectangle around a group of block points to calculate the 
              minimum bounding polygon ("convex hull") of the selected points.</p>
            <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:activateToolbar">Draw</button>
        </div>
      </div>
      </div>
    </div>
  </body>
</html>

绛门人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
queryTask，geometryService操作，通过画矩形获得外接图形

Convex Hull html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #mapu { padding:0; } #titlePane { width:200px; height:300px; }
复制链接

扫一扫