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

来源：互联网发布：淘宝店铺图片授权编辑：程序博客网时间：2024/06/03 13:21
<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