说明:主要实现加载FeatureLayer并显示属性表,而要实现联动属性表与地图,首先,看看实施后的效果:

显示效果

如上图所看到的,本文章主要实现了下面几个功能:1、FeatureLayer属性表的分页载入与显示;2、属性表和地图的互操作,包含鼠标经过时在地图上显示名称并高亮显示、点击列表显示对象的信息框。例如以下图:

显示信息框

以下,说说详细的实现思路与代码。

1、FeatureLayer属性表的获取

获取FeatureLayer的属性表,首先得创建FeatureLayer对象,例如以下:

            ftch = new FeatureLayer("http://localhost:6080/arcgis/rest/services/shpchina/MapServer/0",{
outFields: ["*"]
})
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE,
10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]),
1
),
new Color([0,255,0,0.25])
);
//简单渲染
var sr = new SimpleRenderer(symbol);
ftch.setRenderer(sr);
map.addLayer(ftch,1);

有了FeatureLayer对象,能够通过ftch.graphics获取全部的记录。获取到graphics就能获取到单个的graphic,就能获取每个graphic的attributes,例如以下:

                     var graphics=ftch.graphics;
console.log(graphics);
var item = "";
for(var i=0;i<graphics.length;i++){
var attr = graphics[i].attributes;
var id=attr.FID, name=attr.name;
item+= "{\"id\":"+id+",\"text\":'"+name+"'},";
}

2、属性表的分页显示

此时,就能组装分页显示属性的json对象了,例如以下:

                     var graphics=ftch.graphics;
console.log(graphics);
var item = "";
for(var i=0;i<graphics.length;i++){
var attr = graphics[i].attributes;
var id=attr.FID, name=attr.name;
item+= "{\"id\":"+id+",\"text\":'"+name+"'},";
}
item = "["+item.substring(0,item.length-1)+"]";
attr="{'total':"+graphics.length+",'items':"+item+"}";
PAGE_DATA = eval('(' + attr + ')');

将属性表分页显示,如博文http://blog.csdn.net/gisshixisheng/article/details/40048451所看到的。

3、每个对象事件的绑定与实现

每个显示对象的都是一个div。给div分别加入onclick,onmouseover和onmouseout事件,三个事件传递的參数都一样,是在graphics里面的index值,接下来就是实现三个事件。具体代码例如以下:

            showInfo = function(index){
var pt=ftch.graphics[index].geometry;
var attr=ftch.graphics[index].attributes;
map.infoWindow.setTitle(attr.name);
map.infoWindow.setContent(attr.name);
map.infoWindow.show(pt);
};
showObj = function(index){
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]),
1
),
new Color([255,0,0,1])
);
ftch.graphics[index].symbol=symbol;
ftch.redraw();
var pt=ftch.graphics[index].geometry;
var font = new esri.symbol.Font();
font.setSize("10pt");
font.setWeight(esri.symbol.Font.WEIGHT_BOLD);
var text = new esri.symbol.TextSymbol(ftch.graphics[index].attributes.name);
text.setAlign(esri.symbol.TextSymbol.ALIGN_START);
text.setFont(font);
text.setOffset(2,-15);
text.setColor(new dojo.Color([255,0,0,1]));
var labelGraphic = new esri.Graphic(pt,text);
labelLayer.add(labelGraphic);
};
restoreObj = function(index){
labelLayer.clear();
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE,
10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]),
1
),
new Color([0,255,0,0.25])
);
ftch.graphics[index].symbol=symbol;
ftch.redraw();
};
});

showInfo相应的是单击事件。showObject相应的是鼠标经过事件,restoreObj相应的是鼠标移除事件,这样基本并能就实现了。

具体代码例如以下:

map.html

