openlayers 飞线动画 沿线运动 飞线 迁徙图

参照openlayers 行政区划 鼠标移入 圆扩散动画 打点衍生出来的迁徙图
在这查看之前的代码https://blog.csdn.net/qq_36287830/article/details/136291021

	//设置中心点
	let center = [112.549248, 37.857014]
	// 动画放大渐变 提公共方法
    function animationFun({radius}, an) {
        //如果我们添加进去的 radius 半径大于10 我们将数据还原为0
        if (radius > 15)
            an.setCoumnData({
                radius: 0
            })
        else {
            //否则将数据++ 这里加的值越大 速度越快
            an.setCoumnData({
                radius: radius + 0.005
            })
        }
        //捕获错误
        try {
        	//获取到颜色的数组
            let color = ol.color.asArray(an.geometry.getStyle().getImage().getStroke().getColor())
			//将颜色中的透明度动态更改 这里自己改个适合的值
			//如果radius变大 则透明度变低 /10为了让这个数字变成小数
            color[3] = (11 - Math.floor(radius)) / 10
            //修改颜色
            an.geometry.getStyle().getImage().getStroke().setColor(color)
            //修改半径
            an.geometry.getStyle().getImage().setRadius(radius)
            //再更改源的style 实现动画
            an.geometry.setStyle(an.geometry.getStyle())
        } catch (e) {
            //如果出错则停止动画
            an.stop()
        }
    }
    //初始化圆圈的动画
    function donghua({geometry, animationFun, timer, key}) {
    	//使用上次代码中创建的动画类 创建一个动画
    	let an = new animation(geometry, animationFun)
    	//更改延迟执行时间
    	an.setTimer(timer)
    	//修改自定义数据 且开始动画
    	an.setCoumnData({
        	radius: 0,
    	}).start(key)
    	//这里的key为唯一key 为了方便防止 这里将key开放
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

线相关代码

	//线的图层
 	let lineLayer = new ol.layer.Vector({
        name: "line",
        zIndex: 3, //进行图层层次控制
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: "#6983d5",
                width: 2,// 设置线的宽度
                // lineDash: [5, 5]//虚线  [5, 5]表示5个像素实线和5个像素空白
            })
        })
    })

    /** 添加线
     * @param {[number.number]} start 开始位置
     * @param {[number,number]} end 结束位置
     * @return {Feature} 线元素
     * */
    function addLine(start, end) {
    	//用turf生成一个大圆的路径 然后用位置坐标生成线
        let lineString = new ol.geom.LineString(turf.greatCircle(start, end).geometry.coordinates)
        //将线生成元素
        let feature = new ol.Feature({
            geometry: lineString,
        })
        //找到线图层 并将元素添加到线图层的源中
        lineLayer.getSource().addFeatures([feature])
        return feature
    }
    //渲染 linelayer
    map.addLayer(lineLayer)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

飞机的代码

	//飞行物的图层
 	let flyLayer = new ol.layer.Vector({
        name: "fly",
        zIndex: 10, //进行图层层次控制
        source: new ol.source.Vector()
    })
    // 添加飞行图层
    map.addLayer(flyLayer)

    /** 添加图片元素
     * @param {[number.number]} start 开始位置
     * @param {[number,number]} end 结束位置
     * @return {Feature} 线元素
     * */
    function flyImg(start, url, rotation) {
    	//在start坐标生成一个要素
        let fly= new ol.Feature({
            geometry: new ol.geom.Point(start)
        })
        //修改样式为图片 
        fly.setStyle(new ol.style.Style({
            image: new ol.style.Icon({
                src: url,
                scale: 0.15, // 设置缩放比例为 0.5，表示将图片缩小一半
                rotateWithView: true,//是否跟着地图旋转而旋转 如果你的地图有旋转 那就得打开 否则开不开随意
                rotation: -rotation//旋转角度 是一个负值
            })
        }))
        //添加到flylayer图层
        flyLayer.getSource().addFeatures([fly])
        return point
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

改造geojson修改的方法 实现添加飞机、飞线、点动画的效果

//添加点和文字的方法
    let initTextAndPoint = (event) => {
        //在所有的要素中遍历
        event.target.getFeatures().map(item => {
                //获取要素属性
                let data = item.getProperties()
                //获取到各省市的中心点
                if (data.center || data.centroid) {
                    //文字
                    textLayer.getSource().addFeature(addText(data.center || data.centroid, data.name.replace(/省|特别行政区|自治区/g, '')))


                    //两个圆动画看着更舒服
                    //获取Circle画的圆 动画的圆
                    let geometry = CircleAct(data.center || data.centroid, 'hollow')
                    //获取Circle画的圆要素 动画的圆
                    let geometryOutside = CircleAct(data.center || data.centroid, 'hollow')
                    //将这个要素添加到点图层 中间那个是实心圆 
                    pointLayer.getSource().addFeatures([CircleAct(data.center || data.centroid, 'solid', 5)，geometry , geometryOutside])
				
					//开启圆的动画
					//延迟执行时间
                    let timer = Math.random() * 1000
                    //刚才创建的方法
                    donghua({geometry: geometry, animationFun: animationFun, timer: timer, key: data.adcode + timer})
                    donghua({
                        geometry: geometryOutside,
                        animationFun: animationFun,
                        timer: timer + 400,
                        key: data.adcode + timer + 400
                    })
						
					//开始点和结束点画线 center  就是上面代码写的中心点 让所有的线飞向一个位置
                    let line = addLine(data.center || data.centroid, center)
                    
                    //过滤目标点 下面开始添加飞机
                    if (data.name != '山西省') {
                        // 计算两个点之间的方向角度
                        let dx = center[0] - (data.center || data.centroid)[0];
                        let dy = center[1] - (data.center || data.centroid)[1];
                        //计算给定点坐标的反正切值
                        let rotation = Math.atan2(dy, dx);
						//生成要素 style为icon svg
                        let fly = flyImg(data.center || data.centroid, './fly.svg', rotation)
                        //获取飞线上的所有点
                        let lineCoordinates = line.getGeometry().getCoordinates()
                        new animation(fly, ({index}, an) => {
                        //下面的index/100是为了让移动速度变慢
                        //如果当前取值的小标/100等于整个数组的长度 则还原下标
                            if (index / 100 == lineCoordinates.length)
                                an.setCoumnData({
                                    index: 0
                                })
                            else {
								//更改飞机坐标为线上某个点的相应坐标
						        an.geometry.getGeometry().setCoordinates(lineCoordinates[Math.floor(index / 100)])
						        //并且让下标+1
                                an.setCoumnData({
                                    index: ++index,
                                })
                            }
                        //初始化数据
                        }).setCoumnData({
                            index: 0,
                        //设置延时并开启动画
                        }).setTimer(Math.random() * 2000).start(data.name + 'fly')
                    }
                }
            }
        )
        // 停止监听数据源更改 否则此方法一直调用
        geoLayer.getSource().un('change', initTextAndPoint)
    }
    //监听数据源修改 调用添加点和文字方法
    geoLayer.getSource().on('change', initTextAndPoint)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

基本所有的代码都在这里了 还有一部分代码在上面那个链接里 复制粘贴基本就可以运行了 文件得自己找一下 找不到可以和我要