openLayer-动画线

最新推荐文章于 2024-06-25 21:30:00 发布
最新推荐文章于 2024-06-25 21:30:00 发布
阅读量202 收藏
点赞数 1
文章标签： 图形渲染 图像处理 vue javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhushanlin/article/details/138322840
版权
本文介绍了如何在OpenLayers中实现动画线效果，包括点击事件触发的延长线、线条逐渐显示、动态动画线以及累加点的绘制，详细探讨了前端图形渲染和图像处理技术在地图交互中的应用。
摘要由CSDN通过智能技术生成

1、点击事件延长线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入openlayers的依赖 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <script src="./utils/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、设置一个瓦片图层 */
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        /* 4、实例化地图 */
        /* new Vue({
            el
        }) */
        const map = new ol.Map({
            /* 将实例化的地图挂载到对应的DOM元素上 */
            target: "map",
            layers: [gaode],
            /* 设置地图以中心点显示/坐标显示/方法级别显示 */
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 12,
                /* 坐标 */
                projection: "EPSG:4326"
            })

        })
        let data = {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {},
                    "geometry": {
                        "type": "LineString",
                        "coordinates": [
                            [114.300608, 30.526328],
                            [114.30629, 30.526678],
                            [114.309265, 30.524697]

                        ]
                    }
                }
            ]
        }
        let features = new ol.format.GeoJSON().readFeatures(data);
        const source = new ol.source.Vector({
            features
        })
        let layer = new ol.layer.Vector({
            source,
            style: setLineStyle({})
        })
        map.addLayer(layer);

        map.on("click", evt => {
            let position = evt.coordinate;
            console.log(position)
            let target_feature = features[0].getGeometry();
            console.log(target_feature)
            target_feature.appendCoordinate(position);
        })
    </script>
</body>

</html>

2、线慢慢显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入openlayers的依赖 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <script src="./utils/index.js"></script>
    <script src="https://lib.baomitu.com/Turf.js/latest/turf.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、设置一个瓦片图层 */
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        /* 4、实例化地图 */
        /* new Vue({
            el
        }) */
        const map = new ol.Map({
            /* 将实例化的地图挂载到对应的DOM元素上 */
            target: "map",
            layers: [gaode],
            /* 设置地图以中心点显示/坐标显示/方法级别显示 */
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 12,
                /* 坐标 */
                projection: "EPSG:4326"
            })

        })
        let data = {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [114.302214, 30.532323],
                    [114.362718, 30.529691]
                ]
            }
        }
        let feature = new ol.format.GeoJSON().readFeature(data);
        const source = new ol.source.Vector({
            features: [feature]
        })
        const layer = new ol.layer.Vector({
            source,
            style: setLineStyle({
                color: "#ff2d5180",
                width: 8
            })
        })
        map.addLayer(layer);
        /* 设置另外一个图层 */
        /* 1、让线只显示1/10; */
        let distance = turf.lineDistance(data);
        let path = turf.along(data, distance / 10)
        let line_path = turf.lineString([[114.302214, 30.532323], path.geometry.coordinates])
        const feature_animate = new ol.format.GeoJSON().readFeature(line_path);
        const layer_animate = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [feature_animate]
            }),
            style: setLineStyle({
                // color: "#",
                width: 4
            })
        })
        map.addLayer(layer_animate)
        /*
        let sum = 10;
        let start = 1;
        2、每次点击事件的时,都增加1/10,直到线完全显示为止
         */
        let sum = 10;
        let start = 1;
        map.on("click", () => {
            start++;
            /* 考虑设置临界值 */
            if (start > sum) {
                return;
            }
            let along_path = turf.along(data, distance * (start / sum));
            feature_animate.getGeometry().appendCoordinate(along_path.geometry.coordinates);
        })
    </script>
</body>

</html>

