arcgis api for javascrpit 基于dojo框架的query查询功能2_esri arcgis js api query联合查询-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36735409/article/details/78489489

上一个例子中展示的是通过图层中某个元素的属性来进行元素的查询，这次我们需要通过直接点击地图上的某一要素，实现对这个要素的查询功能。

第一步，创建地图：

<html>
<head>
    <title>dojo.map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=2.0"></script>
    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.tasks.query");
        var map;
        function init(){
            var startExtent = new esri.geometry.Extent({"xmin":73384,"ymin":251775,"xmax":133790,"ymax":321048,"spatialReference":{"wkid":102100}} );
            //create map
            map = new esri.Map("map", {extent: startExtent});
            var tiledLayer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://192.168.0.181/ArcGIS/rest/services/GISBaseMap/MapServer");
            map.addLayer(tiledLayer1);
        }
        dojo.addOnLoad(init);
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

效果图：

第二步，监听地图鼠标点击事件，通过鼠标点击事件获取坐标，然后通过坐标查询出图层中坐标对应的元素，高亮显示。点击高亮显示区域，显示元素详细信息。

代码：

<html>
<head>
    <title>dojo.map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=2.0"></script>
    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.tasks.query");
        var map;
        var query,queryTask;
        var symbol,infoTemplate;
        function init(){
            var startExtent = new esri.geometry.Extent({"xmin":73384,"ymin":251775,"xmax":133790,"ymax":321048,"spatialReference":{"wkid":102100}} );
            //create map
            map = new esri.Map("map", {extent: startExtent});
            dojo.connect(map,"onClick",executeQueryTask);
            var tiledLayer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://192.168.0.181/ArcGIS/rest/services/GISBaseMap/MapServer");
            map.addLayer(tiledLayer1);
            queryTask = new esri.tasks.QueryTask("http://192.168.0.181/ArcGIS/rest/services/GISBaseMap/MapServer/1")
            query=new esri.tasks.Query();
            query.returnGeometry=true;
            query.outFields = [];
            infoTemplate = new esri.InfoTemplate("sss","ssss");
            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.5]));
        }
        dojo.addOnLoad(init);
        function executeQueryTask(evt){
            query.geometry=evt.mapPoint;
            queryTask.execute(query,showResults);
        }
        function showResults(featureSet){
            map.graphics.clear();
            for(var i= 0;i<featureSet.features.length;i++){
                var graphic = featureSet.features[0];
                graphic.setSymbol(symbol);
                graphic.setInfoTemplate(infoTemplate);
                map.graphics.add(graphic);
            }
        }
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

如图：