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小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围.当主地图范围变化时,鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致,当鹰眼图空间的地图范围 ...
随机推荐
- MongoDB更新文档
说明:来看一下关系型数据库的update语句 UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某 其中where子句就类似查询文本,定位要更改的子表,set子句类似于修改器,更 ...
- 深入入门系列--Data Structure--04树
终于有机会重新回头学习一下一直困扰自身多年的数据结构了,赶脚棒棒哒.一直以来,对数据结构的掌握基本局限于线性表,稍微对树有一丢丢了解,而对于图那基本上就是不懂(不可否认,很多的考试中回避了图也是原因之 ...
- Linux快速入门02-文件系统管理
继续进入Linux文件系统的学习,加油,早日突破MS压在自己身上的那道束缚. Linux系列文章 快速入门系列--Linux--01基础概念 快速入门系列--Linux--02文件系统管理 快速入门系 ...
- JS滚轮事件封装
wheel(function(isTrue){ console.log(isTrue); }) function wheel(callback){ if(navigator.userAgent.ind ...
- 深入理解PHP内核(七)变量及数据类型-常量
原文链接:http://www.orlion.ga/246/ 在PHP中,常量的名字是一个简单值的标识符,在脚本执行期间该值不能改变.和变量一样,常量默认为大小写敏感,但是通常是大写的. 常量是在变量 ...
- java中父类与子类， 不同的两个类中的因为构造函数由于递归调用导致栈溢出问题
/* 对于类中对成员变量的初始化和代码块中的代码全部都挪到了构造函数中, 并且是按照java源文件的初始化顺序依次对成员变量进行初始化的,而原构造函数中的代码则移到了构造函数的最后执行 */ impo ...
- js返回上一页并刷新的多种实现方法
<a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:loca ...
- 帮助你实现漂亮界面的14套免费的 HTML/CSS 源码
在网络上能找很多免费的 PSD 格式素材,但是很少有 HTML/CSS 界面组件下载.在这篇文章中,收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们.这些组件包括按钮.滑块.表 ...
- MySQL(Navicat)运行.sql文件时报错：[Err] 2006 - MySQL server has gone away 的解决方法
背景: 今天导入一个数据量很大的.sql文件时,报错: 原因: 可能是sql语句过长,超过mysql通信缓存区最大长度. 解决:1. 编辑 MySQL 安装目录下的 my.ini,在最后添加以下内容: ...
- java字符编码和oracle乱码
编码问题我仍旧没搞懂,最根本的从哪里来就没搞懂.当页面发送请求,编码到后台是什么编码呢?好吧,我默认的都是utf-8.后台接收参数后,可以在控制台打印出来,我也不清楚是什么编码.然后,就是数据库问题. ...