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 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

如何在已有的 Web 应用中使用 ReactJS

当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如...

9500
来自专栏xingoo, 一个梦想做发明家的程序员

JQuery向导插件Step——第一个阉割版插件

如果使用过JQuery Steps的朋友一定会发现这个插件有一个缺点,就是页面在第一次进入的时候,会进行一次很明显的DOM重绘——页面会闪一下。 尤其是前端...

42170
来自专栏HTML5学堂

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体...

57150
来自专栏MixLab科技+设计实验室

DIY一个Sketch插件,生成猫猫狗狗的全家福

最近朋友圈都在玩的全家福: ? 看了下是使用 cocos2D 引擎制作的, http://www.cocos.com/creator 主要是图片合成,利用前端...

35170
来自专栏河湾欢儿的专栏

03-保存

存储所需内容 ctrl+c ctrl+n ctrl+v 或者直接拖动文件至新文件

9420
来自专栏Jerry的SAP技术分享

Chrome开发者工具中Elements(元素)断点的用途

SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间。

37240
来自专栏全栈

前端工程化(三)---Vue的开发模式

17730
来自专栏姬小光

姬小光前端小讲堂【第002期】

在上一期“然并卵的 Hello World !”(聊天界面回复 001)发出之后,同学们的反应跟我的预期出奇的一致,那就是然!并!卵!

12420
来自专栏前端新视界

如何在现有的 Web 应用中使用 ReactJS

原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin ? 当我们学习...

26540
来自专栏菩提树下的杨过

额的神啊:AS3中Button被disable了,也会触发Click事件!

btnTest.addEventListener(MouseEvent.CLICK,btnTestClick); function btnTestClick(...

32870

扫码关注云+社区

领取腾讯云代金券