一个简单的小demo，就是在一个openlayers地图上面添加风场效果。
话不多说，直接进入正题。
首先我们需要安装一个插件。
插件地址
npm install ol-windy --save
然后我们需要一个数据来绘制风场，我在文件最后上传一下文件。
接下来很简单，就是下面的代码。
<template>
<div class="home">
<div id="map" ref="map"></div>
</div>
</template>
<script>
import 'ol/ol.css';
import Draw from 'ol/interaction/Draw';
import Map from 'ol/Map';
import Overlay from 'ol/Overlay';
import View from 'ol/View';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { LineString, Polygon } from 'ol/geom';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { getArea, getLength } from 'ol/sphere';
import { unByKey } from 'ol/Observable';
import { WindLayer } from 'ol-wind'
import gfs from './gfs.json'
var map = null
export default {
name: "Home",
data() {
return {
}
},
mounted() {
this.initMap()
},
methods: {
// 初始化地图
initMap() {
map = new Map({
layers: [
new TileLayer({
source: new OSM(),
}),
],
target: 'map',
view: new View({
center: [120, 35],
zoom: 5,
maxZoom: 18,
projection: 'EPSG:4326',
}),
});
this.addWindyLayer()
},
// 添加风流粒子
addWindyLayer() {
const windLayer = new WindLayer(gfs, {
foceRender: false,
windOptions: {
globalAlpha: 0.9, // 粒子透明度
maxAge: 10, // 存活最大帧数
velocityScale: 1/100, // 粒子速度
frameRate: 20, // 每50贞绘制一次
paths: 5000, // 粒子数量
colorScale: () => {
return "#00b3ef"
},
width: 3,
}
})
map.addLayer(windLayer)
},
},
};
</script>
<style scoped>
.home {
width: 100%;
height: 100%;
background-color: aliceblue;
position: relative;
}
#map {
height: 100%;
width: 100%;
}
</style>
其中 gfs 文件就是风场数据。
gfs文件下载【点这里】
然后看效果~
到此这篇关于Vue+OpenLayer为地图添加风场效果的文章就介绍到这了,更多相关Vue OpenLayer风场效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
