zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    ansible执行命令或playbook报错原因及解决方法整理
    一款基于WordPress生成的微信小程序源码,免费开源
    WordPress小程序之酱茄Free小程序开源版更新敏感词检测功能
    酱茄pro小程序发布直播和地理位置功能(WordPress小程序)
    WordPress小程序-酱茄cms(积分阅读小程序)V1.1.0发布
    酱茄Free主题 – 酱茄WordPress资讯主题免费开源版下载
    酱茄Pro小程序V1.6.6更新之订阅消息发布
    WordPress小程序源码下载 酱茄开源版小程序源码
    酱茄助你三分钟打造专属WordPress社区论坛小程序
    酱茄cms小程序专为WordPress内容/知识付费场景设计
  • 原文地址:https://www.cnblogs.com/dongteng/p/5567411.html
Copyright © 2011-2022 走看看