Webgis实践2：点击对象查询/tasks.query/infoTemplate

最新推荐文章于 2022-03-08 13:04:32 发布

才华横溢吴道简

最新推荐文章于 2022-03-08 13:04:32 发布

阅读量1.2k

点赞数

分类专栏： WEBGIS

本文链接：https://blog.csdn.net/sinat_41310868/article/details/79605190

版权

本文介绍如何将infoTemplate与query结合，实现在WebGIS中点击地图上的点、线、面要素，查询并显示其完整属性。通过示例代码详细解释了线、点、面的查询实现，并探讨了query函数对查询数量的限制以及where条件的使用。接下来的目标是实现关键词搜索功能。

摘要由CSDN通过智能技术生成

接前文：http://blog.csdn.net/sinat_41310868/article/details/79547446
前一篇讲了infotemplate的用法，点击要素弹出表单，显示内容，不过显示不全，文中提到了应该结合query一起用能解决这个问题。
现在经过测试，设想是没错的。
将infoTemplate和query结合到一起，可以实现点击要素，全部属性显示出来。
效果如下图：
这里写图片描述
现在开始分步拆解。
首先我们之前发布的要素服务内容分点线面，点线面也是地图构成的三大要素。
那么我们只要能分别实现点线面三种要素的点击查询属性，并把它们拼合在一起，这个功能就算实现了。
首先看线，只把实现点击线要素查询属性的代码写出来，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CHGIS测试线</title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src= "http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <!--固定的表头文件，样式引用啥的。
    CSS层叠样式表引用至arcgisonline在线资源：http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css
    当然以后要是网络发布的话，引用本地的CSS资源就行：http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css
    外部脚本文件引用至arcgisonline在线资源：http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6
    同理外部脚本文件的本地链接是：http://localhost/arcgis_js_api/library/3.17/3.17/init.js，但貌似用这个文件，放大缩小的时候容易脱框。
    网页用utf-8编码，所以我们发布的地图选用的也是utf-8编码的文件。
    -->

    <script type="text/javascript" charset="utf-8">
        dojo.require("esri.map");
        dojo.require("esri.tasks.query");
        //调用ersi.map和esri.tasks.query，加载地图和查询组件。
        var map;

        function init() {
            map = new esri.Map("map");
            dojo.connect(map, "onLoad", doQueries);
            map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("https://localhost:6443/arcgis/rest/services/Test/CHGISnew/MapServer"));
        }
/*嗯，加载底图，注意矢量和切片的区别。*/
        function doQueries(map) {
            var xianQueryTask = new esri.tasks.QueryTask("https://localhost:6443/arcgis/rest/services/Test/CHGISnew/MapServer/1");
            var xianQuery = new esri.tasks.Query();
            xianQuery.outFields = ["*"];
            //outFields=["*"],所有字段都能被输出呗。
            xianQuery.returnGeometry = true;
            //能返回地几何信息
            xianQuery.outSpatialReference = map.spatialReference;
            //给定坐标系，坐标系一定要统一。
            xianQuery.where = "NAME_CH='塔里木河'";
            //查询条件，Name_CH='塔里木河'的要素被选择出来了，调用query函数，不能没有where的值，而且好像返回的值有数量限制，不能超过两千个吧。
            xianQueryTask.execute(xianQuery, addxianFeatureSetToMap);
        //    返回的数据xianQuery调用addxianFeatureSetToMap函数。
        }
/*这个doQueries函数是加载河流图层作为graphic层，在此基础上做查询分析*/


        function addxianFeatureSetToMap(featureSet) {
            var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3);
            //定义线符号，线形是实线，颜色是RGB模式：255，0，0，红色，线宽是3。

            var xianLayer = new esri.layers.GraphicsLayer();
            map.addLayer(xianLayer);

            var infoTemplate = new esri.InfoTemplate("${NAME_CH}","${*}");

            //这个就是infoTeplate了，内置表单，点击查询。
            dojo.forEach(featureSet.features, function(feature) {
                xianLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
            });
        }
/*这个addxianFeatureSetToMap函数就是定义了点击查询功能*/

        dojo.addOnLoad(init);
    //加载initi函数
    </script>

</head>
<body>
<div id="map" class="tundra" style="width:800px; height:400px; border:1px solid #000;"></div>
</body>
<!--调用了导进来的CSS里面的tundra样式。-->
</html>

代码进行了详细注释，就不再说什么了，用的还是之前发布的要素地图服务。
然后再看看点。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<html lang="

最低0.47元/天解锁文章

才华横溢吴道简

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Webgis实践2：点击对象查询/tasks.query/infoTemplate

接前文：http://blog.csdn.net/sinat_41310868/article/details/79547446 前一篇讲了infotemplate的用法，点击要素弹出表单，显示内容，不过显示不全，文中提到了应该结合query一起用能解决这个问题。现在经过测试，设想是没错的。将infoTemplate和query结合到一起，可以实现点击要素，全部属性显示出来。效果如下图
复制链接

扫一扫

专栏目录