<!DOCTYPE html>
<html>
<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>Simple Map</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<link rel="stylesheet" href="page.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#map_ctrl{
z-index: 99;
position: absolute;
top: 20pt;
right: 10pt;
background: #fff;
}
.button{
padding: 3px;
background: #eee;
text-align: center;
font-size: 12px;
font-family: "微软雅黑";
}
.button:hover,.attr_ctrl:hover{
background: #ccc;
cursor: pointer;
}
#attr_ctrl{
z-index: 99;
width: 155px;
position:absolute;
right: 0px;
bottom:5px;
text-align: right;
}
.attr_ctrl{
padding: 5px;
font-size: 12px;
font-family: "微软雅黑";
width: 100px;
background: #eee;
border: 1px solid #000;
border-bottom: none;
}
#map_attr{
z-index: 99;
font-size: 12px;
font-family: "微软雅黑";
width: 176px;
height: 150px;
background: #eee;
position: absolute;
bottom: 0px;
right:0px;
border: 1px solid #000;
border-bottom: none;
}
</style>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script src="jquery-1.8.3.js"></script>
<script src="jquery.page.js"></script>
<script>
var map, mapCenter, ftch;
var PAGE_DATA, currpage= 1, pagesize=5;
var showInfo, showObj, restoreObj;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/SimpleRenderer",
"dojo/_base/Color",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function(Map,
Tiled,
FeatureLayer,
GraphicsLayer,
Point,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleRenderer,
Color,
on,
dom)
{
map = new Map("map", {logo:false,slider: true});
var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
map.addLayer(tiled,0);
ftch = new FeatureLayer("http://localhost:6080/arcgis/rest/services/shpchina/MapServer/0",{
outFields: ["*"]
})
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE,
10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]),
1
),
new Color([0,255,0,0.25])
);
//简单渲染
var sr = new SimpleRenderer(symbol);
ftch.setRenderer(sr);
map.addLayer(ftch,1);
var labelLayer = new GraphicsLayer();
map.addLayer(labelLayer,2);
mapCenter = new Point(103.847, 36.0473, map.spatialReference);
map.centerAndZoom(mapCenter,4);
var navToolbar = new esri.toolbars.Navigation(map);
on(dom.byId("full_extent"), "click", function(event){//全图
map.centerAndZoom(mapCenter,4);
});
on(dom.byId("zoom_in"), "click", function(event){//拉框放大
map.setMapCursor("url(cursor/zoom-in.cur),auto");
navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
});
on(dom.byId("zoom_out"), "click", function(event){//拉框缩小
map.setMapCursor("url(cursor/zoom-out.cur),auto");
navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
});
navToolbar.on("extent-history-change", function(){
map.setMapCursor("default");
navToolbar.deactivate();
});
on(dom.byId("attr_ctrl"), "click", function(event){//显示或隐藏属性表
if($(".attr_ctrl").html()=="显示属性"){
var graphics=ftch.graphics;
console.log(graphics);
var item = "";
for(var i=0;i<graphics.length;i++){
var attr = graphics[i].attributes;
var id=attr.FID, name=attr.name;
item+= "{\"id\":"+id+",\"text\":'"+name+"'},";
}
item = "["+item.substring(0,item.length-1)+"]";
attr="{'total':"+graphics.length+",'items':"+item+"}";
PAGE_DATA = eval('(' + attr + ')');
loadPages(1);
$("#map_attr").show();
$(".attr_ctrl").html("隐藏属性");
$("#attr_ctrl").css("bottom","155px");
}
else{
$("#map_attr").hide();
$(".attr_ctrl").html("显示属性");
$("#attr_ctrl").css("bottom","5px");
}
});
showInfo = function(index){
var pt=ftch.graphics[index].geometry;
var attr=ftch.graphics[index].attributes;
map.infoWindow.setTitle(attr.name);
map.infoWindow.setContent(attr.name);
map.infoWindow.show(pt);
};
showObj = function(index){
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]),
1
),
new Color([255,0,0,1])
);
ftch.graphics[index].symbol=symbol;
ftch.redraw();
var pt=ftch.graphics[index].geometry;
var font = new esri.symbol.Font();
font.setSize("10pt");
font.setWeight(esri.symbol.Font.WEIGHT_BOLD);
var text = new esri.symbol.TextSymbol(ftch.graphics[index].attributes.name);
text.setAlign(esri.symbol.TextSymbol.ALIGN_START);
text.setFont(font);
text.setOffset(2,-15);
text.setColor(new dojo.Color([255,0,0,1]));
var labelGraphic = new esri.Graphic(pt,text);
labelLayer.add(labelGraphic);
};
restoreObj = function(index){
labelLayer.clear();
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE,
10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]),
1
),
new Color([0,255,0,0.25])
);
ftch.graphics[index].symbol=symbol;
ftch.redraw();
};
});
function loadPages(page){
$('#pages').html("");
$('#pages').itemPage({
data:PAGE_DATA,
currpage:page,
pagesize:pagesize
});
};
function showPage(page){
console.log(page);
switch(page){
case "prev":{//前一页
if(currpage>1){
currpage=currpage-1;
}
else{
alert("没有上一页了!");
}
break;
}
case "next":{//后一页
if(currpage!=getLastPage()){
currpage=currpage+1;
}
else{
alert("没有下一页了! ");
}
break;
}
case "last":{//最后一页
currpage=getLastPage();
break;
}
default:{
currpage=1;//第一页
break;
}
}
loadPages(currpage);
};
function getLastPage(){
var total=PAGE_DATA.total;
if(total%pagesize==0){
return total/pagesize;
}
else{
return parseInt(total/pagesize)+1;
}
}
</script>
</head> <body>
<div id="map">
<div id="map_ctrl">
<a id="full_extent" class="button">全 图</a>
<a id="zoom_in" class="button">拉框放大</a>
<a id="zoom_out" class="button">拉框缩小</a>
</div>
<div id="attr_ctrl">
<a class="attr_ctrl">显示属性</a>
</div>
<div id="map_attr" style="display: none">
<div id="pages">
</div>
</div>
</div>
</body>
</html>

