UI交互HTML代码：
代码语言：html复制 <div class="panel panel-success">
<!-- Default panel contents -->
<div class="panel-heading">总用水量对比</div>
<div class="panel-body" data-role="regionRender" data-field="regionMonthTotal">
<div class="progress" data-role="renderBreaks">
<div class="progress-bar progress-bar-success level1" style="width: 20%" data-min="0" data-max="1000" data-color="[56, 168, 0, 0.5]">
1000吨
</div>
<div class="progress-bar progress-bar-warning level2" style="width: 20%" data-min="1000" data-max="1500" data-color="[139, 209, 0, 0.5]">
1500吨
</div>
<div class="progress-bar progress-bar-danger level3" style="width: 20%" data-min="1500" data-max="2000" data-color="[255, 255, 0, 0.5]">
2000吨
</div>
<div class="progress-bar progress-bar-danger level4" style="width: 20%" data-min="2000" data-max="2500" data-color="[255, 128, 0, 0.5]">
2500吨
</div>
<div class="progress-bar progress-bar-danger level5" style="width: 20%" data-min="2500" data-max="Infinity" data-color="[255, 0, 0, 0.5]">
2500吨以上
</div>
</div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false">
生成结果
</button>
<button type="button" class="btn btn-default" aria-haspopup="true" aria-expanded="false">
清除结果
</button>
</div>
</div>
</div> <div class="panel panel-danger">
<!-- Default panel contents -->
<div class="panel-heading">户均用水对比</div>
<div class="panel-body" data-role="regionRender">
<div class="progress" data-role="renderBreaks" data-field="regionMonthAverage">
<div class="progress-bar progress-bar-success level1" style="width: 20%" data-min="0" data-max="100" data-color="[56, 168, 0, 0.5]">
100吨
</div>
<div class="progress-bar progress-bar-warning level2" style="width: 20%" data-min="100" data-max="150" data-color="[139, 209, 0, 0.5]">
150吨
</div>
<div class="progress-bar progress-bar-danger level3" style="width: 20%" data-min="150" data-max="200" data-color="[255, 255, 0, 0.5]">
200吨
</div>
<div class="progress-bar progress-bar-danger level4" style="width: 20%" data-min="200" data-max="250" data-color="[255, 128, 0, 0.5]">
250吨
</div>
<div class="progress-bar progress-bar-danger level5" style="width: 20%" data-min="250" data-max="Infinity" data-color="[255, 0, 0, 0.5]">
250吨以上
</div>
</div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false">
生成结果
</button>
<button type="button" class="btn btn-default" aria-haspopup="true" aria-expanded="false">
清除结果
</button>
</div>
</div>
</div>JS 代码如下，对应鼠标移至对应区间图例上地图相应小区高亮显示以及点击生成专题图：
代码语言：javascript复制function initRegionRenderer() {
$('[data-role=regionRender]').each(function (index, item) {
var field = $(item).data('field');
$(item).find('.progress').delegate('.progress-bar', 'mouseenter', function () {
$(this).addClass('progress-bar-striped').addClass('active');
var min = parseFloat($(this).data('min'));
var max = parseFloat($(this).data('max'));
var color = ($(this).data('color'));
var FIDs = _.map(dictFeatureLayer['小区'].getLayers()[0].graphics, function (item) {
var FID = parseKMLAttributes_region(item.attributes)['FID'];
return FID;
});
FIDs = _.filter(FIDs, function (item) {
return field == "regionMonthTotal" ? mockData1[item] > min && mockData1[item] < max : mockData2[item] > min && mockData2[item] < max
});
console.log('mouseenter');
var clause = {
'FID': FIDs.map(function (item) {
return item.toString();
})
};
var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 255, 0]), 2), new Color([255, 255, 255, 1])
).setColor(new Color(color.slice(0, -1).concat([0.8])));
highlightLayer(dictFeatureLayer['小区'], _.partial(searchFeature, _, clause, {}, parseKMLAttributes_region), highlightSymbol)
});
$(item).find('.progress').delegate('.progress-bar', 'mouseleave', function () {
$(this).removeClass('progress-bar-striped').removeClass('active');
console.log('mouseleave');
deHighlightLayer(dictFeatureLayer['小区']);
});
var breakConfigs = $(item).find('.progress .progress-bar').map(function (index, item) {
return {
'color': new Color($(item).data('color')),
'min': parseFloat($(item).data('min')),
'max': parseFloat($(item).data('max'))
};
}).toArray();
$(item).find('button.btn-primary').click(function () {
colMapFeature.add({
'name': '小区'
});
console.log('render region');
console.log(breakConfigs);
console.log(field);
classBreaksRendererLayer(dictFeatureLayer['小区'], (function (graphic) {
return randomLevel(graphic, field)
}), breakConfigs);
});
$(item).find('button.btn-default').click(function () {
deRenderLayer(dictFeatureLayer['小区']);
});
});
}这里classBreaksRendererLayer函数用于对图层进行分类间隔专题渲染，以及deRenderLayer函数用于清除专题渲染。
代码语言：javascript复制function classBreaksRendererLayer(featureLayer, rendererFunc, breakConfigs) {
var graphicsLayer = toGraphicsLayer(featureLayer);
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([110, 110, 110, 1]), 0.5333), new Color([225, 225, 225, 1])
);
var renderer = new ClassBreaksRenderer(symbol, rendererFunc);
_.each(breakConfigs, function (item, index) {
renderer.addBreak(parseFloat(item['min']), parseFloat(item['max']),
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0, 0, 0]), 0.2), new Color(item['color'])
)
);
});
graphicsLayer.setRenderer(renderer);
graphicsLayer.refresh();
}function deRenderLayer(featureLayer) {
var graphicsLayer = toGraphicsLayer(featureLayer);
var render = graphicsLayer.renderer;
render.clearBreaks();
graphicsLayer.setRenderer(render);
graphicsLayer.refresh();
}
