ArcGIS API For JavaScript - QueryTask、FindTask查询

小灰灰 2021-07-26 02:53 454阅读 0赞

### 图层要素QueryTask、FindTask查询 ###

*   *  一. QueryTask查询
     *  二. FindTask查询

## 一. QueryTask查询 ##

**注意：只能查询单个图层。**  
QueryTask进行查询的地图服务并不必项加载到Map中进行显示。QueryTask的执行需要两个先决条件：一个是需要查询的图层URL、一个是进行查询的过滤条件。

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>title</title>
        @*加载高德地图*@
        <script type="text/javascript">
            var dojoConfig = {
                async: true,
                parseOnLoad: true,
                packages: [{
                    name: "js",
                    location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
                }]
            };
        </script>
        <script src="~/Scripts/jquery-3.3.1.js"></script>
        <script src="~/Scripts/init.js"></script>
        <link href="~/Content/esri.css" rel="stylesheet" />
        <link href="~/Content/tundra.css" rel="stylesheet" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html, body, #map {
                width: 100%;
                height: 100%;
                position: absolute;
            }
            .list {
                width: 12%;
                background-color: rgba(22, 59, 90, 0.8);
                color: #fff;
                position: absolute;
            }
            select {
                width: 90%;
                margin: 10px 5%;
                border-radius: 5px;
                height: 26px;
            }
        </style>
        <script>
            var map;
            //总图层
            var urlMap = 'http://xxxxxx:6080/arcgis/rest/services//%E9%95%BF%E4%B8%89%E8%A7%92%E5%8C%BA%E5%9F%9F%E4%B8%80%E4%BD%93%E5%8C%9620200604/MapServer'
            //图层要素图层
            var ServiceAreaLine = 'http://xxxxxx:6080/arcgis/rest/services//%E9%95%BF%E4%B8%89%E8%A7%92%E5%8C%BA%E5%9F%9F%E4%B8%80%E4%BD%93%E5%8C%9620200604/MapServer/5'
            require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer"],
                function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer) {
                    /* code goes here */
                    map = new Map("map", {
                        center: [120.075892, 31.526844],
                        zoom: 7,//缩放等级
                        logo: false, //logo
                        slider: false, //缩小按钮
                    });
                    var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
    
                    var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                    var baselayer2 = new gaodeLayer({layertype: "label"});//加载标注图
                    var baselayer3 = new gaodeLayer({ layertype: "st" });//加载卫星图
                    
                    map.addLayer(baselayer1);//添加高德地图到map容器
    
                    map.addLayer(serverLayer);
                });
    
        </script>
    </head>
    <body>
        <div id="map"></div>
        <div class="list">
            <select id="serviceArea_Select" onchange="changeServiceArea()"></select>
        </div>
    </body>
    </html>
    <script>
        //将图层要素去重放入serviceArea_Select选择框中
        window.onload = function () {
            var queryTask = new esri.tasks.QueryTask(ServiceAreaLine);//查询的图层URL
            var query = new esri.tasks.Query();
            query.where = ("FID < 40000");//查询的过滤条件
            query.returnGeometry = true;
            query.outFields = ["*"];
            queryTask.execute(query, add_serviceArea);
        }
        function add_serviceArea(result) {
            console.log(result)
            var temp = [];
            var innerHtml = "";
            var features = result.features;
            for (var i = 0; i < features.length; i++) {
                //数据去重
                if (temp.indexOf(features[i].attributes.名称) == -1) {
                    temp.push(features[i].attributes.名称)
                    innerHtml += '<option>' + features[i].attributes.名称 + '</option>'
                }
            }
            document.getElementById('serviceArea_Select').innerHTML = '<option>---请选择---</option>' + innerHtml;
        }
        //根据选择的图层要素进行查询定位
        function changeServiceArea() {
            map.graphics.clear();
            var serverce_area = $('#serviceArea_Select option:selected').val();
            var queryTask = new esri.tasks.QueryTask(ServiceAreaLine);//查询的图层URL
            var query = new esri.tasks.Query();
            query.where = ("名称 = '" + serverce_area + "'");//查询的过滤条件
            query.returnGeometry = true;
            query.outFields = ["*"];
            queryTask.execute(query, centerServiceArea);
        }
        function centerServiceArea(featureSet) {
            var features = featureSet.features;
            for (var i = 0; i < features.length; i++) {
                var graphic = features[i];
                var pointX = graphic.attributes.Lng;
                var pointY = graphic.attributes.Lat;
                //根据要素的类型，进行设置样式
                switch (graphic.geometry.type) {
                    case "point":
                        var point = new esri.geometry.Point(pointX, pointY);
                        var labelSymbol = new esri.symbol.PictureMarkerSymbol('/Content/ceshi.gif', 25, 25);
                        var marker2 = new esri.Graphic(point, labelSymbol);
                        map.graphics.add(marker2);
                        break;
                    case "polyline":
                        var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 152, 255]), 5);
                        break;
                    case "polygon":
                        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 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;
                }
                //设置显示样式
                graphic.setSymbol(symbol);
                //在地图中展示
                map.graphics.add(graphic);
            }
            var sGeometry = graphic.geometry;
            //根据要素类型缩放至地图
            if (sGeometry.type == "point") {
                //var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25]));
                //sGrapphic.setSymbol(hsymbol);
                var cPoint = new esri.geometry.Point();
                cPoint.x = sGeometry.x;
                cPoint.y = sGeometry.y;
                map.centerAt(cPoint);
            }
            else {
                var sExtent = sGeometry.getExtent();
                map.setExtent(sExtent);
            }
        }
    </script>

