SuperMap iClient3D for WebGL之特效OD线

作者：nannan

目录

一、实现效果

二、实现方法

2.1 绘制不同颜色曲线

2.2 绘制不同大小目标点

2.3 添加标签

---

       OD线又称为飞线图，是起点和终点的连线。它可以用于反映两点之间的某种关系，如航班线路、人口迁徙、交通流量、经济往来等。能够突出OD线信息的由以下几个要素：线的颜色和粗细、起点终点的大小。其中线的粗细一般不会单独展示，而是会和线颜色一起使用才会相辅相成。制作OD线图时至少需要突出其中一个要素。

          下面我们以SupperMap官网范例（数据为武汉人口流动数据）http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#viewportSettinghttp://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#viewportSetting

为例修改里面的OD线要素，使它更好看且可凸出信息。

一、实现效果

​

二、实现方法

2.1 绘制不同颜色曲线

   generateCurve 函数用于生成两点之间的曲线。它接受起点 startPoint 和终点 endPoint，首先计算这两点的中点，然后通过 Catmull-Rom Spline 算法生成曲线上的点，最后返回生成的曲线点数组。

• 获取目标城市的经纬度信息，并将其作为曲线的终点。
• 使用 generateCurve 函数生成起点到目标城市的曲线，并根据迁徙数据确定曲线的颜色。
• 将曲线绘制到场景中，包括曲线本身和具有尾迹效果的曲线。

• 		function generateCurve(startPoint, endPoint) {
  							let addPointCartesian = new SuperMap3D.Cartesian3();
  							SuperMap3D.Cartesian3.add(startPoint, endPoint, addPointCartesian);
  							let midPointCartesian = new SuperMap3D.Cartesian3();
  							SuperMap3D.Cartesian3.divideByScalar(addPointCartesian, 2, midPointCartesian);
  							let midPointCartographic = SuperMap3D.Cartographic.fromCartesian(midPointCartesian);
  							midPointCartographic.height = SuperMap3D.Cartesian3.distance(startPoint, endPoint) / 10;
  							let midPoint = new SuperMap3D.Cartesian3();
  							SuperMap3D.Ellipsoid.WGS84.cartographicToCartesian(midPointCartographic, midPoint);
  							let spline = new SuperMap3D.CatmullRomSpline({
  								times: [0.0, 0.5, 1.0],
  								points: [startPoint, midPoint, endPoint]
  							});
  							let curvePointsArr = [];
  							for(let i = 0, len = 300; i < len; i++) {
  								curvePointsArr.push(spline.evaluate(i / len));
  							}
  							return curvePointsArr;
  						}
  
  						function getColor(val) {
  							var color = SuperMap3D.Color.WHITE;
  							if(val > 15) {
  								color = SuperMap3D.Color.ROYALBLUE;
  							} else if(val > 1) {
  								color = SuperMap3D.Color.DEEPSKYBLUE;
  							} else if(val > 0.2) {
  								color = SuperMap3D.Color.DODGERBLUE;
  							} else if(val > 0.1) {
  								color = SuperMap3D.Color.fromCssColorString('rgb(0,   255,  113)');
  							} else if(val > 0.05) {
  								color = SuperMap3D.Color.CYAN;
  							} else if(val > 0) {
  								color = SuperMap3D.Color.fromCssColorString('rgb(0,   20,  230)');
  							}
  							return color;
  						}
  						var fromPoint = SuperMap3D.Cartesian3.fromDegrees(cityGeo[to][0], cityGeo[to][1], 100);
  						for(var key in from) {
  							let temp = cityGeo[key];
  							if(!temp) {
  								continue;
  							}
  							var curvePoints = generateCurve(
  								fromPoint,
  								SuperMap3D.Cartesian3.fromDegrees(temp[0], temp[1], 100),
  							);
  							var color = getColor(from[key]);
  							viewer.entities.add({
  								name: 'qianxi-polyline',
  								polyline: {
  									positions: curvePoints,
  									width: 1,
  									material: color
  								}
  							});
  							viewer.entities.add({
  								polyline: {
  									positions: curvePoints,
  									width: 7,
  									material: new SuperMap3D.PolylineTrailMaterialProperty({ // 尾迹线材质
  										color: color,
  										outlineColor:color,
  										outlineWidth:3,
  										trailLength: 0.2,
  										period: 5.0
  									})
  								}
  							});

2.2 绘制不同大小目标点

       根据迁徙数据中的值来确定实体点的大小。如果迁徙比例大于3，点的大小为3，否则大小为迁徙比例的值。这样可以根据迁徙数据的大小动态调整起点实体的大小。

viewer.entities.add({ // 目标点
								description: 'start-point',
								name: 'start-point_' + key,
								position: SuperMap3D.Cartesian3.fromDegrees(temp[0], temp[1], 100),
								point: {
									color: SuperMap3D.Color.CYAN,
									outlineWidth: 1,
									outlineColor: SuperMap3D.Color.DEEPSKYBLUE,
									disableDepthTestDistance: Number.POSITIVE_INFINITY, //禁用了深度测试，使得实体在场景中始终可见。
									pixelSize: migration[key] > 3 ? 3 : migration[key]
								}
							});

2.3 添加标签

       在场景中为目标点实体添加标签，显示城市名称和迁徙比例信息，并实现了随距离变化的标签大小效果。代码如下：

viewer.entities.add({
								description: 'start-point',
								name: 'start-point_' + key,
								position: SuperMap3D.Cartesian3.fromDegrees(temp[0], temp[1], 100000),
								label: {
									text: key + '\n' + from[key] + '%', //设置了标签显示的文本内容，包括城市名称和迁徙比例的百分比。
									font: '8px Microsoft YaHei', //微软雅黑字体，大小为8像素。
									fillColor: SuperMap3D.Color.fromCssColorString('rgb(220, 220, 220)'),
									//指定了标签的显示距离条件，标签将在距离相机1米至5000千米范围内显示
									distanceDisplayCondition: new SuperMap3D.DistanceDisplayCondition(1, 5000000),
									style: SuperMap3D.LabelStyle.FILL,//标签的样式为填充
									//标签的随距离缩放比例，距离相机1米时标签大小为1，距离相机5000千米时标签大小为0.8，实现了随距离变化的标签大小效果。
									scaleByDistance: new SuperMap3D.NearFarScalar(1, 1, 5000000, 0.8),
								}
							});