Arcgis for Javascript之featureLayer图和属性的互操作
说明:主要实现加载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图和属性的互操作的更多相关文章
- Arcgis for Javascript之featureLayer图和属性互操作性
说明:主要实现加载FeatureLayer并显示属性表,而要实现联动属性表与地图,首先,看看实施后的效果: 显示效果 如上图所看到的,本文章主要实现了下面几个功能:1.FeatureLayer属性表的 ...
- arcgis for javascript 添加featurelayer,设置地图最大最小等级
转自原文arcgis for javascript 添加featurelayer,设置地图最大最小等级 var map; var livingCenter; var livingCenterUrl = ...
- Arcgis for Javascript实现图
首先,截个图给大家看结果: 初始化状态 放大后的状态 点击选中后的状态 如上图所看到的,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态.2.缩放后的状态:3.点击选中显示详情状态. ...
- ArcGIS for JavaScript继承TiledMapServiceLayer来实现“动态切图”
这种方式可以提高出图速度于效果,算法见http://blog.newnaw.com/?p=633,我用ArcGIS for JavaScript API来实现.具体代码为: function init ...
- arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
图层控制是非常多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式.首先看图: 实现效果 ...
- 利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup
1.引言 由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...
- Arcgis for Javascript之统计图的实现
首先,截个图给大家看看效果: 初始化状态 放大后的状态 点击选中后的状态 如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态:2.缩放后的状态:3.点击选中显示详情状态.第 ...
- 关于ArcGis for javascript的使用
1.引用ArcGis for javascript核心类库的两种方式: 1.1.下载js包,解压缩放入项目中 1.1.1.下载核心类库压缩文件, 下载地址: https://developers.ar ...
- Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...
随机推荐
- mysql双向主从同步
双向主从同步 双方互相主从同步配置 然后再my.cnf中加上如下配置 [mysqld]master1:auto_increment_increment = 2 //自增ID的间隔,如1 3 5间隔为2 ...
- HBase在数据统计应用中的使用心得
转载自:http://www.cnblogs.com/panfeng412/archive/2011/11/19/2254921.html 1. 数据统计的需求 互联网上对于数据的统计,一个重要的应用 ...
- vue移动端 滚动 鼠标按下效果
<div class="item" :id="item.RowID" @touchstart="touchstart(item.RowID)&q ...
- rpm命令,yum命令大全
rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种.二进制包可以直接安装在计算机中,而源代码包将会由RPM自动编译.安装.源代码包经常以src.rpm作为后缀名. 常用命令组合 ...
- Oracle11g:分区表数据操作出现ORA-14400异常处理
Oracle11g:分区表数据操作出现ORA-14400异常处理 问题: 当对已分区的表数据进行操作(例如新增,修改),出现异常提示: ORA: 插入的分区关键字未映射到任何分区 分析: 意思说的是插 ...
- 华丽的使用sublime写lua~ sublime lua相关必装插件推荐~~
缘起 lua脚本语言虽好,代码写得飞快,可是写错了调试起来却很困难,lua使用者经常容易犯得一个错误是--写错变量名了,if end 嵌套太多没匹配~,多打了一个逗号, --假设定义了一个变量 loc ...
- eclipse中的错误解决——Servlet cannot be resolved to a type
问题如图 解决问题方法
- idea调节字体大小
这是调节前的 这是调节后的 步骤
- 未来简史之数据主义(Dataism)
https://www.jianshu.com/p/8147239c9cb0?from=singlemessage junjguo 关注 2017.04.24 22:08* 字数 8116 阅读 31 ...
- nginx上布置thinkphp
thinkphp config配置: ', //URL模式 nginx rewrite配置: location / { set $static 0; if ($uri ~ ...