02-ArcGIS API For JavaScript调用动态地图服务

最新推荐文章于 2023-03-21 09:57:08 发布

爱睡懒觉的老舅

最新推荐文章于 2023-03-21 09:57:08 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： WebGIS 文章标签： ArcGIS API For JavaScript

原文链接：https://blog.youkuaiyun.com/lovecarpenter/article/details/52453725

WebGIS 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍如何使用ArcGIS API发布动态地图服务，包括通过属性和空间查询地图服务信息的方法。通过实例代码演示了如何创建查询参数，执行查询任务及高亮显示查询结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、ArcGIS发布动态地图服务

参考：https://blog.youkuaiyun.com/lovecarpenter/article/details/52205093

我发布的地图服务是：

二、通过属性查询地图服务中的信息

1、调用地图服务

在ArcGIS API 中给我们提供了一个类叫做ArcGISDynamicMapServiceLayer利用这个类，我们可以获得发布的地图服务。调用动态地图服务一般只需要两步：（1）通过地图服务的URL创建一个ArcGISDynamicMapServiceLayer对象；（2）将动态地图服务的对象添加到地图容器中。

2、根据属性查询地图服务中的信息

如上面所示，我们发布的地图有20个图层。如我们要查第18个图层的信息，点进去，在最下面有字段列表，我们可以按“类别名称”来搜索。

3、代码实现

（1）创建一个文本框

类别名称:<input class="nm" type="text">
<input type="button" value="查询">

（2）将文本框中的输入文本获取，并创建属性查询对象

query("#btn").on("click",function(){
                        //获得查询字段的名称
                        var name=query(".nm")[0].value;
                        //实例化查询参数
                        var findParams = new FindParameters();
                        findParams.returnGeometry = true;
                        findParams.layerIds = [18];  //要查询的是jiaoxuelou(2)那个图层，因此这个地方数组中是[2]
                        findParams.searchFields = ["类别名称"];
                        findParams.searchText = name;
                        //实例化查询对象
                        var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/Test/广州市城市总体规划/MapServer");
                        //进行查询
                        findTask.execute(findParams,showFindResult)
                    })

（3）将查询的信息用 graphics 高亮显示

function showFindResult(queryResult)
                    {
                        if (queryResult.length == 0) {
                            alert("没有该元素");
                            return;
                        }
                        for (var i = 0; i < queryResult.length; i++) {
                            //获得该图形的形状
                            var feature= queryResult[i].feature;
                            var geometry = feature.geometry;
                            //定义高亮图形的符号
                            //1.定义面的边界线符号
                            var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
                            //2.定义面符号
                            var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
                            //创建客户端图形
                            var graphic = new Graphic(geometry, PolygonSymbol);
                            //将客户端图形添加到map中
                            map.graphics.add(graphic);
                        }
                    }

（4）结果

查询前：

查询后：

（5）完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过属性查询地图服务中的信息</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script>
        require(["esri/map","dojo/query","dojo/on",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "esri/tasks/FindTask",
                    "esri/tasks/FindParameters",
                    "esri/symbols/SimpleLineSymbol",
                    "esri/symbols/SimpleFillSymbol",
                    "esri/Color",
                    "esri/graphic",
                    "dojo/domReady!"],
                function(Map,query,on,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic){
                    var map = new Map("mapDiv");
                    var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/广州市城市总体规划/MapServer");
                    map.addLayer(layer);
                    query("#btn").on("click",function(){
                        //获得查询字段的名称
                        var name=query(".nm")[0].value;
                        //实例化查询参数
                        var findParams = new FindParameters();
                        findParams.returnGeometry = true;
                        findParams.layerIds = [18];  //要查询的是jiaoxuelou(2)那个图层，因此这个地方数组中是[2]
                        findParams.searchFields = ["类别名称"];
                        findParams.searchText = name;
                        //实例化查询对象
                        var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/Test/广州市城市总体规划/MapServer");
                        //进行查询
                        findTask.execute(findParams,showFindResult)
                    });
                    function showFindResult(queryResult)
                    {
                        if (queryResult.length == 0) {
                            alert("没有该元素");
                            return;
                        }
                        for (var i = 0; i < queryResult.length; i++) {
                            //获得该图形的形状
                            var feature= queryResult[i].feature;
                            var geometry = feature.geometry;
                            //定义高亮图形的符号
                            //1.定义面的边界线符号
                            var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
                            //2.定义面符号
                            var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
                            //创建客户端图形
                            var graphic = new Graphic(geometry, PolygonSymbol);
                            //将客户端图形添加到map中
                            map.graphics.add(graphic);
                        }
                    }
                })
    </script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:580px; border:1px solid #000;"></div>
类别名称:<input class="nm" type="text">
<input id="btn" type="button" value="查询">
</body>
</html>

（6）代码解释

