【WebGIS】Openlayers流动线与风场效果

基础开发

一.流动线

效果展示

基础原理

通过openlayers API，设置线段样式 ol/style/Stroke下的 lineDash 和 lineDashOffset 属性。lineDash虚线模式，赋值数值数组（如：[20, 30]），对应虚实线长度；lineDashOffset 虚线偏移值，通过setInterval定时调用函数，动态赋值lineDashOffset。

核心代码

import Vector from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import GeoJSON from 'ol/format/GeoJSON';
import {
    
     Style, Circle, Fill, Stroke, Text } from "ol/style";

  addMovingLine() {
    
    
        const geojsonObject = {
    
    
            "type": "FeatureCollection",
            "features": [
                {
    
    
                    "type": "Feature",
                    "properties": {
    
    },
                    "geometry": {
    
    
                        "coordinates": [
                            [
                                120.59608927696371,
                                31.06202073831048
                            ],
                            [
                                120.63149446427894,
                                31.07331888747879
                            ],
                            [
                                120.68147825813776,
                                31.07510268306622
                            ],
                            [
                                120.77519787161987,
                                31.08818282802015
                            ],
                            [
                                120.812685717014,
                                31.127412459737243
                            ],
                            [
                                120.84114871073785,
                                31.114932062363565
                            ]
                        ],
                        "type": "LineString"
                    }
                }
            ]
        }

        const source = new Vector({
    
    
            features: new GeoJSON().readFeatures(geojsonObject)
        });

        let style = [
            //实线
            new Style({
    
    
                stroke: new Stroke({
    
    
                    color: "rgba(30,144,255, 1)",
                    width: 3,
                    lineDash: [0]
                }),
                text: new Text({
    
    
                    text: '流动效果',
                    fill: new Fill({
    
    
                        color: '#000',
                    }),
                    font: "18px Arial",
                    offsetY: 20,
                    placement: "line"
                }),
            }),
            //虚线
            new Style({
    
    
                stroke: new Stroke({
    
    
                    color: [255, 250, 250, 1],
                    width: 3,
                    lineDash: [20, 27], //一组线段和间距交互的数组，可以控制虚线的长度
                    lineDashOffset: 0
                })
            })
        ];

        const vectorlayer = new VectorLayer({
    
    
            source,
            style
        })
        this.map.addLayer(vectorlayer);

        //定时赋值
        setInterval(() => {
    
    
            let lineDashOffset = vectorlayer.getStyle()[1].getStroke().getLineDashOffset();
            vectorlayer.setStyle(
                [
                    vectorlayer.getStyle()[0],
                    //虚线
                    new Style({
    
    
                        stroke: new Stroke({
    
    
                            color: [204, 204, 255, 1],
                            width: 3,
                            lineDash: [10, 25],
                            lineDashOffset: lineDashOffset == 100 ? 0 : lineDashOffset + 2
                        })
                    })]
            )
        }, 50)
    }

参考
文章
官网文档

二.风场

效果展示

基础步骤

使用风场插件wind-layer 结合 openlayers。
npm i ol-wind -S

wind-layer-git

点击查看openlayers6使用方式

★★★查看wind-layer文档★★★

核心代码

//windyjs
import {
    
     WindLayer } from "ol-wind";
import gfs from "@/assets/data/gfs.json"
    addWindy() {
    
    
        const windLayer = new WindLayer(gfs, {
    
    
            //在鼠标交互时始终显示粒子
            forceRender: true,

            //风场参数
            windOptions: {
    
    
            	//全局透明度，主要影响粒子路径拖尾效果 默认0.9
                globalAlpha: 0.9,
                //粒子路径宽度，默认1, 当为回调函数时，参数function(m:对应点风速值) => number
                lineWidth: 3, 
                //粒子颜色配置  当为回调函数时，参数function(m:对应点风速值) => string
                colorScale: () => {
    
      
                    return "#00b3ef"
                },
                velocityScale: 1 / 100,  // 粒子速度 对于粒子路径步长的乘积基数
                maxAge: 10,  // 粒子路径能够生成的最大帧数
                paths: 800, //生成的粒子路径数量
                frameRate: 20,  //帧率（ms）
            },

            //数据配置项 todo
            fieldOptions: {
    
    

            }
        });
        this.map.addLayer(windLayer);
    }

获取gfs.json

备注

风场插件wind-layer风场效果较美观，大大方便了实现风场的效果。对我而言，我的初始想法是想使用风场效果展示河道水流向效果，但该插件加载的json文件数据格式我还没弄懂，如何直接使用河道线段的geojson数据展示风场效果还存在着数据转化的问题，故暂使用流动线效果。若有同学理解其gfs.json望告知。

源码

链接地址
下载代码后，请修改createBaseLayers方法中使用的天地图Token或更换其他图层。

npm i
npm run serve

安装依赖，便可成功启动。