|  |  |  | 
|---|
|  |  |  | chooseTime: false, | 
|---|
|  |  |  | dateInfo: '', // 选择的日期 | 
|---|
|  |  |  | timeInfo: '', // 选择的时间 | 
|---|
|  |  |  | nyr: '' // 选择的年月日 | 
|---|
|  |  |  | nyr: '', // 选择的年月日 | 
|---|
|  |  |  | windAllDate: [] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | computed: { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | mounted() { | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.getParamsData() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.currentHour() | 
|---|
|  |  |  | this.$Bus.$on( | 
|---|
|  |  |  | 'alarmTableVisible', | 
|---|
|  |  |  | 
|---|
|  |  |  | // 初始化风场数据 | 
|---|
|  |  |  | // this.windData() | 
|---|
|  |  |  | // this.change(0) | 
|---|
|  |  |  | this.getParamsData() | 
|---|
|  |  |  |  | 
|---|
|  |  |  | this.windDir() | 
|---|
|  |  |  | this.newDate() | 
|---|
|  |  |  | // this.alertData(this.PageSize, this.currentPage) | 
|---|
|  |  |  | 
|---|
|  |  |  | // 请求更新风场数据 | 
|---|
|  |  |  | getParamsData() { | 
|---|
|  |  |  | clearInterval(this.timer) | 
|---|
|  |  |  | this.change(this.changeColor) | 
|---|
|  |  |  | this.timer = setInterval(() => { | 
|---|
|  |  |  | this.currentHour() | 
|---|
|  |  |  | this.times-- | 
|---|
|  |  |  | 
|---|
|  |  |  | // this.windDir() | 
|---|
|  |  |  | // console.log('请求风向标') | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | setTimeout(() => { | 
|---|
|  |  |  | this.change(this.changeColor) | 
|---|
|  |  |  | this.times = 300 | 
|---|
|  |  |  | }, 100) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, 1000) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | findLayer(layerName) { // 根据图层名称查找图层 | 
|---|
|  |  |  | if (!this.map) { | 
|---|
|  |  |  | return null | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const gisMap_layers = this.map._layers | 
|---|
|  |  |  | let layer = null | 
|---|
|  |  |  | for (const i in gisMap_layers) { | 
|---|
|  |  |  | if (gisMap_layers[i].options.id === layerName) { | 
|---|
|  |  |  | layer = gisMap_layers[i] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return layer | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 初始化地图容器 | 
|---|
|  |  |  | initMap() { | 
|---|
|  |  |  | //   console.log('这是index传到map的经纬度') | 
|---|
|  |  |  | 
|---|
|  |  |  | maxZoom: 18, | 
|---|
|  |  |  | center: [this.weiduNew, this.jingduNew], | 
|---|
|  |  |  | zoom: 14, | 
|---|
|  |  |  | zoomControl: false, // 缩放组件 | 
|---|
|  |  |  | attributionControl: false, // 去掉右下角logol | 
|---|
|  |  |  | zoomControl: true, // 缩放组件 | 
|---|
|  |  |  | trackResize: true, | 
|---|
|  |  |  | worldCopyJump: true, | 
|---|
|  |  |  | dragging: true, | 
|---|
|  |  |  | inertia: true, | 
|---|
|  |  |  | attributionControl: true, // 去掉右下角logol | 
|---|
|  |  |  | crs: L.CRS.EPSG3857 // 设置坐标类型,EPSG3857伪墨卡托投影,EPSG3395,墨卡托投影坐标 EPSG4326 WGS84 | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | // 定义图层样式 | 
|---|
|  |  |  | 
|---|
|  |  |  | // L.tileLayer( | 
|---|
|  |  |  | //   'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}' | 
|---|
|  |  |  | // ).addTo(map) | 
|---|
|  |  |  | const that = this | 
|---|
|  |  |  | this.map = map // data上需要挂载 | 
|---|
|  |  |  |  | 
|---|
|  |  |  | this.map.on('moveend', function(ev) { | 
|---|
|  |  |  | const res = that.findLayer('wmsid') | 
|---|
|  |  |  | that.map.removeLayer(res) | 
|---|
|  |  |  | that.openWindCanves() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | // this.map.on('viewreset', function() { | 
|---|
|  |  |  | //   console.log('--->viewreset 重绘内容时触发') | 
|---|
|  |  |  | // }) | 
|---|
|  |  |  | window.map = map | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 更改不同的值区间 | 
|---|
|  |  |  | change(index) { | 
|---|
|  |  |  | if (this.windState === 1) { | 
|---|
|  |  |  | this.initData() | 
|---|
|  |  |  | } else if (this.windState === 2) { | 
|---|
|  |  |  | this.windDir() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.changeColor = index | 
|---|
|  |  |  | var pr = '' | 
|---|
|  |  |  | switch (index) { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.sensorKey = pr | 
|---|
|  |  |  | // 请求设备坐标 | 
|---|
|  |  |  | // this.toggleWindState() | 
|---|
|  |  |  | if (this.windState === 1) { | 
|---|
|  |  |  | this.initData() | 
|---|
|  |  |  | } else if (this.windState === 2) { | 
|---|
|  |  |  | this.windDir() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 请求风场图接口 | 
|---|
|  |  |  | initData() { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.windData() | 
|---|
|  |  |  | this.deviceMaker() | 
|---|
|  |  |  | //   console.log('请求风场之前') | 
|---|
|  |  |  | // $.ajaxSettings.async = false | 
|---|
|  |  |  | // for (let i = 0; i < this.monitorPointIds.length; i++) { | 
|---|
|  |  |  | this.windData() | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 风场图数据 | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .then((res) => { | 
|---|
|  |  |  | this.windAllDate = res.data[0] | 
|---|
|  |  |  | this.openWindCanves() | 
|---|
|  |  |  | // console.log('新风场数据') | 
|---|
|  |  |  | // console.log(res) | 
|---|
|  |  |  | // if (res.data[0][0].data.length === 0) { | 
|---|
|  |  |  | 
|---|
|  |  |  | // data2[0].header.dy = 0.0018464922 | 
|---|
|  |  |  | // data2[1].header.dy = 0.0018464922 | 
|---|
|  |  |  | // console.log(data2, 'data2') | 
|---|
|  |  |  | var velocityLayer = L.velocityLayer({ | 
|---|
|  |  |  | displayValues: false, // 是否显示当前鼠标移动位置,风场信息 | 
|---|
|  |  |  | displayOptions: { | 
|---|
|  |  |  | // 显示信息配置 | 
|---|
|  |  |  | // velocityType: 'Global Wind', | 
|---|
|  |  |  | velocityType: 'GBR Wind', | 
|---|
|  |  |  | displayPosition: 'bottomleft', | 
|---|
|  |  |  | displayEmptyString: 'No wind data' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data: res.data[0], // 数据  格式可参照 | 
|---|
|  |  |  | // data: data2, | 
|---|
|  |  |  | // 以下为控制参数,后面为默认值 | 
|---|
|  |  |  | minVelocity: 0, // 粒子最小速度( m/s ) | 
|---|
|  |  |  | maxVelocity: 8, // 粒子最大速度( m/s ) | 
|---|
|  |  |  | velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 ) | 
|---|
|  |  |  | particleAge: 90, // 粒子在再生之前绘制的最大帧数 | 
|---|
|  |  |  | lineWidth: 1.5, // 绘制粒子的线宽 | 
|---|
|  |  |  | particleMultiplier: 1 / 300, // 粒子计数标量( 粒子密度 ) | 
|---|
|  |  |  | frameRate: 15, // 每秒所需的帧数 | 
|---|
|  |  |  | colorScale: [ | 
|---|
|  |  |  | '#A2D839', | 
|---|
|  |  |  | '#7EB530', | 
|---|
|  |  |  | '#6E9F26', | 
|---|
|  |  |  | '#4E7522', | 
|---|
|  |  |  | '#345B1B', | 
|---|
|  |  |  | '#186303', | 
|---|
|  |  |  | '#175103', | 
|---|
|  |  |  | '#053F03' | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03'] | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | velocityLayer.addTo(this.map) // 添加到图上 | 
|---|
|  |  |  | // console.log('风场数据') | 
|---|
|  |  |  | // console.log(res.data[0]) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | 
|---|
|  |  |  | console.log(err) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | openWindCanves() { | 
|---|
|  |  |  | var velocityLayer = L.velocityLayer({ | 
|---|
|  |  |  | displayValues: true, // 是否显示当前鼠标移动位置,风场信息 | 
|---|
|  |  |  | id: 'wmsid', | 
|---|
|  |  |  | displayOptions: { | 
|---|
|  |  |  | // 显示信息配置 | 
|---|
|  |  |  | // velocityType: 'Global Wind', | 
|---|
|  |  |  | velocityType: 'GBR Wind', | 
|---|
|  |  |  | displayPosition: 'bottomleft', | 
|---|
|  |  |  | displayEmptyString: 'No wind data' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data: this.windAllDate, // 数据  格式可参照 | 
|---|
|  |  |  | // data: data2, | 
|---|
|  |  |  | // 以下为控制参数,后面为默认值 | 
|---|
|  |  |  | minVelocity: 0, // 粒子最小速度( m/s ) | 
|---|
|  |  |  | maxVelocity: 8, // 粒子最大速度( m/s ) | 
|---|
|  |  |  | velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 ) | 
|---|
|  |  |  | particleAge: 90, // 粒子在再生之前绘制的最大帧数 | 
|---|
|  |  |  | lineWidth: 1.5, // 绘制粒子的线宽 | 
|---|
|  |  |  | particleMultiplier: 1 / 300, // 粒子计数标量( 粒子密度 ) | 
|---|
|  |  |  | frameRate: 15, // 每秒所需的帧数 | 
|---|
|  |  |  | colorScale: [ | 
|---|
|  |  |  | '#A2D839', | 
|---|
|  |  |  | '#7EB530', | 
|---|
|  |  |  | '#6E9F26', | 
|---|
|  |  |  | '#4E7522', | 
|---|
|  |  |  | '#345B1B', | 
|---|
|  |  |  | '#186303', | 
|---|
|  |  |  | '#175103', | 
|---|
|  |  |  | '#053F03' | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03'] | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | velocityLayer.addTo(this.map) // 添加到图上 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 将页码,及每页显示的条数以参数传递提交给后台 | 
|---|
|  |  |  | alertData(n1, n2) { | 
|---|
|  |  |  | // 这里使用axios,使用时请提前引入 | 
|---|