SuperMap.Layer.Elements

Elements图层用于添加任意dom对象,其自身是一个div,所以用户可以向该图层上添加任意dom对象,并且支持第三方扩展应用。 在第三方扩展应用中,只需要将第三方应用的dom对象添加到Elements图层的div中,使用getDiv方法可以获得Elements图层的div。

Inherits from

Summary
SuperMap.Layer.Elements Elements图层用于添加任意dom对象,其自身是一个div,所以用户可以向该图层上添加任意dom对象,并且支持第三方扩展应用。 在第三方扩展应用中,只需要将第三方应用的dom对象添加到Elements图层的div中,使用getDiv方法可以获得Elements图层的div。
Properties
isFixed {Boolean} 设置当前图层在鼠标拖动及放大缩小时位置是否固定,默认为 false。
Constructor
SuperMap.Layer.Elements 创建一个Elements layer
Functions
getDiv 获取该图层的div,用户往这个div里添加任意对象、
getLayerPxFromLonLat 把地理坐标转换为Elements图层的像素坐标。 通常使用此函数将用户或第三方应用的Dom对象关联到地图中,使Dom能够随地图缩放和移动。 实现Dom地图缩放和移动常需用到map的相关事件,如movestart,moveend等。例如: 1.将dom对象放置在地理要素“北京”所在位置。
getOffset 获取当前图层相对于左上角点的像素偏移量。

Properties

isFixed

{Boolean} 设置当前图层在鼠标拖动及放大缩小时位置是否固定,默认为 false。

Constructor

SuperMap.Layer.Elements

创建一个Elements layer

Parameters

name {String} 图层的名称。
var elementsLayer = new SuperMap.Layer.Elements("elementsLayer");
map.addLayers([elementsLayer]);
var elementsDiv = elementsLayer.getDiv();

在获取Elements的div后,通常需要指定该div(图层)的大小,例如:设置该div(图层)的大小为地图大小。

var size = map.getSize();
elementsDiv.style.width = size.w;
elementsDiv.style.height = size.h;

向Elements的div中添加dom,最简单的方式是使用Dom函数appendChild,例如:elementsDiv.appendChild(TheDom);此处的TheDom可以是用户自己的Dom对象,也可以是第三方扩展中的Dom对象,下面是一个添加简单dom对象的示例,

var myDom = document.createElement("img");
myDom.src = "images/circle.png";
elementsDiv.appendChild(myDom);

Functions

getDiv

getDiv:function()

获取该图层的div,用户往这个div里添加任意对象、

Return

{<HTMLElement>}

getLayerPxFromLonLat

getLayerPxFromLonLat:function( lonlat )

把地理坐标转换为Elements图层的像素坐标。 通常使用此函数将用户或第三方应用的Dom对象关联到地图中,使Dom能够随地图缩放和移动。 实现Dom地图缩放和移动常需用到map的相关事件,如movestart,moveend等。例如: 1.将dom对象放置在地理要素“北京”所在位置。

//代码片段1:
var lonlatLT = elementsLayer.getLayerPxFromLonLat(new SuperMap.LonLat(115.38803641666053,40.90618904574261));//myDom 左上角位置
var lonlatRB = elementsLayer.getLayerPxFromLonLat(new SuperMap.LonLat(117.38803641666053,38.90618904574261));//myDom 右下角位置
//设置dom的大小
myDom.style.width = lonlatRB.x -  lonlatLT.x +"px";
myDom.style.height = lonlatRB.y -  lonlatLT.y + "px";
var lonlat =  elementsLayer.getLayerPxFromLonLat(new SuperMap.LonLat(116.38803641666053,39.90618904574261));//北京市坐标
//设置dom的位置
myDom.style.position = "absolute";
myDom.style.left = lonlat.x - (lonlatRB.x - lonlatLT.x)/2 + "px";
myDom.style.top = lonlat.y- (lonlatRB.y -  lonlatLT.y)/2 + "px";

2.通过监听map的moveend来实现Dom地图缩放和移动。

map.events.on({moveend: function (evt) {  //
           if(evt.zoomChanged){      //判断是否缩放
               var level = map.getZoom();    //通过map获得缩放的级数
               if(level > 2){
                   myDom.src = "images/marker.png";
                   myDom.style.opacity = "0.5";
               }
             else{
                   myDom.src = "images/circle.png";
                   myDom.style.opacity = "1";
               }
           }
     //在地图移动结束后,通常需要重置Dom的位置。复制上面示例中的“代码片段1”到此处即可。
}});

Parameters

lonlat {SuperMap.LonLat}地理坐标

Return

{SuperMap.Pixel}

getOffset

getOffset:function()

获取当前图层相对于左上角点的像素偏移量。

getDiv:function()
获取该图层的div,用户往这个div里添加任意对象、
getLayerPxFromLonLat:function( lonlat )
把地理坐标转换为Elements图层的像素坐标。 通常使用此函数将用户或第三方应用的Dom对象关联到地图中,使Dom能够随地图缩放和移动。 实现Dom地图缩放和移动常需用到map的相关事件,如movestart,moveend等。例如: 1.将dom对象放置在地理要素“北京”所在位置。
getOffset:function()
获取当前图层相对于左上角点的像素偏移量。
图层类。
这个类用来表示经度和纬度对。
此类用x,y坐标描绘屏幕坐标(像素点)。
Close