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小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围.当主地图范围变化时,鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致,当鹰眼图空间的地图范围 ...
随机推荐
- 那些年我们写过的T-SQL（上篇）
在当今这个多种不同数据库混用,各种不同语言不同框架融合的年代(一切为了降低成本并高效的提供服务),知识点多如牛毛.虽然大部分SQL脚本可以使用标准SQL来写,但在实际中,效率就是一切,因而每种不同厂商 ...
- 深入理解PHP内核(十四)类的成员变量及方法
原文链接:http://www.orlion.ga/1237/ 类的成员变量在PHP中本质是一个变量,只是这些变量都归属于某个类,并且给这些变量是有访问控制的. 类的成员方法在PHP中本质是一个函数, ...
- 使用Google产品以来遇到的最糟糕、最霸道、最让人抓狂的设计
很久没有登录cnblogs@gmail.com这个邮箱,今天通过gmail.com登录了一下,登录后出现一个对话框要求设置性别与出生日期,而且必须要设置,不设置不让登录. 这个邮箱是我们网站用的是邮箱 ...
- [OpenCV] Samples 04: contours2
要先变为二值图像:cvThreshold 提取轮廓:cvFindContours #include "opencv2/imgproc/imgproc.hpp" #include & ...
- sizzle源码分析 （4）sizzle 技术总结及值得我们学习的地方
分析sizzle源码并不是为了去钻牛角尖,而是去了解它的思想,学习下期中一些技术的运用. 1,sizzle中的正则表达式jquery源码中充斥着各种正则表达式,能否看懂其源码的关键之一就是对正则表达式 ...
- 网络通信之Socket与LocalSocket的比较
Socket与LocalSocket都可以实现网络通信,两个有什么区别呢? LocalSocket其通信方式与Socket差不多,只是LocalSocket没有跨越网络边界. 于是,思考到一个问题:a ...
- js页面跳转整理
js页面跳转整理 js方式的页面跳转1.window.location.href方式 <script language="javascript" type=" ...
- Jquery基本用法总结
选择器$("#mydiv") 通过ID$("p#myp") 选择id=myp 的所有p元素(组合型)$(".mydiv") 通过 class ...
- Windows Azure Web Site (14) Azure Web Site IP白名单
<Windows Azure Platform 系列文章目录> 我们知道,在Azure Cloud Service和Virtual Machine,可以通过Endpoint ACL (Ac ...
- form上传文件以及跨域异步上传
要设置了enctype属性才能上传,需要使用上传的jar包,这里使用的是cos-26Dec2008.jar, 而且后台获取值的时候,getfile要放在第一位 一次设置好上传格式后没有上传文件,也就没 ...