page.css

.page_item{
background:#C9DCD7;
width:170px;
text-align:left;
padding-left:10px;
padding-top:3px;
padding-bottom:3px;
border-bottom:1px solid #3CF;
}
.page_item:hover{
background:#A9C9FA;
cursor:pointer;
}
#page_ctrl{
padding-top:5px;
}
.page_ctrl{
width:40px;
text-align:center;
background:#A9C9FA;
float:left;
margin:2px;
padding-top:5px;
padding-bottom:5px;
}
.page_ctrl:hover{
background:#C9DCD7;
cursor:pointer;
}

jquery.page.js

/**
* Created by Administrator on 14-10-18.
*/
(function($){
$.fn.itemPage = function(options){
var defaults = {};
var options = $.extend(defaults, options); var data=options.data,//数据
currpage=options.currpage,//当前页
pagesize=options.pagesize;//每页显示的数据条目器 var total=data.total; var items=$("<div id='items'></div>"),
pagectrl=$("<div id='page_ctrl'></div>"); var first=$("<div id=\"first\" class=\"page_ctrl\" onClick=\"showPage('first')\">首 页</div>"),
prev=$("<div id=\"prev\" class=\"page_ctrl\" onClick=\"showPage('prev')\">前一页</div>"),
next=$("<div id=\"next\" class=\"page_ctrl\" onClick=\"showPage('next')\">后一页</div>"),
last=$("<div id=\"last\" class=\"page_ctrl\" onClick=\"showPage('last')\">末 页</div>"); var start=getStartindex(),
end=getEndindex(); for(var i=start;i<end;i++){
var itemi=$("<div class='page_item' onclick='showInfo("+i+")' onmouseout='restoreObj("+i+")' onmouseover='showObj("+i+")'>"+data.items[i].text+"</div>");
items.append(itemi);
} pagectrl.append(first),
pagectrl.append(prev),
pagectrl.append(next)
pagectrl.append(last); var container = $(this);
container.append(items),
container.append(pagectrl); function getStartindex(){
return (currpage-1)*pagesize;
}
function getEndindex(){
var endIndex=0;
if(data.total%pagesize!=0 && currpage==getLastPage()){
endIndex = data.total;
}
else {
endIndex = currpage*pagesize;
}
return endIndex;
}
}
})(jQuery);

到此功能基本上完毕。非常多有待优化,还望继续关注LZUGIS之Arcgis for Javascript系列博文。您的支持就是我的动力,谢谢。

QQ:1004740957

mail:niujp08@qq.com

版权声明:本文博主原创文章。博客,未经同意不得转载。

