青菜仟

请输入关键字词
您现在的位置是：综合资讯>IOS解决方案

综合资讯

ArcGIS Api for javascript实现的拉框查询

2020-02-14 IOS解决方案 667
青菜仟推荐说:要实现拉框查询，首先要有支持要素查询的地图图层，这是是指esri.layers.FeatureLayer，然后按照以下思路实现：（1）绘制矩形，用到了 esri.toolbars.Draw（2）获取绘制矩形区域内容要素（3）实现查询，将查询到的结果高亮显示
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Select with feature layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #messages{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 15em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 40;
      }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;
      var tb;
      //按钮相应函数
       function onDrawRect(){
          alert("点击了按钮");
           map.disableMapNavigation();
          tb.activate(esri.toolbars.Draw.EXTENT);    //激活相应的图形
        }
      require([
        "esri/map", "esri/layers/FeatureLayer", 
        "esri/tasks/query", "esri/geometry/Circle",
        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!","esri/symbols/PictureFillSymbol","dojo/on"
      ], function(
        Map, FeatureLayer,
        Query, Circle,
        Graphic, InfoTemplate, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        esriConfig, Color, dom,PictureFillSymbol,on
      ) {
        // use a proxy page if a URL generated by this page is greater than 2000 characters
        //
        // this should not be needed as nearly all query & select functions are performed on the client
        esriConfig.defaults.io.proxyUrl = "/proxy";
 
        map = new Map("mapDiv", { 
          basemap: "streets",
          center: [-95.249, 38.954],
          zoom: 14,
          slider: false
        });
        
        //add the census block points in on demand mode. Note that an info template has been defined so when 
        //selected features are clicked a popup window will appear displaying the content defined in the info template.
        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
          infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"]
        });
 
        // selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE, 
          12, 
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL, 
            new Color([247, 34, 101, 0.9]), 
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol); 
        
        //make unselected features invisible
        var nullSymbol = new SimpleMarkerSymbol().setSize(0);
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));
        
        map.addLayer(featureLayer);
 
        //////////////////////////////////////////////////////////////////////////////////
       
        //绘制矩形
         map.on("load", drawRect);
 
        function drawRect() {
          tb = new esri.toolbars.Draw(map);
          tb.on("draw-end", addGraphic);
        }
       
         function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 
         // alert("addGraphic");
          tb.deactivate(); 
          map.enableMapNavigation();
 
          map.graphics.add(new Graphic(evt.geometry, symbol));
 
          //进行查询
           var query = new Query();
            query.geometry = evt.geometry;
            /*query.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
            query.where = "NAME = $$$$$" + stateName + "$$$$$"; */
            featureLayer.queryFeatures(query, selectFeature);
        }
        function selectFeature(response){
          var feature;
          var features = response.features;
          var inBuffer = [];
         
          for (var i = 0; i < features.length; i++) {
            feature = features[i];
            inBuffer.push(feature.attributes[featureLayer.objectIdField]);
          }
          var query = new Query();
          query.objectIds = inBuffer;
          //use a fast objectIds selection query (should not need to go to the server)
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
            var re="";
            for(var i=0;i<results.length;i++){
              var feature = results[i];
              re += feature.attributes["TRACT"]+"|";
            }
            alert("查询结果 TRACT: "+re);
          });
        }
      });
    </script>
  </head>
 
  <body>
    <div id="info">  
      <button id="Extent" οnclick="onDrawRect()">拉框查询</button>
    </div>
    <div id="mapDiv"></div>
     
  </body>

相关下载