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

比較：

 

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