ArcGIS API For JavaScript - QueryTask、FindTask查询_findtask 查询要素图层-CSDN博客

本文链接：https://blog.csdn.net/Jie_1997/article/details/106545130

图层要素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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    @*引入arcgis所需js及css*@
    <script src="~/util/MapFile/init.js"></script>
    <link href="~/util/MapFile/esri.css" rel="stylesheet" />
    <link href="~/util/MapFile/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://xxx:6080/arcgis/rest/services/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/MapServer'
        //图层要素图层
        var ServiceAreaLine = 'http://xxx:6080/arcgis/rest/services/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/MapServer/0'
        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 baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                map.addLayer(baselayer1);//添加高德地图到map容器
                var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
                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 >= 0");//查询的过滤条件
        query.returnGeometry = true;
        query.outFields = ["*"];
        queryTask.execute(query, add_serviceArea);
    }
    function add_serviceArea(result) {
        var temp = [];
        var innerHtml = "";
        var features = result.features;
        for (var i = 0; i < features.length; i++) {
            //数据去重
            if (temp.indexOf(features[i].attributes.stationnam) == -1) {
                temp.push(features[i].attributes.stationnam)
                innerHtml += '<option>' + features[i].attributes.stationnam + '</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 = ("stationnam = '" + 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.X;
            var pointY = graphic.attributes.Y;
            //根据要素的类型，进行设置样式
            switch (graphic.geometry.type) {
                case "point":
                    var point = new esri.geometry.Point(pointX, pointY);
                    var labelSymbol = new esri.symbol.PictureMarkerSymbol('/util/Image/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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    @*引入arcgis所需js及css*@
    <script src="~/util/MapFile/init.js"></script>
    <link href="~/util/MapFile/esri.css" rel="stylesheet" />
    <link href="~/util/MapFile/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://xxx:6080/arcgis/rest/services/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/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: [118.375892, 33.966844],
                    zoom: 7,//缩放等级
                    logo: false, //logo
                    slider: false, //缩小按钮
                });
                var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                map.addLayer(baselayer1);//添加高德地图到map容器
                var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
                //map.addLayer(serverLayer);

                //实例化FindTask（输入查询的图层Layers）
                findTask = new FindTask(urlMap);
                //FindTask的参数
                findParams = new FindParameters();
                findParams2 = new FindParameters();
                //返回Geometry
                findParams.returnGeometry = true;
                findParams2.returnGeometry = true;
                //查询的图层id(图层下标)
                findParams.layerIds = [0, 1];
                findParams2.layerIds = [0, 1];
                //查询的字段名字Search Fields
                findParams.searchFields = ["linename"];
                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) {
        console.log(inputText)
        //inputText为搜索框的内容
        findParams.searchText = inputText;
        //执行
        findTask.execute(findParams, add_serviceArea);
    }
    function add_serviceArea(result) {
        var temp = [];
        var innerHtml = "";
        for (var i = 0; i < result.length; i++) {
            var feature = result[i].feature;
            //数据去重
            if (temp.indexOf(feature.attributes.linename) == -1) {
                temp.push(feature.attributes.linename)
                innerHtml += '<option>' + feature.attributes.linename + '</option>'
            }
        }
        document.getElementById('serviceArea_Select').innerHTML = '<option>---请选择---</option>' + innerHtml;
        centerServiceArea(result)
    }
    //根据选择的图层要素进行查询定位
    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.X;
            var pointY = graphic.attributes.Y;
            //根据要素的类型，进行设置样式
            switch (graphic.geometry.type) {
                case "point":
                    var point = new esri.geometry.Point(pointX, pointY);
                    var labelSymbol = new esri.symbol.PictureMarkerSymbol('/util/Image/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>