## 二. FindTask查询 ##

**注意：可查询单图层和跨图层数据，输入查询的图层Layers；查询的字段名字Search Fields，查询的条件 Search Text，可以查询非唯一的数据。**  
FindTask的url属性需要指向所查询的地图服务的REST URL，而不像QueryTask需要指定子图层的URL。

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>高速信息</title>
        @*加载高德地图*@
        <script type="text/javascript">
            var dojoConfig = {
                async: true,
                parseOnLoad: true,
                packages: [{
                    name: "js",
                    location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
                }]
            };
        </script>
        <script src="~/Scripts/jquery-3.3.1.js"></script>
        <script src="~/Scripts/init.js"></script>
        <link href="~/Content/esri.css" rel="stylesheet" />
        <link href="~/Content/tundra.css" rel="stylesheet" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html, body, #map {
                width: 100%;
                height: 100%;
                position: absolute;
            }
            .list {
                width: 12%;
                background-color: rgba(22, 59, 90, 0.8);
                color: #fff;
                position: absolute;
            }
            input,button,select {
                width: 90%;
                margin: 10px 5%;
                border-radius: 5px;
                height: 26px;
            }
        </style>
        <script>
            var map;
            var findTask, findParams, findParams2;
            //总图层
            var urlMap = 'http://xxxxx:6080/arcgis/rest/services//%E9%95%BF%E4%B8%89%E8%A7%92%E5%8C%BA%E5%9F%9F%E4%B8%80%E4%BD%93%E5%8C%9620200604/MapServer'
            require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/FindTask", "esri/tasks/FindParameters"],
                function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, FindTask, FindParameters) {
                    /* code goes here */
                    map = new Map("map", {
                        center: [120.075892, 31.526844],
                        zoom: 7,//缩放等级
                        logo: false, //logo
                        slider: false, //缩小按钮
                    });
                    var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
    
                    var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                    var baselayer2 = new gaodeLayer({layertype: "label"});//加载标注图
                    var baselayer3 = new gaodeLayer({ layertype: "st" });//加载卫星图
                    
                    map.addLayer(baselayer1);//添加高德地图到map容器
    
                    map.addLayer(serverLayer);
    
                    //实例化FindTask（输入查询的图层Layers）
                    findTask = new FindTask(urlMap);
                    //FindTask的参数
                    findParams = new FindParameters();
                    findParams2 = new FindParameters();
                    //返回Geometry
                    findParams.returnGeometry = true;
                    findParams2.returnGeometry = true;
                    //查询的图层id(1：站点图层)
                    findParams.layerIds = [2,3,4,5];
                    findParams2.layerIds = [0,1];
                    //查询的字段名字Search Fields
                    findParams.searchFields = ["省名称","名称"];
                    findParams2.searchFields = ["名称"];
                });
    
        </script>
    </head>
    <body>
        <div id="map"></div>
        <div class="list">
            <input id="inputText" type="text" />
            <button id="btn" onclick="execute(dojo.byId('inputText').value);">站点搜索</button>
            <select id="serviceArea_Select" onchange="changeServiceArea()"></select>
        </div>
    </body>
    </html>
    <script>
        //findTask查询数据
        function execute(inputText) {
            //inputText为搜索框的内容
            findParams.searchText = inputText;
            //执行
            findTask.execute(findParams, add_serviceArea);
        }
        function add_serviceArea(result) {
            console.log(result)
            var temp = [];
            var innerHtml = "";
            for (var i = 0; i < result.length; i++) {
                var feature = result[i].feature
                //添加到graphics进行高亮显示
                map.graphics.add(feature);;
                //数据去重
                if (temp.indexOf(feature.attributes.名称) == -1) {
                    temp.push(feature.attributes.名称)
                    innerHtml += '<option>' + feature.attributes.名称 + '</option>'
                }
            }
            console.log(innerHtml)
            document.getElementById('serviceArea_Select').innerHTML = '<option>---请选择---</option>' + innerHtml;
        }
        //根据选择的图层要素进行查询定位
        function changeServiceArea() {
            map.graphics.clear();
            var serverce_area = $('#serviceArea_Select option:selected').val();
            //查询条件
            findParams.searchText = serverce_area;
            //执行
            findTask.execute(findParams, centerServiceArea);
        }
        function centerServiceArea(featureSet) {
            for (var i = 0; i < featureSet.length; i++) {
                var graphic = featureSet[i].feature;
                var pointX = graphic.attributes.Lng;
                var pointY = graphic.attributes.Lat;
                //根据要素的类型，进行设置样式
                switch (graphic.geometry.type) {
                    case "point":
                        var point = new esri.geometry.Point(pointX, pointY);
                        var labelSymbol = new esri.symbol.PictureMarkerSymbol('/Content/ceshi.gif', 25, 25);
                        var marker2 = new esri.Graphic(point, labelSymbol);
                        map.graphics.add(marker2);
                        break;
                    case "polyline":
                        var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 152, 255]), 5);
                        break;
                    case "polygon":
                        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 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;
                }
                //设置显示样式
                graphic.setSymbol(symbol);
                //在地图中展示
                map.graphics.add(graphic);
            }
            var sGeometry = graphic.geometry;
            //根据要素类型缩放至地图
            if (sGeometry.type == "point") {
                //var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25]));
                //sGrapphic.setSymbol(hsymbol);
                var cPoint = new esri.geometry.Point();
                cPoint.x = sGeometry.x;
                cPoint.y = sGeometry.y;
                map.centerAt(cPoint);
            }
            else {
                var sExtent = sGeometry.getExtent();
                map.setExtent(sExtent);
            }
        }
    </script>