Arcgis for Js之鼠标经过显示对象名的实现
来源:互联网 发布:网络函授 编辑:程序博客网 时间:2024/06/08 05:27
在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来说是很实用的,本文讲述在Arcgis for Js中,用两种不同的方式来实现该效果。
为了有个直观的概念,先给大家看看实现后的效果:
百度地图的效果
效果1
效果2
直观的看到了效果,下面说说在Arcgis for Js中实现的两种方式。在实现给效果的时候,有layer的两个事件,mouse-over和mouse-out事件,鼠标经过显示对象名称,鼠标移除清除显示。
1、通过TextSymbol和GraphicMarkerSymbol实现
通过这种方式显示是直接用Arcgis的方式实现的,实现的代码如下,效果为效果2:
function mouseOverLayer(e){map.setMapCursor("pointer");console.log(e.graphic);var font = new esri.symbol.Font();font.setSize("10pt");font.setFamily("微软雅黑");var cpoint = event.graphic.geometry;var text = new esri.symbol.TextSymbol(event.graphic.attributes.name);text.setFont(font);text.setColor(new dojo.Color([0,0,0,100]));text.setOffset(20,-35);pmsTextBg.setOffset(20,-30);var textLength=event.graphic.attributes.name.length;pmsTextBg.setWidth(textLength*13.5+5);var bgGraphic = new esri.Graphic(cpoint, pmsTextBg);showTextLayer.add(bgGraphic);var labelGraphic = new esri.Graphic(cpoint,text);showTextLayer.add(labelGraphic);};function mouseOutLayer(){map.graphics.clear();showTextLayer.clear();map.setMapCursor("default");}
2、直接用div显示
通过获取鼠标点位置或者几何体位置,将位置转换为屏幕坐标,将信息用div的形式展示出来,代码如下,效果为效果1:
function mouseOverLayer(e){ map.setMapCursor("pointer"); console.log(e.graphic.attributes); var scrPt = map.toScreen(e.graphic.geometry); console.log(scrPt); var textDiv = dojo.doc.createElement("div"); dojo.attr(textDiv,{ "id":"text" }); dojo.style(textDiv, { "left": scrPt.x+10 + "px", "top": scrPt.y+10 + "px", "position": "absolute", "z-index":99, "background":"#fcffd1", "font-size":"10px", "border":"1px solid #0096ff", "padding": "0.1em 0.3em 0.1em", "font-size": "11px", "border-radius": "3px", "box-shadow": "0 0 0.75em #777777" }); textDiv.innerHTML =e.graphic.attributes.name; dojo.byId("map").appendChild(textDiv); }; function mouseOutLayer(e){ map.setMapCursor("default"); dojo.byId("map").removeChild(dojo.byId("text")); };
比较:
以上两种方式都可实现相同的效果,但就实现的难易程度,第二种比第一种简单,在实现的美观程度上,第二种比第一种更好调整与控制,在实现效率上,第二种比第一种好一点,可是,就在与地图的结合上,很显然,第二种比第一种稍微差一点。
如有疑问,请联系:
QQ:1004740957
Email:niujp08@qq.com
0 0
- Arcgis for Js之鼠标经过显示对象名的实现
- js实现图片显示局部,鼠标经过显示全部的效果
- JS实现放大镜功能,鼠标经过一个图片,放大显示
- JS实现鼠标经过用户头像显示资料卡的效果,可点击
- Arcgis for JS之对象捕捉
- Arcgis for JS之Cluster聚类分析的实现
- js-鼠标经过显示下拉菜单
- js 鼠标经过显示隐藏效果实例
- js鼠标经过,实现图片的渐隐渐现
- Arcgis for js实现北京地铁的展示
- Arcgis for JS实现台风运动路径与影像范围的显示
- Arcgis for JS实现台风运动路径与影像范围的显示
- 鼠标经过图片,显示图片的缩略图
- Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示
- 表格鼠标经过有底色的js
- 表格鼠标经过有底色的js
- 鼠标经过显示文字
- 鼠标经过显示层
- ORACLE触发器详解
- OC--类与对象
- 第16周 oj题目问题 C: 相同的数字!
- JAVA多线程简单实现方法
- 【POJ2104】K-th Number 主席树?函数式线段树?可持久化线段树?……反正是其中一个
- Arcgis for Js之鼠标经过显示对象名的实现
- 下载Android 5.0源码(附源码)
- linux 查看linux版本
- Android中SQLite应用详解
- 使用GNS3配置路由器后,CPU占用率达90%,该如何解决
- Java8中的default方法
- 应用程序正常初始化(0xc000007b)失败,请单击“确定”,终止应用程序的问题处理
- NVMain运行机制深入了解之八
- Android中对APK进行反编译