标签:map vue openlayer gfs 风场 ol new import
vue openlayer 添加风场效果
一个简单的小demo,就是在一个openlayers地图上面添加风场效果。
话不多说,直接进入正题。
首先我们需要安装一个插件。
插件地址:https://www.npmjs.com/package/ol-wind
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文件下载【点这里】
然后看效果~
标签:map,vue,openlayer,gfs,风场,ol,new,import 来源: https://www.cnblogs.com/wjw1014/p/16185601.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。