Vue+OpenLayer为地图添加风场效果
作者：秦浩铖
这篇文章主要为大家展示了一个demo，即利用Vue和OpenLayer在地图上面添加风场效果，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
一个简单的小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风场效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！