发现问题
在之前项目运行当中，有同事在超图的iClient产品(classic)的使用中遇到了一个问题，当我在对矢量图层和聚类图层都有点击的需求时，即使加了这两个图层的点击控件，只能点击到后加载的那个图层，也就是说如果我在图层叠加的时候先加载矢量图层，后加载聚类图层，不管我的两个点击选择控件(SuperMap.Control.SelectCluster 和 SuperMap.Control.SelectFeature)哪一个先加载，最终只能有效点击聚类图层。
问题解决
解决思路
尝试了用不同的方式去加载这两个图层，或者通过按钮切换要点击的图层，但是考虑到交互这方面，觉得这个操作，对于用户来说过于繁琐了，限制了使用者，不是一个太好的方法。后面尝试通过设置不同的渲染方式，然后这个问题某种程度上解决了，但是仍然有一些缺陷。
<!--********************************************************************
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title data-i18n="resources.title_clusterLayer"></title>
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript" src="../data/changchundata.js"></script>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
background: #fff;
width: 100%;
height: 100%
}
#map {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #3473b7;
}
#toolbar {
position: absolute;
top: 50px;
right: 10px;
width: 300px;
text-align: center;
z-index: 100;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
var map, layer, clusterLayer, infowin,vectorlayer, pointFeature,
url = host + "/iserver/services/map-changchun/rest/maps/长春市区图";
var styleLine = {
strokeColor: "black",
strokeWidth: 1,
fill: false
};
init();
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,
}, {maxResolution: "auto"});
layer.events.on({"layerInitialized": addLayer});
vectorlayer = new SuperMap.Layer.Vector("vectorLayer", {renderers: ["Canvas2"]});
var callbacks = {
click: function (currentFeature) {
closeInfoWin();
var popup = new SuperMap.Popup.FramedCloud("popwin",
new SuperMap.LonLat(4803, -3726),
null,
resources.text_mouseClickEventLayer,
null,
true);
infowin = popup;
map.addPopup(popup);
}
};
var selectFeature = new SuperMap.Control.SelectFeature(vectorlayer,
{
callbacks: callbacks
});
map.addControl(selectFeature);
selectFeature.activate();
}
function addLayer() {
//创建聚散图层并添加layers
clusterLayer = new SuperMap.Layer.ClusterLayer("Cluster");
map.addLayers([layer,vectorlayer,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(4803, -3726), 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);
addData();
}
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: "./images/cluster4.png",
graphicWidth: 12,
graphicHeight: 12
};
f.info = {
"name": fi.fieldValues[4]
};
ps.push(f);
}
return ps;
}
function closeInfoWin() {
if (infowin) {
try {
infowin.hide();
infowin.destroy();
}
catch (e) {
}
}
}
function addData() {
vectorlayer.removeAllFeatures();
var point = new SuperMap.Geometry.Point(4803, -3726);
pointFeature = new SuperMap.Feature.Vector(point);
pointFeature.style = {
label:"label",
fontColor:"#0000ff",
fontOpacity:"0.5",
fontFamily:"隶书",
fontSize:"2em",
fontWeight:"bold",
fontStyle:"italic",
labelSelect:"true",
};
vectorlayer.addFeatures(pointFeature);
}
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>
</body>
</html>
对矢量图层进行设置：renderers: [“Canvas2”] ，然后控制矢量图层先于聚类图层加载，就解决了这个问题，这个是直接在 超图官网 上面的范例中尝试的。
不足
在解决了这个问题之后，发现如果是对聚类图层设置renderers好像并没有效果，还是和一开始的问题一样，只能点击后加载的图层。但是因为项目中需求没有那么复杂，没有涉及到后续的添加图层再添加点击这种，就先使用了这个方法，后续再去研究如何设置聚类图层使其能解决掉这个小问题
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
