iClient for OpenLayer结合Mapv制作支援迁移路线

作者：yangjl

前言

当发生未知的灾害时，国家迅速反应，做出相应对策并调动国家各个地区医疗资源去支援灾害地区，正是有了这份国家的后援与保证，才有我们人民生命与安全。言语往往不能表达心中更加深沉的感情，只能利用所学专业，用可视化的方式来展示国家的伟大以及医护人员一个个逆行的路线。

数据准备

（1）全国各省及湖北省各市geojson数据，来源http://datav.aliyun.com/tools/atlas；
（2）中国底图rest服务地址
https://iserver.supermap.io/iserver/services/map-china400/rest/maps/ChinaDark；
（3）全国各省对口支援城市，数据来源
https://baijiahao.baidu.com/s?id=1659102591540247360&wfr=spider&for=pc；
湖北省区域的分段专题图可以利用本次使用的mapv可视化框架进行制作或者是利用桌面进行制作，下面我简单描述下在桌面如何制作。首先导入geojson数据为面数据设置程度字段，然后制作一幅分段专题图，随后发布地图服务，这一过程较为简单，就不赘述。本次直接利用geojson数据利用mapv可视化框架进行专题图的制作

基于iClient for Openlayer +Mapv 实现可视化效果

为代码简洁实现利用CDN在线引入iClient for Openlayer以及mapv与jQuery文件，进行单网页的开发。核心步骤如下

获取geojson数据，同时定义地图对象并添加底图。
2. 向mapv对象注册geojson湖北省市级区域数据集，以及注册进行支援地区与接受支援地区的数据集对象，为之后的数据渲染做数据铺垫

var qianxi = new mapv.DataSet([{from: '四川',count: 354551,to: '武汉市',},。。。。//未全部列举]);var dataSet1 = mapv.geojson.getDataSet(geojsontwo);
var dataSet2 = new mapv.DataSet(dataSet1.get());

湖北省市专题图的制作，分为专题图制作，以及省内市级标注的定义并展示代码如下

 var options = {gradient: {0: 'yellow',1: 'red'},globalAlpha: 1,draw: 'intensity'};map.addLayer(new ol.layer.Image({source: new ol.source.Mapv({map: map, dataSet: dataSet2, mapvOptions: options})}));//内部字体对应湖北的各个市var test_neibu = [];for(let i=0;i<geojsontwo.features.length;i++){          test_neibu.push({geometry: {type: 'Point',coordinates: JSON.parse(geojsontwo.features[i].properties.centroid),},text: geojsontwo.features[i].properties.name})};    var dataSet_neibu = new mapv.DataSet(test_neibu);var textOptions = {draw: 'text',font: '9px Arial',fillStyle: 'blue',shadowColor: 'white',shadowBlue: 20,zIndex: 11,shadowBlur: 10};map.addLayer(new ol.layer.Image({source: new ol.source.Mapv({map: map, dataSet: dataSet_neibu, mapvOptions: textOptions})}));

根据支援地区数据集迁移线，动画，以及外部支援地区标注的定义

var lineData = [];var textData = [];var timeData = [];var citys = {};for (var i = 0; i < qianxiData.length; i++) {var fromCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].from);var toCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].to);if (!fromCenter || !toCenter) {continue;}citys[qianxiData[i].from] = qianxiData[i].count;citys[qianxiData[i].to] = 100;textData.push({geometry: {type: 'Point',coordinates: [fromCenter.lng, fromCenter.lat]},text: qianxiData[i].from});var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);for (j = 0; j < curve.length; j++) {timeData.push({geometry: {type: 'Point',coordinates: curve[j]},count: 1,time: j});}lineData.push({geometry: {type: 'LineString',coordinates: curve},count: 30 * Math.random()});};var dataSet_textData = new mapv.DataSet(textData);var lineDataSet = new mapv.DataSet(lineData);var timeDataSet = new mapv.DataSet(timeData);

最后将外部标注，动画，行进路线设置样式并添加到地图中

  var textOptions = {draw: 'text',font: '15px Arial',fillStyle: 'red',shadowColor: 'white',shadowBlue: 20,zIndex: 11,shadowBlur: 2};map.addLayer(new ol.layer.Image({source: new ol.source.Mapv({map: map, dataSet: dataSet_textData, mapvOptions: textOptions})}));var timeOptions = {fillStyle: 'rgba(255, 250, 250, 0.5)',zIndex: 200,size: 2.5,animation: {type: 'time',stepsRange: {start: 0,end: 50},trails: 10,duration: 2,},draw: 'simple'};map.addLayer(new ol.layer.Image({source: new ol.source.Mapv({map: map, dataSet: timeDataSet, mapvOptions: timeOptions})}));var lineOptions = {strokeStyle: 'rgba(255, 250, 50, 0.8)',shadowColor: 'rgba(255, 250, 50, 1)',shadowBlur: 20,lineWidth: 2,zIndex: 100,draw: 'simple'};map.addLayer(new ol.layer.Image({source: new ol.source.Mapv({map: map, dataSet: lineDataSet, mapvOptions: lineOptions})}));

最后来看下展示效果