3、动画线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入openlayers的依赖 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <script src="./utils/index.js"></script>
    <script src="https://lib.baomitu.com/Turf.js/latest/turf.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、设置一个瓦片图层 */
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        /* 4、实例化地图 */
        /* new Vue({
            el
        }) */
        const map = new ol.Map({
            /* 将实例化的地图挂载到对应的DOM元素上 */
            target: "map",
            layers: [gaode],
            /* 设置地图以中心点显示/坐标显示/方法级别显示 */
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 12,
                /* 坐标 */
                projection: "EPSG:4326"
            })

        })
        let data = {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [114.302214, 30.532323],
                    [114.362718, 30.529691]
                ]
            }
        }
        let feature = new ol.format.GeoJSON().readFeature(data);
        const source = new ol.source.Vector({
            features: [feature]
        })
        const layer = new ol.layer.Vector({
            source,
            style: setLineStyle({
                color: "#ff2d5180",
                width: 8
            })
        })
        map.addLayer(layer);
        /* 设置另外一个图层 */
        /* 1、让线只显示1/10; */
        let distance = turf.lineDistance(data);
        let path = turf.along(data, distance / 10)
        let line_path = turf.lineString([[114.302214, 30.532323], path.geometry.coordinates])
        const feature_animate = new ol.format.GeoJSON().readFeature(line_path);
        const layer_animate = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [feature_animate]
            }),
            style: setLineStyle({
                // color: "#",
                width: 4
            })
        })
        map.addLayer(layer_animate)
        /*
        let sum = 10;
        let start = 1;
        2、每次点击事件的时,都增加1/10,直到线完全显示为止
         */
        let sum = 100;
        let start = 1;

        function frame() {
            start++;
            /* 考虑设置临界值 */
            if (start > sum) {
                return;
            }
            let along_path = turf.along(data, distance * (start / sum));
            feature_animate.getGeometry().appendCoordinate(along_path.geometry.coordinates);
            /* 实现点坐标位置的修改 */
            setTimeout(frame, 50)

        }
        map.on("click", () => {
            frame();
        })
    </script>
</body>

</html>

4、累加点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入openlayers的依赖 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <script src="./utils/index.js"></script>
    <script src="https://lib.baomitu.com/Turf.js/latest/turf.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、设置一个瓦片图层 */
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        /* 4、实例化地图 */
        /* new Vue({
            el
        }) */
        const map = new ol.Map({
            /* 将实例化的地图挂载到对应的DOM元素上 */
            target: "map",
            layers: [gaode],
            /* 设置地图以中心点显示/坐标显示/方法级别显示 */
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 12,
                /* 坐标 */
                projection: "EPSG:4326"
            })

        })
        let data = {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [114.302214, 30.532323],
                    [114.362718, 30.529691]
                ]
            }
        }
        let marker = new ol.Feature({
            geometry: new ol.geom.Point([114.302214, 30.532323])
        })
        const marker_layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [marker]
            }),
            style: setMarkerStyle("./images/定位.png")
        })
        map.addLayer(marker_layer)
        let feature = new ol.format.GeoJSON().readFeature(data);
        const source = new ol.source.Vector({
            features: [feature]
        })
        const layer = new ol.layer.Vector({
            source,
            style: setLineStyle({
                color: "#ff2d5180",
                width: 8
            })
        })
        map.addLayer(layer);
        /* 设置另外一个图层 */
        /* 1、让线只显示1/10; */
        let distance = turf.lineDistance(data);
        let path = turf.along(data, distance / 20)
        let line_path = turf.lineString([[114.302214, 30.532323], path.geometry.coordinates])
        const feature_animate = new ol.format.GeoJSON().readFeature(line_path);
        const layer_animate = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [feature_animate]
            }),
            style: setLineStyle({
                // color: "#",
                width: 4
            })
        })
        map.addLayer(layer_animate)
        /*
        let sum = 10;
        let start = 1;
        2、每次点击事件的时,都增加1/10,直到线完全显示为止
         */
        let sum = 20;
        let start = 1;

        function frame() {
            start++;
            /* 考虑设置临界值 */
            if (start > sum) {
                start = 0;
                feature_animate.getGeometry().setCoordinates([])
                return;
            }
            let along_path = turf.along(data, distance * (start / sum));
            feature_animate.getGeometry().appendCoordinate(along_path.geometry.coordinates);
            /* 实现点坐标位置的修改 */
            marker.getGeometry().setCoordinates(along_path.geometry.coordinates)
            setTimeout(frame, 50)

        }
        map.on("click", () => {
            frame();
        })
    </script>
</body>

