(转)Arcgis for Js之鼠标经过显示对象名的实现
http://blog.csdn.net/gisshixisheng/article/details/41889345
在浏览地图时,移动鼠标经过某个对象或者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"));
- };
比较:
以上两种方式都可实现相同的效果,但就实现的难易程度,第二种比第一种简单,在实现的美观程度上,第二种比第一种更好调整与控制,在实现效率上,第二种比第一种好一点,可是,就在与地图的结合上,很显然,第二种比第一种稍微差一点。
(转)Arcgis for Js之鼠标经过显示对象名的实现的更多相关文章
- Arcgis for Js之鼠标经过显示对象名的实现
在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来说是很实用的,本文讲述在Arcgis for Js中,用两种不同的方式来实现该效果. 为了有个直观的概念,先给大家看看实 ...
- CSS或者JS实现鼠标悬停显示另一元素
想达到鼠标悬停到元素a上,显示另一个元素b,可以通过css实现也可以通过js实现.js:写两个函数:mouseenter,mouseleave,例如:其中 $("#a").mous ...
- JS实现鼠标悬浮,显示内容
其实就是增加title属性
- Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示
功能需求: 分省市统计并展示全国雨量站的数目与位置. 常规做法: 分省市雨量站的数目通过统计表的形式在页面端展示,位置根据XY坐标信息将雨量站标绘在图上. 优化做法: 去掉统计图的展示方式,直接将各省 ...
- 鼠标经过显示二级菜单的js特效
本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- (转载)arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
- js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- arcgis for js学习之Draw类
arcgis for js学习之Draw类 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- (转) Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
随机推荐
- hdu 4046 树状数组
#include<stdio.h> #include<string.h> #define N 51000 char s[N]; int a[N],n; int number( ...
- 数学 找规律 Jzzhu and Sequences
A - Jzzhu and Sequences Jzzhu has invented a kind of sequences, they meet the following property: ...
- [bzoj1010][HNOI2008]玩具装箱toy_斜率优化dp
玩具装箱toy bzoj-1010 HNOI-2008 题目大意:P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一 ...
- django 和 mysql的一次troubleshooting
下面是一次用django连接mysql的经历,记录下来也许以后会有帮助. 首先是用django的./manage.py syncdb 去连接mysql -bash-3.2$ ./manage.py s ...
- 【JavaScript】离开页面前提示
离开页面前的提示不能够用onunload去做,由于它仅仅是兼容IE,你要兼容Google与FireFox就蛋疼了. 并且这个事件还是关闭之后才会触发的. 取而代之能够用onbeforeunload去实 ...
- What is the difference between task and thread?
http://stackoverflow.com/questions/4130194/what-is-the-difference-between-task-and-thread 回答一: A tas ...
- XML案例(使用JAXP进行DOM解析)
1.book.xml <?xml version="1.0" encoding="UTF-8" standalone="no"?> ...
- 【WIP】Rails devise导入与使用方法
创建: 2017/09/07 更新: 2017/10/14 标题加上[WIP] 源代码: https://github.com/plataformatec/devise 命令行内容总结 安 ...
- POJ 1160 DP
题目: poj 1160 题意: 给你n个村庄和它的坐标,现在要在其中一些村庄建m个邮局,想要村庄到最近的邮局距离之和最近. 分析: 这道题.很经典的dp dp[i][j]表示建第i个邮局,覆盖到第j ...
- ThinkPHP __PUBLIC__的定义 __ROOT__等 常用 常量的定义
'__TMPL__' => APP_TMPL_PATH, // 项目模板目录 '__ROOT__' => __ROOT__, // 当前网站地址 '__APP__' => __APP ...