FindTask 是Esri提供的一个属性查询的类，他所对应的参数为：FindParameters，FindTask只能用于属性查询，不能用于空间查询
FindTask类中有一个方法叫做execute,execute的第一个参数是属性查询的参数，第二个参数是一个回调函数（即是一个异步函数），当服务器返回数据时，此函数才会被触发。
dojo/query是dojo提供的一个DOM选择器，他的功能非常强大，与JQuery中的$符一样强大，可以根据id选择query（"#id"）,也可以根据类名选择query（".classname"），query方法还有很多强大的地方，具体可以参考官方文档
query("#btn").on()是dojo提供给我们第二种绑定事件的方式。
graphicesri提供给我们使用的客户端图层，利用graphic，我们可以完成很多操作，graphic具体的使用，将在Draw工具时说明。

三、通过空间查询地图服务中的信息

1、需求：当点击图形时进行高亮显示。该功能可以分为以下几步：

（1）首先需要给地图绑定点击事件；

（2）获得点击的地图坐标（点坐标），并创建空间查询参数对象；

（3）将教学楼与点相交的楼层查询出来，然后利用 graphic 进行高亮显示；

注意：这里查询的是图层18，用地要素

2、代码实现

（1）给地图绑定点击事件

map.on("click",mapClick);

（2）获得点击的地图坐标（点坐标），并创建空间查询参数对象

function mapClick(e){
                        //获得用户点击的地图坐标
                        var point=e.mapPoint;
                        //实例化查询参数
                        query=new Query();
                        query.geometry = point;
                        query.outFields = ["*"];
                        query.outSpatialReference = map.spatialReference;
                        query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                        query.returnGeometry = true;
                        //实例化查询对象---空间查询对象
                        var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/Test/广州市城市总体规划/MapServer/18");   //注意这里面已经写了查询的图层是第18个图层
                        //进行查询
                        queryTask.execute(query,showFindResult)  //QueryTask类中有一个方法叫做execute,execute的第一个参数是查询的参数，第二个参数是一个回调函数（即是一个异步函数），当服务器返回数据时，此函数才会被触发
                    }

（3）将图层18与点相交的楼层查询出来，然后利用 graphic 进行高亮显示

function showFindResult(queryResult)
                    {
                        if (queryResult.features == 0) {
                            alert("没有该元素");
                            return;
                        }
                        for (var i = 0; i < queryResult.features.length; i++) {
                            //获得该图形的形状
                            var feature = queryResult.features[i];
                            var geometry = feature.geometry;
                            //定义高亮图形的符号
                            //1.定义面的边界线符号
                            var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
                            //2.定义面符号
                            var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
                            //创建客户端图形
                            var graphic = new Graphic(geometry, PolygonSymbol);
                            //将客户端图形添加到map中
                            map.graphics.add(graphic);
                        }
                    }

（4）结果

鼠标点击前：

鼠标点击后：

（5）完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script>
        require(["esri/map","dojo/query","dojo/on",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "esri/tasks/QueryTask",
                    "esri/tasks/query",
                    "esri/symbols/SimpleLineSymbol",
                    "esri/symbols/SimpleFillSymbol",
                    "esri/Color",
                    "esri/graphic",
                    "dojo/domReady!"],
                function(Map,query,on,ArcGISDynamicMapServiceLayer,QueryTask,Query,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic){
                    var map = new Map("mapDiv");
                    var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/广州市城市总体规划/MapServer");
                    map.addLayer(layer);
                    map.on("click",mapClick);  //首先需要给地图绑定点击事件
                    function mapClick(e){
                        //获得用户点击的地图坐标
                        var point=e.mapPoint;
                        //实例化查询参数
                        query=new Query();
                        query.geometry = point;
                        query.outFields = ["*"];
                        query.outSpatialReference = map.spatialReference;
                        query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                        query.returnGeometry = true;
                        //实例化查询对象---空间查询对象
                        var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/Test/广州市城市总体规划/MapServer/18");   //注意这里面已经写了查询的图层是第18个图层
                        //进行查询
                        queryTask.execute(query,showFindResult)  //QueryTask类中有一个方法叫做execute,execute的第一个参数是查询的参数，第二个参数是一个回调函数（即是一个异步函数），当服务器返回数据时，此函数才会被触发
                    }
                    function showFindResult(queryResult)
                    {
                        if (queryResult.features == 0) {
                            alert("没有该元素");
                            return;
                        }
                        for (var i = 0; i < queryResult.features.length; i++) {
                            //获得该图形的形状
                            var feature = queryResult.features[i];
                            var geometry = feature.geometry;
                            //定义高亮图形的符号
                            //1.定义面的边界线符号
                            var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
                            //2.定义面符号
                            var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
                            //创建客户端图形
                            var graphic = new Graphic(geometry, PolygonSymbol);
                            //将客户端图形添加到map中
                            map.graphics.add(graphic);
                        }
                    }
                })
    </script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:580px; border:1px solid #000;"></div>
</body>
</html>