iClient模拟疫情变化过程

作者：lly

背景

为了方便直观的了解疫情的变化过程，我们使用iClien客户端专题图来动态展示疫情的变化。
首先我们来看一看实现效果：

一、数据制作

数据需要制作为以下格式，即每天对应一个属性字段，并填充相应的数据，例：

行政区划	D25	D26
四川	1	2
湖北	10	20

二、字段查询

查询时间字段，用于专题图赋值

var param = new SuperMap.FieldParameters({
					datasource: "NCP",
					dataset: "China_Province_pg_1_2_1"
				});
				L.supermap.fieldService(dataUrl).getFields(param, function(serviceResult) {
					var innerHTML = serviceResult.result.fieldNames.join(', ');
					for(var i = 9; i < serviceResult.result.fieldNames.length; i++) {
					    var monthCount=0;
					    var dateTemp="月";
					    var day="/";					    
					    var filed=serviceResult.result.fieldNames[i];
						time.push(filed);
					}
				});

三、制作专题图

使用客户端分段专题图来制作，首先初始化图层，并设置style

themeLayer = L.supermap.rangeThemeLayer("ThemeLayer", {
					// 开启 hover 高亮效果
					isHoverAble: false,
					opacity: 1,
					alwaysMapCRS: true
				}).addTo(map);

				themeLayer.style = new SuperMap.ThemeStyle({
					stroke: true,
					strokeColor: '#f4f4f4',
					strokeWidth: 1
				});
				// 用于单值专题图的属性字段名称
				themeLayer.themeField = time[0];
				// 风格数组，设定值对应的样式
				themeLayer.styleGroups = [{
					start: 0,
					end: 1,
					style: {
						color: style[0]
					}
				}, {
					start: 1,
					end: 99,
					style: {
						color: style[1]
					}
				}, {
					start: 99,
					end: 499,
					style: {
						color: style[2]
					}
				}, {
					start: 499,
					end: 999,
					style: {
						color: style[3]
					}
				}, {
					start: 1000,
					end: 9999,
					style: {
						color: style[4]
					}
				}, {
					start: 9999,
					end: 99999999999999999,
					style: {
						color: style[5]
					}

				}];

通过SQL查询数据服务，查询出行政区划面

var getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
					queryParameter: new SuperMap.FilterParameter({
						name: "China_Province_pg_1_2_1@NCP",
						attributeFilter: "SMID > -1"
					}),
					toIndex: 500,
					datasetNames: ["NCP:China_Province_pg_1_2_1"]
				});
				L.supermap.featureService(dataUrl)
					.getFeaturesBySQL(getFeatureBySQLParams, processComplete, SuperMap.DataFormat.ISERVER);

将查询结果加到地图，并解析相应返回值用于总数显示

searchData = serviceResult;
				var result = serviceResult.result;
				var data = result.features;
				if(result && result.features) {
					themeLayer.addFeatures(result.features);
					var count = 0;
					for(var i = 0; i < result.features.length; i++) {
						count += Number(data[i].fieldValues[9]);
					}
				}

设置div用于制作图例

	<div class="legend">
			<div class="content">
				<div class="color" style="background: rgb(244, 244, 244);"></div>
				<div class="text">0人</div>
			</div>
			<div class="content">
				<div class="color" style="background: rgb(253, 212, 158);"></div>
				<div class="text">1-99人</div>
			</div>
			<div class="content">
				<div class="color" style="background: rgb(253, 187, 132);"></div>
				<div class="text">100-499人</div>
			</div>
			<div class="content">
				<div class="color" style="background: rgb(252, 141, 89);"></div>
				<div class="text">500-999人</div>
			</div>
			<div class="content">
				<div class="color" style="background: rgb(239, 101, 72);"></div>
				<div class="text">1000-9999人</div>
			</div>
			<div class="content">
				<div class="color" style="background: rgb(215, 48, 31);"></div>
				<div class="text">10000人或以上</div>
			</div>
		</div>

css设置图例样式

	.legend {
				position: absolute;
				bottom: 10px;
				left: 20px;
				z-index: 99999;
			}
			
			.legend .content {
				height: 12px;
				margin-bottom: 6px;
			}
			
			.legend .content .color {
				width: 16px;
				height: 12px;
				margin-bottom: -5px;
			}
			
			.text {
				position: relative;
				font-size: 12px;
				color: rgba(255, 255, 255, 0.85);
				margin-left: 20px;
				line-height: 0px;
			}

四、添加时间轴

	var chart = echarts.init(document.getElementById("timeE"));
				option = {
					baseOption: {
						timeline: {
							axisType: 'category',
							autoPlay: true,
							currentIndex:0,
							playInterval: 1000,
							data: dataTimer,
							label: {
								formatter: function(s) {
									return s;
								},
								color:'#dfdfdf'
							}
						}
					}
				};
				chart.setOption(option);

监听时间轴改变事件，刷新专题图，并将对应统计值显示在div中

		chart.on('timelinechanged', function(timeLineIndex) {
              
					themeLayer.themeField = time[timeLineIndex.currentIndex];
					themeLayer.redraw();
					var result = searchData.result;
					var data = result.features;
					if(result && result.features) {
						var count = 0;
						for(var i = 0; i < result.features.length; i++) {
							count += Number(data[i].fieldValues[9 + Number(timeLineIndex.currentIndex)]);
						}
					}
					$(".value").html(count);
					$(".subTitle").html("截止" + date[timeLineIndex.currentIndex])
				});

五、结语

至此，我们已实现全部效果，底图和标签可根据自身喜好进行更换，其中标签需新建窗格将其置于顶层，例：

map.createPane('labels');
map.getPane('labels').style.zIndex = 650;
L.supermap.tiledMapLayer(tapUrl, {
					transparent: true,
					pane: "labels"
				    }).addTo(map);

数据及代码下载地址，提取码：zqrk