（转）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：

[javascript] view plaincopy print?

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：

[html] view plaincopy print?

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"));
};

比较：

以上两种方式都可实现相同的效果，但就实现的难易程度，第二种比第一种简单，在实现的美观程度上，第二种比第一种更好调整与控制，在实现效率上，第二种比第一种好一点，可是，就在与地图的结合上，很显然，第二种比第一种稍微差一点。

转载于:https://www.cnblogs.com/telwanggs/p/6972940.html

（转）Arcgis for Js之鼠标经过显示对象名的实现相关推荐

数据库已经插入表名但是显示对象名无效
SQL SERVER 已经插入表名,select 可以查出数据,但是显示对象名无效问题解决:试试刷新本地缓存,方法--菜单栏>编辑>intelliSense>刷新本地缓存.
vue 悬停显示另一个div_CSS或者JS实现鼠标悬停显示另一元素
想达到鼠标悬停到元素a上,显示另一个元素b,可以通过css实现也可以通过js实现. js: 写两个函数:mouseenter,mouseleave,例如:其中 $("#a").mo ...
html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单
个人信息维护学生信息修改修改密码--%> 修改密码--%> 修改密码--%> 退出登录用户: 所在班级: js文件 //个人信息维护下拉菜单样式 $(function () { ...
Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示
功能需求: 分省市统计并展示全国雨量站的数目与位置. 常规做法: 分省市雨量站的数目通过统计表的形式在页面端展示,位置根据XY坐标信息将雨量站标绘在图上. 优化做法: 去掉统计图的展示方式,直接将各省 ...
SQL SERVER 插入时表名显示对象名无效问题
试试刷新本地缓存,方法 intelliSense ->刷新本地缓存.
(转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){$(".weixinTop").show();},function( ...
js实现鼠标放在div 悬浮显示另一个div内容链接（不占位置）
js实现鼠标放在div 悬浮显示另一个div内容链接 (不占位置) 代码如下不喜勿喷简单记录前端小知识 <div><a id="div1" href=&quo ...
html5鼠标滑过边框内外发亮,JS实现鼠标滑过显示边框的菜单效果
本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: JS鼠标滑过显示边框菜单 .menulines{ border:1px solid white; } .menuli ...

（转）Arcgis for Js之鼠标经过显示对象名的实现

（转）Arcgis for Js之鼠标经过显示对象名的实现相关推荐

最新文章

热门文章