扩展图专题

---

一、简介

SuperMap iClient for JavaScript 提供了Elements图层，其自身是一个div，用户可以在该图层上添加任意dom对象，并且支持第三方扩展应用。

调用Elements图层的 getDiv方法获得该图层的div后，将dom对象添加到该div中，便可拓展应用。

二、使用说明

下面我们来详细介绍一下如何使用Elements图层扩展应用

1.首先创建一个Elements图层，将其添加到地图中，并获取该图层的div。

  //创建Elements的实例，获得其div
  var elementsLayer = new SuperMap.Layer.Elements("elementsLayer");
  map.addLayers([elementsLayer]);
  var elementsDiv = elementsLayer.getDiv()
       

可设置Elements图层的div的大小，如下代码片段中，设置该div的大小为地图大小

 //设置Elements实例的div为地图大小
 var size = map.getSize
 elementsDiv.style.width = size.w;
 elementsDiv.style.height = size.h;
    

2.获取了该图层的div后，用户可以在该图层上添加任意dom对象，无论是用户自己的Dom对象，还是第三方扩展中的Dom对象。

例如：添加简单DOM对象

 //创建一个图片对象并添加到Elements的实例中
 myDom = document.createElement("img");
 myDom.src = "images/china.png";
 elementsDiv.appendChild(myDom);
  

以上代码片段中，调用document.createElement()方法创建一个dom对象，并调用Dom函数的appendChild方法将其添加到Elements图层的div上。

3.其次，用户可调用getLayerPxFromLonLat方法，将Dom对象关联到地图中。

该方法把地理坐标转换为Elements图层的像素坐标。

 function setDom(){
     var bounds = new SuperMap.Bounds(73.620048522949, 3.8537260781999, 134.76846313477, 53.553741455078);
     var lonlatLeftTop = new SuperMap.LonLat(bounds.left, bounds.top);
     var lonlatRightBottom = new SuperMap.LonLat(bounds.right, bounds.bottom);

     //然后分别将左上右下点转换为像素点
     var pxLeftTop = elementsLayer.getLayerPxFromLonLat(lonlatLeftTop);
     var pxRightBottom = elementsLayer.getLayerPxFromLonLat(lonlatRightBottom);

     //设置图片的大小
     myDom.style.width = pxRightBottom.x -  pxLeftTop.x +"px";
     myDom.style.height = pxRightBottom.y -  pxLeftTop.y + "px";

     //设置图片的位置
     myDom.style.position = "absolute";
     myDom.style.left = pxLeftTop.x  + "px";
     myDom.style.top = pxLeftTop.y + "px";
 }
  

以上代码片段中，将图片DOM的范围设置为一地理范围转换的像素范围中，并且将图片DOM的中心位置也设置为某一地理位置转换的像素位置中，从而将DOM对象关联到地图中,且可使其随着地图缩放和平移。

4.然后，用户可通过监听map的事件，来实现Dom对象随着地图缩放、移动及其他行为。

例如：监听map的moveend事件

  //监听地图的moveend事件
  map.events.on({moveend: function (evt) {
                //判断是否缩放
                if(evt.zoomChanged){
                    //可在此实现Dom对象随着地图缩放的其他行为
                }
                //重置图片的大小和位置，让图片可以随地图缩放和平移(具体代码如3中所示)
                setDom();
              }});
         

以上代码片段，可实现Dom对象随着地图缩放、移动及其他行为。

此完整范例请见 示范程序->可视化->可视化图层->Elements Layer 扩展。

用户可以在Elements图层上添加任意dom对象,以上范例说明是其一简单示范。

三、其他拓展示例