Arcgis for Javascript之featureLayer图和属性互操作性的更多相关文章

  1. Arcgis for Javascript之featureLayer图和属性的互操作

    说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果: 显示效果 如上图所示,本文章主要实现了以下几个功能:1.FeatureLayer属性表的分页 ...

  2. arcgis for javascript 添加featurelayer,设置地图最大最小等级

    转自原文arcgis for javascript 添加featurelayer,设置地图最大最小等级 var map; var livingCenter; var livingCenterUrl = ...

  3. Arcgis for Javascript实现图

    首先,截个图给大家看结果: 初始化状态 放大后的状态 点击选中后的状态 如上图所看到的,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态.2.缩放后的状态:3.点击选中显示详情状态. ...

  4. ArcGIS for JavaScript继承TiledMapServiceLayer来实现“动态切图”

    这种方式可以提高出图速度于效果,算法见http://blog.newnaw.com/?p=633,我用ArcGIS for JavaScript API来实现.具体代码为: function init ...

  5. arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现

    图层控制是非常多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式.首先看图: 实现效果 ...

  6. 利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup

    1.引言 由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...

  7. Arcgis for Javascript之统计图的实现

    首先,截个图给大家看看效果: 初始化状态 放大后的状态 点击选中后的状态 如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态:2.缩放后的状态:3.点击选中显示详情状态.第 ...

  8. 关于ArcGis for javascript的使用

    1.引用ArcGis for javascript核心类库的两种方式: 1.1.下载js包,解压缩放入项目中 1.1.1.下载核心类库压缩文件, 下载地址: https://developers.ar ...

  9. Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

    原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...

随机推荐

  1. C++ 复制功能

    C++ 复制功能 说C++复制功能,它可能不是很熟悉.类中的拷贝构造函数和赋值操作符.可是其实或许我们一不小心就会忽略编译器所做的一些默认操作.引起晦涩的错误.以下分析几种场景: 一.场景一:所有默认 ...

  2. 转载ECTouch1.0 修改后台广告管理中广告列表显示广告图片

    http://www.ectouch.cn/topics/94.html 效果 操作: 1. 修改后台控制器文件 调用出相关字段信息. mobile\include\apps\admin\contro ...

  3. error: png.h not found.

    跑php设备 --enable-mbstring --enable-ftp --enable-gd-native-ttf --with-openssl --enable-pcntl --enable- ...

  4. [Django](1093, &quot;You can&#39;t specify target table &#39;fee_details_invoices&#39; for update in FROM clause&quot;) 错误

    dele_id = Fee_details_invoices.objects.filter(fee_detail_id__in=fee_id_list, return_type='2').values ...

  5. android笔记6——intent的使用

    今天挑出一节专门来说一下使用intent和intentfilter进行通信. 场景:一个Activity启动还有一个Activity. 前面已经讲了Fragment的切换,Fragment顾名思义是基 ...

  6. SQL在declare声明变量

    在sql添加的声明变量. declare @local_variable data_type 你需要指定一个变量声明的类型, 能够使用set和select对变量进行赋值, 在sql语句中就能够使用@l ...

  7. js调用百度地图接口

    原文:js调用百度地图接口 这是前几天公司做的新项目,上面需要用到地图的数据.第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了.心 ...

  8. 重新想象 Windows 8 Store Apps (22) - 文件系统: 访问文件夹和文件, 通过 AQS 搜索本地文件

    原文:重新想象 Windows 8 Store Apps (22) - 文件系统: 访问文件夹和文件, 通过 AQS 搜索本地文件 [源码下载] 重新想象 Windows 8 Store Apps ( ...

  9. [Windows Phone] 以多国语言做为开发前提 (2)

    原文:[Windows Phone] 以多国语言做为开发前提 (2) ? 前言 在先前的文章 [Windows Phone 开发 - 以多国语言做为开发前提 (1)] 中说明了简单的多国语言范例,今天 ...

  10. Java栈的实例-数组和链表两种方法(转)

    一.栈 栈的定义 栈(Stack)是限制仅在表的一端进行插入和删除运算的线性表. (1)通常称插入.删除的这一端为栈顶 (Top),另一端称为栈底 (Bottom). (2)当表中没有元素时称为空栈. ...