ArcGIS Server开发实践之【Search Widget工具查询本地地图服务】

加载本地地图服务,并实现要素的查询。(不足之处还请指点)具体代码如下:


<!DOCTYPE html>
<html dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>利用Search工具搜索要素图层上的要素</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
        html,
        body,
        #map,
        .map.container {
            padding: 0;
            margin: 0;
            height: 100%;
             100%;
        }
        #info {
            top: 2px;
            color: #444;
            height: auto;
            font-family: arial;
            font-weight: bold;
            left: 69px;
            margin: 5px;
            padding: 10px;
            position: absolute;
             260px;
            z-index: 40;
            border: solid 1px #003300;
            border-radius: 4px;
            background-color: #E5E5E5;
        }
        #search {
            display: block;
            position: absolute;
            z-index: 2;
            top: 70px;
            left: 74px;
        }
        /*Beginning of search box modifications*/
        .arcgisSearch .searchClear {
            background-color: #E5E5E5;
        }
        .arcgisSearch .esriIconZoom {
            background-image: url("finding.png");
            background-size: 20px 20px;
        }
        .esriIconZoom:before {
            content: "";
        }
        .arcgisSearch .searchGroup .searchInput,
        .arcgisSearch .searchBtn,
        .arcgisSearch .noResultsMenu,
        .arcgisSearch .suggestionsMenu {
            border: 1px solid #003300;
            background-color: #E5E5E5;
        }
        .arcgisSearch .noValueText {
            color: red;
            font-size: 14px;
        }
        /*Beginning of popup modifications*/
        .esriPopup .titlePane {
            background-color: #003300;
            border-bottom: 1px solid #121310;
            font-weight: bold;
        }
        .esriPopup a {
            color: #DAE896;
        }
        .esriPopup .contentPane,
        .esriPopup .actionsPane,
        .esriPopup .pointer,
        .esriPopup .outerPointer {
            background-color: #B3B3B3;
        }
    </style>

    <script>
        var dojoConfig = {
            parseOnLoad: true
        };
    </script>
    <script src="https://js.arcgis.com/3.16/"></script>

    <script>
        var map;

        require([
            "esri/map",
            "esri/layers/FeatureLayer",
            "esri/dijit/Search",
                "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/InfoTemplate",
            "dojo/domReady!"
        ], function (Map, FeatureLayer, Search,ArcGISDynamicMapServiceLayer, InfoTemplate) {
            //添加一个动态图层,可利用本地服务器中的地图服务
            var url=ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/交院地图/MyMapService/MapServer");

            map = new Map("map", {
              //  basemap: "streets",
                center: [100, 35], // lon, lat
                zoom: 4
            });
            map.addLayer(url);

            //ArcGIS Online feature service showing ecological footprints taken from Global FootPrint Network,
            //more information on this can be found http://jsapi.maps.arcgis.com/home/item.html?id=0f4c89208dce44b583d9219d843591c3
            //添加一个要素图层,用于查询使用。查询要素图上面的属性信息
            var layer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/交院地图/MyMapService/MapServer/2", {
                outFields: ["*"]
            });
            map.addLayer(layer);

            //Create search widget
//          //实例化一个搜索部件
            var search = new Search({
                map: map,
                //passing in empty source array to clear defaults such as
                //"All" and the ArcGIS Online World Geocoding service
                //search的属性
                sources: [],
                zoomScale: 5000000
            }, "search");

            //listen for the load event and set the source properties
            //箭筒load事件设置源属性
            search.on("load", function () {

                var sources = search.sources;//search的sources属性。源对象数组用于查找搜索结果
                sources.push({
                    featureLayer: layer,
                    placeholder: "Spain",  //用来提示源输入文本
                    enableLabel: false,    //是否在地图上显示一个文本标签,使用labelSymbol选中的源
                    searchFields: ["name"],// 指定搜索结果的要素层
                    displayField:"name",//显示正在使用的字段,默认显示第一个图层。

                    exactMatch: false,//搜索值完全匹配返回结果,一般为false
                    outFields: ["*"],//指定返回搜索结果的字段

                    //Create an InfoTemplate and include three fields
                    //用于选择结果,包含多个字段。
                    infoTemplate: new InfoTemplate("Ecological Footprint", "<a href= ${URL} target=_blank ;'>Additional Info</a></br></br>省会: ${name}</br>简介: ${SHAPE_Area}")

                });
                //Set the sources above to the search widget
                //将搜索结果源显示在搜索部件上
                search.set("sources", sources);
            });
            search.startup();
        });
    </script>
</head>
<body>
<div id="search"></div>
<div id="info">
    <div>Search a country to find its ecological footprint and rating.</div>
</div>
<div id="map"></div>
</body>

</html>

  

原文地址:https://www.cnblogs.com/dongteng/p/5567411.html