</html>
@仗剑走天涯
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Openlayers4中实现动态线效果
LZUGIS
10-01 8894
本文讲述如何结合canvas在Openlayers4中实现动态线的效果
openlayers 绘制动态迁徙线、曲线
q1025387665a的博客
06-23 4288
前言：本来懒得写这个博客，实在深感无聊，没啥事情做，出篇博客让大家看看。文章会尽可能简短。掉帧属录屏效果，尚未测试过性能，因为这个可以看自己调节。以下为一条贝塞尔曲线分了180段的效果描述。 颜色属于瞎编乱造，只为示例，不为效果负责。 1、先生成起点与终点的表示点。这个很重要，原因在于：openlayers 会智能的检测图层中的数据源（source）是否有需要更新的features，如果你没有设置features，或者不在视图内，是不会触发渲染、因此，也就不会触发我们需要的prerender事件。 2、监听
五十七、openlayers官网示例Marker Animation解析——在地图上添加路径动画、沿路径往返运动
最新发布
aaa_div的博客
06-25 721
moveFeature函数中，通过时间和坐标的计算，每一毫秒在地图上绘制一个不同的点，随着时间推移，点的位置不断向前，形成了点向前运动的动画效果。是一种用于在地图上高效存储和传输折线（路径）的坐标数据的编码方法。这里的动画是往返的，如果想要 它每次都从起点开始，则需要在distance大于1之后，让它重新归零。解析完之后，可以直接创建为feature，同时，创建起点和终点以及运动中的图标feature。方法通常用于在预定义的路径上获取特定距离处的坐标 ，它的返回值在0-1之间。这篇绘制了一个运动轨迹动画。
openlayers动态线
12-22
openlayers通过canvas绘制路线，动态模拟动态起点到终点的过程
OpenLayers动画效果显示路线
03-16
NULL 博文链接：https://xiaying-hefei.iteye.com/blog/430531
vue3 + openlayers---流动线条（含动画效果）
QDxin_xyz的博客
05-17 401
【代码】vue3 + openlayers---流动线条（含动画效果）
java 动态画线_Openlayers4中实现动态线效果
weixin_29798379的博客
03-02 342
(function(global,factory){typeofexports==='object'&&typeofmodule!=='undefined'?module.exports=factory():typeofdefine==='function'&&define.amd?define(factory):(g...
openlayers画轨迹
12-29
openlayers画轨迹功能，实现动态回访
vue-openlayer-master.zip
12-02
在这个名为"vue-openlayer-master.zip"的项目中，开发者结合Vue.js与OpenLayers，实现了一种在海图上进行动态效果和图形绘制的功能。 首先，让我们深入了解一下Vue.js如何与OpenLayers集成。Vue.js通过其插件系统...
openLayer-画笔（总结回顾 geojson与 ol-feature数据转换）
04-28
它基于JSON，易于理解和解析，支持点、线、面等多种几何类型。在OpenLayers中，GeoJSON数据可以被加载为Feature集合，这些Feature可以直接在地图上展示。 1. **GeoJSON到OpenLayers Feature的转换** 要将GeoJSON...
使用openlayers展示对象的移动轨迹
05-19
使用openlayers展示对象的移动轨迹
openlayers3画线功能例子
01-03
openlayers3 画线，画扇形图， 能正常运行的小例子，
openlayers轨迹移动
12-07
openlayers 已知线路，获取坐标，实时渲染坐标位置，回放轨迹功能
openLayer-canvas图形绘制
zhushanlin的博客
04-27 255
HTML5新增的一个标签，区别css地方，它是使用JavaScript来实现图形的绘制，结合webgl实现复杂的图形绘制。
openlayer-Identify 基于ol/Control的第三方插件
Amesteur的博客
05-17 823
基于Openlayer 的Control方式，仿照Arcgis desktop的Identify，包含所有动画和界面都非第三方插件包含了select组件、树状列表组件、表格组件、工具栏组件，均为没有引入第三方插件效果展示图仿照Arcgis Identify的功能，包括：1. 图层类型选择器，包括（所有图层、可见图层、最上面的图层以及图层树列表）  2. 工具栏（框选、隐藏树列表、隐藏表格、缩放至、...
vue利用openlayers实现动态轨迹
sinat_40572875的博客
11-13 3309
事件触发一个函数，这个事件本来是地图渲染结束事件，但是它的回调函数中，小车的坐标位置一直在变，那就会不停地触发地图渲染，当然最终也会触发。gis初学者可能对openlayers（后面简称ol）不熟悉，这里暂时不介绍ol了，直接上代码，先体验下感觉。这段代码有点难理解，最好自己尝试体验下，比较难理解部分我都加上了注释。线路有了，车也有了，现在就到了激动人心的开车时刻了，接下来才是本文最核心的代码！这个上面的代码已经包括了，我这里列出来是为了让你更清晰，就是。同样的，这里的代码在上面也写过了，就是。
layer.open隐藏layui-layer-title
08-19
要隐藏 layui-layer-title，您可以使用以下代码： ```javascript layer.open({ title: false, // 隐藏标题栏 // 其他参数设置 }); ``` 在使用 layer.open() 方法创建弹窗时，设置 title 参数为 false 即可隐藏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@仗剑走天涯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值