Openlayers记录（三）iClient for ol 实现聚合标签专题图。
先看效果
点击某个标签的时候，弹出具体信息
同时具有图例级别
实现代码
var themeSource, themeData;
var myDate = new Date();
function LabelThemeLayer() {
$('#labelTheme').css('display', 'block');
var currentYear = myDate.getFullYear();
var currentMonth = myDate.getMonth();
$.ajax({
type: "get",
url: "****",
data: {
*******
},
dataType: 'json',
async: false,
success: function (results) {
themeData = results;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
},
})
initThemeLayer();
};
function initThemeLayer() {
themeSource = new ol.source.Label("labelThemeLayer", {
map: map,
attributions: " ",
style: new SuperMap.ThemeStyle({
labelRect: true,
fontColor: "#000000",
fontWeight: "bolder",
fontSize: "18px",
fill: true,
fillColor: "#FFFFFF",
fillOpacity: 1,
stroke: false,
strokeColor: "#8B7B8B"
}),
themeField: "Actual",
styleGroups: [{
start: 0,
end: 300,
style: {
fillColor: "#6ACD06",
fontSize: "17px"
}
}, {
start: 301,
end: 900,
style: {
fillColor: "#FBD12A",
fontSize: "19px"
}
}, {
start: 901,
end: 2500,
style: {
fillColor: "#FE8800",
fontSize: "22px"
}
}, {
start: 2501,
end: 10000,
style: {
fillColor: "#FF0000",
fontSize: "24px"
}
}, {
start: 10001,
end: 20000,
style: {
fillColor: "#CC0000",
fontSize: "26px"
}
}, {
start: 20001,
end: 300000,
style: {
fillColor: "#960453",
fontSize: "28px"
}
}]
});
themeSource.on('mousemove', handleMouseOver);
var pointerInteraction = new ol.interaction.Pointer({
handleDownEvent: function (event) {
themeSource.fire('mousemove', event);
}
});
map.addInteraction(pointerInteraction);
var themeLayer = new ol.layer.Image({
source: themeSource
});
map.addLayer(themeLayer);
addFeatures();
$('#removeThemeLabel').on('click', function () {
map.removeLayer(themeLayer);
$('#labelTheme').css('display', 'none');
map.removeInteraction(pointerInteraction);
})
}
function addFeatures() {
var labelFeatures = [];
var feat;
for (var i = 0; i < themeData.length; i++) {
var lng = parseFloat(themeData[i].lon);
var lat = parseFloat(themeData[i].lat);
var text = themeData[i].Actual;
feat = new ol.supermap.ThemeFeature([lng, lat, text], themeData[i]);
labelFeatures.push(feat);
}
themeSource.addFeatures(labelFeatures);
}
function removethemeLayer(labelFeatures, feat) {
themeSource.addFeatures(null);
}
function updateInfoView(feature) {
var rs = myDate.toLocaleString();
if (!feature && popup) {
removePopup();
return;
}
var statisticsData = getStatisticsData();
var contentHTML = "" +
"" +
"" +
"" + feature.attributes.Actual + " | " +
" | " +
"" +
" " + feature.attributes.code + " " +
"" + rs + " " +
"" + "当前单位 ：" + feature.attributes.area + " " +
" | " +
"
" +
"" +
"" +
"" +
" | 当前 | " +
"最小 | " +
"最大 | " +
" " +
"计划 | " +
"" + feature.attributes.Planned + " | " +
"" + statisticsData.minNum + " | " +
"" + statisticsData.maxNum + " | " +
" " +
"实际 | " +
"" + feature.attributes.Actual + " | " +
"" + statisticsData.minActual + " | " +
"" + statisticsData.maxActual + " | " +
" " +
" |
";
var latLng = getLatLng(feature.attributes.lon, feature.attributes.lat);
var label = layer.msg(contentHTML, {
time: 0
, btn:['关闭'],
yes: function (index) {
layer.close(index);
}
});
var groups = themeSource.styleGroups;
for (var i = 0; i < groups.length; i++) {
if (feature.attributes.Actual >= groups[0].start && feature.attributes.Actual < groups[0].end) {
setColor("#6ACD06");
} else if (feature.attributes.Actual >= groups[1].start && feature.attributes.Actual < groups[1].end) {
setColor("#FBD12A");
} else if (feature.attributes.Actual >= groups[2].start && feature.attributes.Actual < groups[2].end) {
setColor("#FE8800");
} else if (feature.attributes.Actual >= groups[3].start && feature.attributes.Actual < groups[3].end) {
setColor("#FF0000");
} else if (feature.attributes.Actual >= groups[4].start && feature.attributes.Actual < groups[4].end) {
setColor("#CC0000");
} else if (feature.attributes.Actual >= groups[5].start && feature.attributes.Actual < groups[5].end) {
setColor("#960453");
}
}
function setColor(color) {
document.getElementById("contentBoxlabel").style.backgroundColor = color;
}
function getLatLng(latLng) {
return [parseFloat(themeData.lon), parseFloat(themeData.lat)]
}
}
function getStatisticsData() {
if (this.statisticsData) {
return this.statisticsData;
}
var Planned = [],
Actuals = [];
for (var i = 0; i < themeData.length; i++) {
Actuals.push(themeData[i].Planned);
Planned.push(themeData[i].Actual);
}
this.statisticsData = {
maxNum: Math.max.apply(Math, Planned),
minNum: Math.min.apply(Math, Planned),
maxActual: Math.max.apply(Math, Actuals),
minActual: Math.min.apply(Math, Actuals),
};
return this.statisticsData;
}
function handleMouseOver(e) {
if (e.target && e.target.refDataID) {
var fid = e.target.refDataID;
var fea = themeSource.getFeatureById(fid);
if (fea) {
updateInfoView(fea);
}
} else {
}
}
最后
数据从后台ajax请求
要素点击事件加不上，点击其实是模拟的一个鼠标点击然后抬起的过程。
参考超图iclient for openlayers 的标签专题图
点击跳转iClient for openlayers 标签专题图
