高质量编码-小区今日实时累积用水
原创高质量编码-小区今日实时累积用水
原创
MiaoGIS
修改于 2019-05-29 10:28:36
修改于 2019-05-29 10:28:36
由wanderGIS这个大牛的兼容Arcgis JS API编写的EchartsLayer做的百度迁徙可视化启发，我们可以在地图上实现一个小区今日实时累积用水的可视化效果。
但是由于小区数量太多，全部显示地图上过于混乱，所以我们改进，像雷达扫描一样，每次 只显示固定数量的小区。
控制开启迁徙图的 HTML如下：
<div class="panel panel-info">
<!-- Default panel contents -->
<div class="panel-heading">小区实时用水</div>
<div class="panel-body" data-role="regionEcharts">
<!-- 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代码
window.regionOverlay = null;
window.regionEchartsInterval = null;
$('[data-role="regionEcharts"]').find('button.btn-primary').click(function () {
if (!!regionEchartsInterval) {
clearInterval(regionEchartsInterval);
}
initRegionEchartsOnce();
regionOverlay.getEchartsContainer().hidden=false;
regionEchartsInterval = setInterval(refreshRegionEcharts, 3000);
});
$('[data-role="regionEcharts"]').find('button.btn-default').click(function () {
clearInterval(regionEchartsInterval);
regionOverlay.getECharts().clear();
regionOverlay.getEchartsContainer().hidden=true;
});一般上echarts图表只需要初始化一次，后面根据数据定时刷新数据就可以了。
初始化echartsLayer代码，这里需要根据小区面得到小区中心点的坐标。
function initRegionEcharts() {
var regionLayer = toGraphicsLayer(dictFeatureLayer['小区']);
window.dictRegion = _.object(_.map(regionLayer.graphics, function (item) {
var attributes = parseKMLAttributes_region(item.attributes);
return [attributes['FID'], attributes['name']]
}));
dictRegion[-1] = "小区用水量";
window.geoCoords = _.object(_.map(regionLayer.graphics, function (item) {
var attributes = parseKMLAttributes_region(item.attributes);
var point = item.geometry.getCentroid();
return [attributes['FID'], [point.getLongitude(), point.getLatitude()]]
}));
geoCoords[-1] = [114.31240081786972, 34.83846342495124];
regionOverlay = new EchartsLayer(map, echarts226, regionLayer.spatialReference);
var chartsContainer = regionOverlay.getEchartsContainer();
var regionChart = regionOverlay.initECharts(chartsContainer);
window.onresize = regionChart.onresize;
}
window.initRegionEchartsOnce = _.once(initRegionEcharts);刷新echartsLayer迁徙图，这里模拟各小区今日实时累积用水，实际生产中需要利用api获取真实数据。而且每次随机采样10个小区刷新echarts，实际生产中需要根据特定模式轮换，保证一定周期内所有小区的数据都可以利用迁徙图可视化到地图上。
function refreshRegionEcharts() {
var data = _.map(_.sample(_.keys(geoCoords), 10), function (item) {
return {
'name': item,
'value': _.random(10, 100)
};
});
regionOption.series[0].geoCoord = geoCoords;
regionOption.series[0].markLine.data = _.map(data, function (item) {
return [{
'name': '-1'
}, item]
});
regionOption.series[0].markPoint.data = data;
regionOverlay.setOption(regionOption);
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读