arcgis api for javascrpit 基于dojo框架的query查询功能2

最新推荐文章于 2017-11-10 15:52:25 发布

kaleid_liner

最新推荐文章于 2017-11-10 15:52:25 发布

阅读量744

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： arcgis javascript

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

html 专栏收录该内容

19 篇文章

订阅专栏

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

第一步，创建地图：

<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>

如图：