>作者: 阿飞
SuperMap iClient for JavaScript
7C之后提供了一个Elements图层，其自身是一个div，用户可以在该图层上添加任意dom对象，并且支持第三方扩展应用。可以说这是一个接近于万能的图层，那么这个图层可以做什么呢？咱们接着往下看。
由于Elements图层本身是个div，也就是说该图层内可以放置任何DOM元素，可以是div、图片、文字、svg图形、第三方类库等，调用Elements图层的
getDiv方法获得该图层的div后，将dom对象添加到该div中，便可拓展应用。
它可以叠加：
渲染好的图片
基于D3.js生成的文字云
基于D3.js生成的风向图
基于Twaver生成的network
你可以在Element图层上面放置任何第三方图形框架生成的要素或者放置一个canvas在上面绘制各种各样绚丽的动画。下面我们来详细介绍一下如何使用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对象。
//创建一个图片对象并添加到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();
}});
以上代码片段，实现了将一张图片叠放在地图上并随着地图缩放、移动及其他行为。
网友评论