基础开发

一.流动线

效果展示

基础原理

通过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.9globalAlpha: 0.9,//粒子路径宽度，默认1, 当为回调函数时，参数function(m:对应点风速值) => numberlineWidth: 3, //粒子颜色配置  当为回调函数时，参数function(m:对应点风速值) => stringcolorScale: () => {  return "#00b3ef"},velocityScale: 1 / 100,  // 粒子速度 对于粒子路径步长的乘积基数maxAge: 10,  // 粒子路径能够生成的最大帧数paths: 800, //生成的粒子路径数量frameRate: 20,  //帧率（ms）},//数据配置项 todofieldOptions: {}});this.map.addLayer(windLayer);}

获取gfs.json

备注

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

源码

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

npm i
npm run serve

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

【WebGIS】Openlayers流动线与风场效果相关推荐

vue openlayer 添加风场效果
vue openlayer 添加风场效果一个简单的小demo,就是在一个openlayers地图上面添加风场效果. 话不多说,直接进入正题. 首先我们需要安装一个插件. 插件地址:https://w ...
leaflet实现动态地图风场效果
leaflet风场插件首先,这里需要用到一款leaflet插件,插件来自github,插件地址:https://github.com/danwild/leaflet-velocity(感谢作者开源贡 ...
威纶通触摸屏中通过流动块实现水流效果的具体方法演示
威纶通触摸屏中通过流动块实现水流效果的具体方法演示上次和大家分享了通过移动图形元件实现动画效果的具体方法,本次和大家分享通过easy builder pro自带的流动块实现水流效果的具体方法. 如下 ...
cesium 流动线发光线（道路线）
cesium 流动线发光线以下为源码,直接复制粘贴就好第一步创建 polyline.js 文件 import './PolylineCityLinkMaterialProperty.js' ex ...
cesium 流动线（尾迹线）
cesium 流动线(尾迹线)以下为源码直接复制可用起步 import "./PolylineWakeLineMaterialProperty"; viewer.entities ...
线上线下效果一致性杂谈
作者:杨辉之,新浪微博推荐广告算法工程师,个人知乎专栏(推荐机器学习模型&架构随笔)欢迎交流讨论前言在实际工作(炼丹)过程中,总会遇到线下指标相对base有提升,但一到线上就发现收益丢了, ...
cesium 生成抛物线流动线
效果图代码思路,根据起点终点坐标以及需要设置的抛物线高度生成抛物线坐标串,然后根据坐标串生成cesium实体线,并修改材质为流动线 viewer.entities.removeById('pwxli ...
【Threejs】轮廓线、边框线、选中效果实现的N种方法以及性能评估（目前7种）
[Threejs]轮廓线.边框线.选中效果实现的N种方法以及性能评估(目前7种) 对于模型较小,面数较少,机器性能很好的情况下,用哪种方法都可以. 但是对于压缩后glb还有100m.200m,几百万面 ...
用CAShapeLayer写股市K线图动画效果
用CAShapeLayer写股市K线图动画效果说明入市有风险,炒股需谨慎.(因项目需求,本人提供了写这种效果的源码) 效果源码 // // ViewController.m // Path // ...

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

目录

基础开发

一.流动线

二.风场

源码

【WebGIS】Openlayers流动线与风场效果相关推荐

最新文章

热门文章