SuperMap iClient3D for WebGL之特效OD线_supermap webgl 轨迹线-优快云博客

作者：nannan

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),
								}
							});