专栏首页跟牛老师一起学WEBGISArcgis for Js之鼠标经过显示对象名的实现

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

在浏览地图时,移动鼠标经过某个对象或者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 条评论
登录 后参与评论

相关文章

  • mapboxGL和高德API结合实现路径规划

    高德地图路径规划API说明如上图,有行走、公交、驾车等多种路径,本文以行走为例来说明。

    lzugis
  • 地图中的鼠标移动响应

    假设如下场景:首先地图加载一个WMS或者切片,wms为POI或者切片上有POI,我们知道WMS或者切片是无法做到像Marker或者矢量的事件相应的,但是我们又需...

    lzugis
  • ol4中实现只能查看用户权限所在区的地图

    我们经常会碰到这样的需求:北京的用户只能查看北京的地图,天津的只能看天津的地图……这里面涉及到了一个地图的访问权限问题,要实现这样的功能如果用服务+过滤的方式比...

    lzugis
  • 拿 NLP 来分析我自己的 Facebook 数据,会发生什么?

    当一个 NLP(自然语言处理)在观察我的写作风格(也是如何处理我自己的 Facebook 数据!)

    AI研习社
  • Facebook 承认向 61 家公司提供用户数据特殊访问权限

    据CNBC北京时间7月2日报道,Facebook承认,即使在2015年宣布限制对此类数据的访问后,它仍然允许61家公司访问用户数据。

    C4rpeDime
  • 绘图文本重叠怎么办?R-ggrepel和Python-adjustText 帮你解决

    在进行数据可视化作品绘制时,我们需要在相应位置添加文本标签进行标注或者解释说明使用,少量数据点进行标注时相对简单,也比较明确,当需要标注的数据较多、或集中在一个...

    DataCharm
  • “共轭分布”是什么?

    在贝叶斯学派中,如果后验分布 与先验概率分布 在相同的概率分布族中,则先验分布和后验分布称为「共轭分布」,而先验分布被称为似然函数的「共轭先验」(Conju...

    阿泽 Crz
  • 细数无人机的幕后功臣:开源飞控流派全揭秘

    无人机能被快速普及,很大程度上是得益于开源飞控的发展,因为困扰着无人机发展的关键设备是自动驾驶仪。那么,开源飞控是什么?又是如何发展过来的? 在纷繁复杂的无人机...

    机器人网
  • 【Go 语言社区】js 向服务器请求数据的五种技术

    Ajax,在它最基本的层面,是一种与服务器通讯而不重载当前页面的方法,数据可从服务器获得或发送给服务器。有多种不同的方法构造这种通讯通道,每种方法都有自己的优势...

    李海彬
  • 7 mysql事务(包括redo log,undo log,MVCC)及事务实现原理

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    天涯泪小武

扫码关注云+社区

领取腾讯云代金券