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%;
width: 100%;
}
#info {
top: 2px;
color: #444;
height: auto;
font-family: arial;
font-weight: bold;
left: 69px;
margin: 5px;
padding: 10px;
position: absolute;
width: 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>
ArcGIS Server开发实践之【Search Widget工具查询本地地图服务】的更多相关文章
- ArcGIS Server 开发实践之【Search类】
开发中整理的.不足之处还请谅解! ----------------------------------------------- Class:Search 调用方式:require(["es ...
- ArcGIS server 开发实践之【FeatureLayer类】
全是干活,你值得拥有 要素图层类简介:Class:FeatureLayer //调用方式:require(["esri/layers/FeatureLayer"],function ...
- 【ArcGIS Server 开发系列】Flyingis六大系列讲座精品PDF奉献
转自:http://www.cnblogs.com/gispeng/archive/2008/07/24/1250116.html [ArcGIS Server 开发系列]Flyingis六大系列讲座 ...
- ArcGIS Server开发教程系列（3）切片
切片工作,我们可以一级一级的切,也可以,所有的一块切,Recreate All Tiles这项是说,在没有进行任何的切片工作时,可以选用这项:Recreate Empty Tiles这项是说,如果之前 ...
- ArcGIS Server开发教程系列（7）使用ArcGIS API for Javascript-Hello World
ArcGIS API for Javascript API下载地址:http://support.esrichina-bj.cn/2011/0223/960.html 选择最新的下载就好了,目前是3 ...
- ArcGIS Server开发教程系列（1） Arcgis server 10.1 的安装
本系列所使用的软件版本如下: Windows 7 X64 / Windows server 2008 X64 Arcgis for Desktop 10.1 Arcgis 10.1 for serve ...
- ArcGIS Server开发教程系列（2）配置ARCMAP和ARCCatalog发布服务
1. Arc catalog的配置 打开catalog,如图新增刚刚创建的server 1. Use GIS services: 用户身份连接 使用此种连接,可以浏览.使用站点内发布的所有 ...
- ArcGIS API for Silverlight部署本地地图服务
这一节我们来讲新建立的ArcGIS API for Silverlight应用程序如何加载自己的地图服务的问题,网上的资料讲的都有点含糊不清,这次我们详细的讲一下配置的步骤: 首先介绍下我们的开发和部 ...
- ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）
1. 鹰眼 OverviewMap小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围.当主地图范围变化时,鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致,当鹰眼图空间的地图范围 ...
随机推荐
- CSS计数器
使用CSS计数器就像使用变量一样. 它有以下几个属性: counter-reset 创建或重置计数器 counter-increment 增长计数器 content 生成内容 counter() 将计 ...
- Linux下程序包管理工具RPM
实验环境: CentOS release 6.6 (Final) 一台 IP地址:172.16.249.230 RPM 是 Red Hat Package Manager 的缩写,本意是Red Ha ...
- Android listview addHeaderView 和 addFooterView 详解
addHeaderView()方法:主要是向listView的头部添加布局addFooterView()方法:主要是向listView的底部添加布局 需要注意的是添加布局的时候应该添加从父容器开始添加 ...
- CSS三列布局
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...
- Netbeans 中创建数据连接池和数据源步骤（及解决无法ping通问题）
1.启动glassfish服务器, 在浏览器的地址栏中输入 http://localhost:4848 2.首先建立JDBC Connection Pools: 3.new 一个Connectio P ...
- poj2253 Frogger（最短路变型或者最小生成树）
/* 题意:就是源点到终点有多条的路径,每一条路径中都有一段最大的距离! 求这些路径中最大距离的最小值! Dijkstra, Floyd, spfa都是可以的!只不过是将松弛的条件变一下就行了! 想了 ...
- 后端码农谈前端（CSS篇）第八课：继承与层叠
一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属 ...
- AIX下tar解包问题
今天,在AIX下安装tomcat,上传的版本是apache-tomcat-6.0.41.tar.gz,但用tar解压时出现以下问题: # tar xvf apache-tomcat-6.0.41.ta ...
- 哈夫曼树(三)之 Java详解
前面分别通过C和C++实现了哈夫曼树,本章给出哈夫曼树的java版本. 目录 1. 哈夫曼树的介绍 2. 哈夫曼树的图文解析 3. 哈夫曼树的基本操作 4. 哈夫曼树的完整源码 转载请注明出处:htt ...
- Hadoop官方文档翻译——MapReduce Tutorial
MapReduce Tutorial(个人指导) Purpose(目的) Prerequisites(必备条件) Overview(综述) Inputs and Outputs(输入输出) MapRe ...