使用产品:iserver 8c 810 操作系统:win8 x64
数据类型: oracle 11g x64
问题详细描述:在聚散图点击聚点时,怎样可以设置一个“炸裂效果”,即在聚点位置和被聚点之间有一条线,可不可以给一段代码示例,我是一个小白,万分感谢。
联系方式:qq:1613811738
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>聚类图层</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
background: #fff;
}
#map{
position: relative;
height: 553px;
border:1px solid #3473b7;
}
</style>
<link href='./css/bootstrap.min.css' rel='stylesheet' />
<link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
<script src='./libs/SuperMap.Include.js'></script>
<script src='./data/changchundata.js'></script><!--该文件中保存了长春地图的一些兴趣点-->
<script type="text/javascript">
var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
var map, layer,clusterLayer,infowin,
url=host+"/iserver/services/map-changchun/rest/maps/长春市区图";
var styleLine = {
strokeColor: "black",
strokeWidth: 1,
fill: false
};
function init(){
//创建map对象和动态图层
map = new SuperMap.Map("map", { controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
})], units: "m"
});
layer = new SuperMap.Layer.TiledDynamicRESTLayer("changchun", url, {transparent: true, cacheEnabled: true, redirect: true}, {maxResolution:"auto"});
layer.events.on({"layerInitialized": addLayer});
}
function addLayer(){
//创建聚散图层并添加layers
clusterLayer = new SuperMap.Layer.ClusterLayer("Cluster");
map.addLayers([layer,clusterLayer]);
//创建聚散选择控件。该控件实现了聚散图层的鼠标事件。
var select = new SuperMap.Control.SelectCluster(clusterLayer,{
callbacks:{
click:function(f){ //点击兴趣点弹出信息窗口
closeInfoWin();
if(!f.isCluster){ //当点击聚散点的时候不弹出信息窗口
openInfoWin(f);
}
},
clickout:function(){ //点击空白处关闭信息窗口
closeInfoWin();
}
}
});
//将控件添加到map上
map.addControl(select);
//设置中心点,出图
map.setCenter(new SuperMap.LonLat(0,0), 1);
clusterLayer.events.on({"moveend": function(e){//注册moveend事件,当缩放的时候关闭信息窗口
if(e&& e.zoomChanged)closeInfoWin();
}});
clusterLayer.events.on({"clusterend":function(e){
//e包含了聚散完成所需要的信息,其结构如下e={clusterPoints:[],displayedPoints:[],element:null,object:null,type:"clusterEnd"}
//其中,clusterMaps是包含了聚散点映射关系集合,clusterPoints[i]则表示第i个聚散点映射关系,其类型为{SuperMap.Feature.Vector},其内的children属性包含有对应的实际点坐标
//而displayedPoints则是用户所设定的某一范围内不需要被聚散的点集合
}});
//激活控件。
select.activate();
//往聚散图层中添加兴趣点
var fs1 = getFeatures();
clusterLayer.addFeatures(fs1);
}
function getFeatures(){
var b = map.getExtent();
var ps = [];
var fs = changchundata;
for(var i=0;i<fs.length;i++){
var fi = fs[i];
var c = fi.geometry.center;
var f = new SuperMap.Feature.Vector();
f.geometry = new SuperMap.Geometry.Point(c.x, c.y);
f.style = {
pointRadius: 4,
graphic:true,
externalGraphic:"./theme/images/cluster4.png",
graphicWidth:12,
graphicHeight:12
};
f.info = {
"name":fi.fieldValues[4]
};
ps.push(f);
}
return ps;
}
function openInfoWin(feature){
var geo = feature.geometry;
var bounds = geo.getBounds();
var center = bounds.getCenterLonLat();
var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";
contentHTML += "<div>"+feature.info.name+"</div></div>";
var popup = new SuperMap.Popup.FramedCloud("popwin",
new SuperMap.LonLat(center.lon,center.lat),
null,
contentHTML,
null,
true);
feature.popup = popup;
infowin = popup;
map.addPopup(popup);
}
function closeInfoWin(){
if(infowin){
try{
infowin.hide();
infowin.destroy();
}
catch(e){}
}
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>