Arcgis for Js之鼠標通過顯示對象名的實現

時間 2019-11-11

標籤 arcgis 鼠標通過顯示對象實現欄目 JavaScript 简体版

原文原文鏈接

在瀏覽地圖時，移動鼠標通過某個對象或者POI的時候，可以提示該對象的名稱對用戶來講是很實用的，本文講述在Arcgis for Js中，用兩種不一樣的方式來實現該效果。javascript

爲了有個直觀的概念，先給你們看看實現後的效果：html

百度地圖的效果java

效果1app

效果2ssh

直觀的看到了效果，下面說說在Arcgis for Js中實現的兩種方式。在實現給效果的時候，有layer的兩個事件，mouse-over和mouse-out事件，鼠標通過顯示對象名稱，鼠標移除清除顯示。學習

一、經過TextSymbol和GraphicMarkerSymbol實現spa

經過這種方式顯示是直接用Arcgis的方式實現的，實現的代碼以下，效果爲效果2：.net

[javascript] view plain copy

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

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

二、直接用div顯示code

經過獲取鼠標點位置或者幾何體位置，將位置轉換爲屏幕座標，將信息用div的形式展現出來，代碼以下，效果爲效果1：xml

[html] view plain copy

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

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

比較：

以上兩種方式均可實現相同的效果，但就實現的難易程度，第二種比第一種簡單，在實現的美觀程度上，第二種比第一種更好調整與控制，在實現效率上，第二種比第一種好一點，但是，就在與地圖的結合上，很顯然，第二種比第一種稍微差一點。

原文地址：http://blog.csdn.net/gisshixisheng/article/details/41889345

聲明：我的學習，不作非法盈利