From b81605dce7e305b2483b9f8618f08c0965832fef Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 12 Oct 2023 17:10:52 +0800 Subject: [PATCH] fix:风场粒子修改 --- src/components/Wind/Map.vue | 683 ++++++++++++++++---------------------------------------- 1 files changed, 203 insertions(+), 480 deletions(-) diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue index 1f75648..61678cc 100644 --- a/src/components/Wind/Map.vue +++ b/src/components/Wind/Map.vue @@ -463,7 +463,8 @@ chooseTime: false, dateInfo: '', // ��������������� timeInfo: '', // ��������������� - nyr: '' // ������������������ + nyr: '', // ������������������ + windJsonData: [] } }, computed: { @@ -476,6 +477,13 @@ }, regionCode(newCode, oldCode) { this.timerKey = newCode // ������������code��������������������������� + }, + windJsonData(newCode, oldCode) { + this.$nextTick(() => { + console.log('111') + + this.canvasWind(newCode) + }) } }, mounted() { @@ -497,11 +505,8 @@ const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // ��������������������������������� this.jingduNew = newLL[1] this.weiduNew = newLL[0] - // ��������������������� - // this.windData() - // this.change(0) - this.getParamsData() - this.windDir() + this.getParamsData(false) + // this.windDir() this.newDate() // this.alertData(this.PageSize, this.currentPage) }, @@ -618,23 +623,19 @@ this.chooseTime = true // ��������������� if ((i + 1) / 24 < 1) { this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00' - console.log(111, this.nyr) } else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) { this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00' - console.log(222, this.nyr) } else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) { this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00' - console.log(333, this.nyr) } else { this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00' - console.log(444, this.nyr) } break } } } that.times = 1 - that.getParamsData() + that.getParamsData(true) } // timeUl������������������ timeUl.onclick = (e) => { @@ -655,16 +656,12 @@ this.chooseTime = true // ��������������� if (i / 24 < 1) { this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00' - console.log(111, this.nyr) } else if (i / 24 < 2 && i / 24 >= 1) { this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00' - console.log(222, this.nyr) } else if (i / 24 < 3 && i / 24 >= 2) { this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00' - console.log(333, this.nyr) } else { this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00' - console.log(444, this.nyr) } break } @@ -679,7 +676,7 @@ // console.log('���������������������', greenInfo, 'index') } that.times = 1 - that.getParamsData() + that.getParamsData(true) } // ������������������������ for (let i = 0; i < lis.length; i++) { @@ -757,183 +754,6 @@ mouseLeave() { this.map.scrollWheelZoom.enable() }, - // initWebpack() { - // // ������������ - // var param = this.accountId + '&' + this.orgId + '&' + this.regionCode - // // ������URL - // var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param - // socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws') - // this.ws = new WebSocket(socketUrl) - // this.ws.onopen = this.onopen - // this.ws.onmessage = this.onmessage - // this.ws.onclose = this.onclose - // this.ws.onerror = this.onerror - // }, - // reconnect() { // ������������ - // var that = this - // if (that.lockReconnect) { - // return - // } - // that.lockReconnect = true - // // ������������������������������������������������������������ - // that.timeoutnum && clearTimeout(that.timeoutnum) - // that.timeoutnum = setTimeout(function() { - // // ��������� - // that.initWebpack() - // that.lockReconnect = false - // }, 5000) - // }, - // reset() { // ������������ - // var that = this - // // ������������ - // clearTimeout(that.timeoutObj) - // clearTimeout(that.serverTimeoutObj) - // // ������������ - // that.start() - // }, - // start() { // ������������ - // // console.log('������������') - // var self = this - // self.timeoutObj && clearTimeout(self.timeoutObj) - // self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj) - // self.timeoutObj = setTimeout(function() { - // // ������������������������������������������������������������������������ - // if (self.ws.readyState === 1) { // ������������������ - // self.ws.send('heartCheck') - // } else { // ������������ - // self.reconnect() - // } - // self.serverTimeoutObj = setTimeout(function() { - // // ������������ - // self.ws.close() - // }, self.timeout) - // }, self.timeout) - // }, - // onopen() { - // // console.log('������������') - // // ������������ - // this.start() - // }, - // onmessage(msg) { - // var that = this - // if (JSON.parse(msg.data).������) { - // that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '') - // } else { - // that.wsData1 = msg.data - // if (that.windState === 2) { - // for (let i = 0; i < that.keyData.length; i++) { - // // ��������������� - // // ���������(������mac������)��������������������� - // if (that.coordinates[i] === JSON.parse(that.wsData1).mac) { - // var blueIcon1 = L.icon({ // ������������������ - // iconUrl: require('@/assets/images/icoWind03.png'), - // iconSize: [30, 30], - // iconAnchor: [15, 25], - // className: 'iconWind' - // }) - // // L.marker������������������������������ - // that.marker = L.marker([that.lats[i], that.lngs[i]], { - // icon: blueIcon1, - // rotationAngle: Number(JSON.parse(that.wsData1).������) - // }) - // if (i === 0) { - // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker }) - // that.map.addLayer(that.marker) - // } else { - // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker }) - // for (let j = 0; j < that.markerObject.length; j++) { - // if (that.coordinates[0] === that.markerObject[j].mac1) { - // that.map.removeLayer(that.markerObject[j].marker) - // that.map.addLayer(that.marker) - // } else if (that.coordinates[i] === that.markerObject[j].mac1) { - // that.map.removeLayer(that.markerObject[j].marker) - // that.map.addLayer(that.marker) - // } - // } - // } - // } - // } - // } - // } - // // ������������������������������������ - // this.reset() - // }, - // onclose(e) { - // // console.log('������������') - // // console.log('websocket ������: ' + e.code + ' ' + e.reason + ' ' + e.wasClean) - // // ������ - // this.reconnect() - // }, - // onerror(e) { - // console.log('������������') - // // ������ - // this.reconnect() - // }, - // ws������ - // wsStart() { - // var that = this - // // ������������ - // var param = this.accountId + '&' + this.orgId + '&' + this.regionCode - // // ������URL - // var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param - // // ������http���WS - // // console.log(socketUrl) - // socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws') - // this.ws = new WebSocket(socketUrl) - // // if (this.ws) { - // // this.ws.close() - // // console.log('ws������������') - // // } - // // this.ws = new WebSocket(socketUrl) - // // console.log('ws������������') - - // this.ws.onopen = function() { - // // console.log('websocket������������') - // } - // ������������������ - // this.ws.onmessage = function(msg) { - // if (JSON.parse(msg.data).������) { - // that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '') - // // console.log(that.wsData2) - // } else { - // that.wsData1 = msg.data - // // console.log(that.wsData1) - // if (that.windState === 2) { - // for (let i = 0; i < that.keyData.length; i++) { - // // ��������������� - // // ���������(������mac������)��������������������� - // if (that.coordinates[i] === JSON.parse(that.wsData1).mac) { - // var blueIcon1 = L.icon({ - // iconUrl: require('@/assets/images/icoWind03.png'), - // iconSize: [30, 30], - // iconAnchor: [15, 25], - // className: 'iconWind' - // }) - // that.marker = L.marker([that.lats[i], that.lngs[i]], { - // icon: blueIcon1, - // rotationAngle: Number(JSON.parse(that.wsData1).������) - // }) - // if (i === 0) { - // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker }) - // that.map.addLayer(that.marker) - // } else { - // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker }) - // for (let j = 0; j < that.markerObject.length; j++) { - // if (that.coordinates[0] === that.markerObject[j].mac1) { - // that.map.removeLayer(that.markerObject[j].marker) - // that.map.addLayer(that.marker) - // } else if (that.coordinates[i] === that.markerObject[j].mac1) { - // that.map.removeLayer(that.markerObject[j].marker) - // that.map.addLayer(that.marker) - // } - // } - // } - // } - // } - // } - // } - // } - // }, // ��������������������������������� bd09togcj02(bd_lon, bd_lat) { var x_pi = (3.14159265358979324 * 3000.0) / 180.0 @@ -945,56 +765,8 @@ var gg_lat = z * Math.sin(theta) return [gg_lat, gg_lng] }, - // /** - // * GCJ02 ��������� WGS84 - // * @param lng - // * @param lat - // * @returns {*[]} - // */ - // gcj02towgs84(lng, lat) { - // if (this.out_of_china(lng, lat)) { - // return [lat,lng] - // } else { - // var dlat = this.transformlat(lng - 105.0, lat - 35.0); - // var dlng = this.transformlng(lng - 105.0, lat - 35.0); - // var radlat = lat / 180.0 * PI; - // var magic = Math.sin(radlat); - // magic = 1 - ee * magic * magic; - // var sqrtmagic = Math.sqrt(magic); - // dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); - // dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); - // var mglat = lat + dlat; - // var mglng = lng + dlng; - // return [ lat * 2 - mglat,lng * 2 - mglng] - // } - // }, - // - // transformlat(lng, lat) { - // var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)); - // ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; - // ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0; - // ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0; - // return ret - // }, - // transformlng(lng, lat) { - // var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); - // ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; - // ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0; - // ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0; - // return ret - // }, - // /** - // * ��������������������������������������������������� - // * @param lng - // * @param lat - // * @returns {boolean} - // */ - // out_of_china(lng, lat) { - // return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false); - // }, // ������������������,��������� deviceMaker() { - // ������������������ if (this.map) { this.map.eachLayer(function(layer) { // ��������������������������� @@ -1007,7 +779,6 @@ } }) } - const that = this this.$request({ url: '/historyFiveMinutely/queryDeviceAndData', method: 'get', @@ -1021,19 +792,17 @@ }).then((data) => { // console.log('���������������������') console.log(data, 'tata') - that.loading = false this.markDeviceSite(data) }) }, // ��������������� markDeviceSite(data) { - // data.data.devices.latitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[0] - // data.data.devices.longitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[1] var keyData = data.data.devices this.keyData = data.data.devices // ��������������������� - this.stateControlStation() - var group = L.layerGroup().addTo(this.map) + // this.stateControlStation() + var groupIcon = L.layerGroup().addTo(this.map) + var groupText = L.layerGroup().addTo(this.map) this.keys = [] for (let i = 0; i < keyData.length; i++) { if (keyData[i].a34002) { @@ -1055,12 +824,6 @@ this.keys.push(JSON.parse('null')) // } } - // console.log(this.keys) - // const newL = this.bd09togcj02(keyData[i].longitude, keyData[i].latitude) - // var lat = newL[0] - // this.lats[i] = newL[0] - // var lng = newL[1] - // this.lngs[i] = newL[1] var lat = keyData[i].latitude this.lats[i] = keyData[i].latitude var lng = keyData[i].longitude @@ -1344,10 +1107,12 @@ iconAnchor: [30, 48], className: 'my-device' }) + // ��������������������� - L.marker([lat, lng], { + const iconMarker = L.marker([lat, lng], { icon: blueIcon - }).addTo(group) + }) + groupIcon.addLayer(iconMarker) // console.log(JSON.parse(this.keys[i])) var myIcon = L.divIcon({ html: this.keys[i], @@ -1355,129 +1120,64 @@ iconSize: [60, 60], iconAnchor: [40, 40] }) - var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group) + + const TexteMarker = L.marker([lat, lng], { icon: myIcon }) + groupText.addLayer(TexteMarker) + const _this = this // ������������������������������������mouseover��������������� - var _this = this - marker.on('mouseover', function(e) { + TexteMarker.on('click', function(e) { + const MarkerTarget = e.target + _this.getMarkerInfor(keyData[i], MarkerTarget) this.noneData = false - // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac, chooseTime: this.chooseTime, time: this.nyr }, (res) => { - // var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '') - // // console.log(data) - // this.bindPopup(data).openPopup() - // }) - _this - .$request({ - url: '/historyFiveMinutely/queryPopDataByMac', - method: 'get', - params: { - mac: keyData[i].mac, - chooseTime: _this.chooseTime, - time: _this.nyr - } - }) - .then((res) => { - if (res.message == '���������������������') { - var datafalse = '���������������������' - this.bindPopup(datafalse).openPopup() - return - } - for (const key in res.data) { - var tempDecimal = res.data[key] - .replace(/[^\d.]/g, '') - .split('.')[1] - if (key !== '������' && key !== '������') { - if (Number(tempDecimal) === 0) { - res.data[key] = - parseInt(res.data[key]) + res.data[key].split(' ')[1] - } else { - res.data[key] = - Number(res.data[key].split(' ')[0]).toFixed(2) + - res.data[key].split(' ')[1] - } - // var num = res.data[key].split(' ')[0] - // res.data[key] = (num - 0).toFixed(3) - } - } - var data = JSON.stringify(res.data) - .replace(/,/g, `<br>`) - .replace(/{|}|"/g, '') - this.bindPopup(data).openPopup() - }) - .catch((err) => { - console.log(err) - }) }) // ������������������������������������ - marker.on('mouseout', function(e) { - this.noneData = false - this.bindPopup().closePopup() - }) + // TexteMarker.on('mouseout', function(e) { + // this.noneData = false + // this.bindPopup().closePopup() + // }) } }, - // ������������������������������������ - // moveInAndOut() { - // - // }, - // ������������������ - stateControlStation() { - // this.$axios.get('monitorPoint/queryStateControlStation', { + getMarkerInfor(data, marker) { this.$request({ - url: '/govMonitorPoint/queryStateControlStation', + url: '/historyFiveMinutely/queryPopDataByMac', method: 'get', params: { - regionCode: 130900, - sensorCode: 'a34002' + mac: data.mac, + chooseTime: this.chooseTime, + time: this.nyr } }) .then((res) => { - // console.log('���������������') - // console.log(res) - var gkData = res.data - var group = L.layerGroup().addTo(this.map) - for (let i = 0; i < gkData.length; i++) { - var glat = gkData[i].latitude - var glng = gkData[i].longitude - var gIcon = L.icon({ - iconUrl: require('@/assets/icon/gk.png'), - // iconUrl:require('@/assets/images/tl_PM10.png'), - iconSize: [55, 55], - iconAnchor: [13, 21], - className: 'my-device' - }) - // ��������������������� - L.marker([glat, glng], { - icon: gIcon - }).addTo(group) - var myIcon = L.divIcon({ - html: gkData[i].data, - className: 'my-div-icon-g', - iconSize: 30 - }) - L.marker([glat, glng], { - icon: myIcon - }).addTo(group) + if (res.message === '���������������������') { + var datafalse = '���������������������' + this.bindPopup(datafalse).openPopup() + return } + for (const key in res.data) { + var tempDecimal = res.data[key] + .replace(/[^\d.]/g, '') + .split('.')[1] + if (key !== '������' && key !== '������') { + if (Number(tempDecimal) === 0) { + res.data[key] = + parseInt(res.data[key]) + res.data[key].split(' ')[1] + } else { + res.data[key] = + Number(res.data[key].split(' ')[0]).toFixed(2) + + res.data[key].split(' ')[1] + } + } + } + var data = JSON.stringify(res.data) + .replace(/,/g, `<br>`) + .replace(/{|}|"/g, '') + console.log(data) + marker.bindPopup(data).openPopup() }) .catch((err) => { console.log(err) }) - }, - // ������������������������ - toggleWindState() { - if (this.ws) { - this.ws.close() - } - if (this.windState === 2) { - this.windState = 1 - this.windStateText = '���������' - this.initData() - // console.log(this.windState) - } else if (this.windState === 1) { - this.windState = 2 - this.windStateText = '���������' - this.windDir() - // console.log(this.windState) - } + return data }, // ��������������� windDir() { @@ -1499,68 +1199,27 @@ } // ��������������������������� this.deviceMaker() - // ������ws������ - // this.wsStart() - // this.initWebpack() - // console.log('������ws���������������������') - // console.log(this.accountId, this.orgId, this.regionCode) - // this.timer2 = setInterval(() => { - // if (this.ws) { - // this.ws.close() - // console.log('ws������������') - // } - // // ������ws������ - // this.wsStart() - // console.log('ws������������') - // }, 60000) }, // ���������������������regionCode���������������api������ getRegionApiRequest() { - // console.log(this.$store.state.regionCode) - // this.ws.close() - // console.log('ws������') - // ������������������������ - this.getParamsData() + this.getParamsData(true) setTimeout(() => { $.getJSON( 'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea', { monitorPointId: this.$store.state.monitorPointId }, (data) => { - // ������������������ - // console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx') - // console.log(data) - // this.map.eachLayer(function(layer) { - // // ��������������������������� - // if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') { - // layer.remove() - // } - // }) this.map.setView([data[2], data[1]], 12) // console.log('������������') } ) }, 1000) - // if (this.windState === 1) { - // console.log('getRegionApiRequest') - // this.initData() - // console.log('���������������') - // } else if (this.windState === 2) { - // this.windDir() - // console.log('���������������') - // } - // ������������������ - // this.deviceMaker() - // this.getParamsData() }, // ��������������������������������������� jumpMap(LngLat) { - // console.log('���������������������') - // console.log(this.jumpData) - // console.log(LngLat) this.map.setView(LngLat, 18) }, // ������������������������ - getParamsData() { + getParamsData(isFirst = true) { clearInterval(this.timer) this.timer = setInterval(() => { this.currentHour() @@ -1580,33 +1239,41 @@ this.chooseTimeInfo = false // console.log('else') } - // console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ') - // clearInterval(this.timer) - // if (this.windState === 1) { - // this.ws.close() - // this.initData() - // console.log('���������������') - // } else if (this.windState === 2) { - // this.windDir() - // console.log('���������������') - // } setTimeout(() => { - this.change(this.changeColor) + console.log('change', isFirst) + if (isFirst) { + this.windData() + this.deviceMaker() + } else { + 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������������') - // console.log(this.weidu) - // console.log(this.jingdu) var map = L.map('mapContent', { + inertia: false, minZoom: 2, maxZoom: 18, center: [this.weiduNew, this.jingduNew], zoom: 14, + renderer: L.canvas(), zoomControl: false, // ������������ attributionControl: false, // ���������������logol crs: L.CRS.EPSG3857 // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84 @@ -1615,10 +1282,18 @@ L.tileLayer( 'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}' ).addTo(map) - // 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) this.map = map // data��������������� + // const that = this + // this.map.on('mousedown', function(ev) { + // const res = that.findLayer('wmsid') + // if (res) { + // that.map.removeLayer(res) + // } + // }) + // this.map.on('mouseup', function(ev) { + // console.log('1111111') + // that.canvasWind(this.windJsonData) + // }) window.map = map }, // ������������������������ @@ -1659,18 +1334,14 @@ // ������������������ // this.toggleWindState() if (this.windState === 1) { - this.initData() + this.deviceMaker() + this.windData() } else if (this.windState === 2) { this.windDir() } }, // ��������������������� initData() { - // console.log('������������') - // const that = this - // ������������������������ - // console.log(this.monitorPointId) - // ������������������ if (this.map) { this.map.eachLayer(function(layer) { // ��������������������������� @@ -1684,11 +1355,7 @@ }) } this.deviceMaker() - // console.log('������������������') - // $.ajaxSettings.async = false - // for (let i = 0; i < this.monitorPointIds.length; i++) { this.windData() - // } }, // ��������������� windData() { @@ -1702,59 +1369,54 @@ } }) .then((res) => { - // console.log('���������������') - // console.log(res) - // if (res.data[0][0].data.length === 0) { - // this.noneData = true - // } - // ������������������ - // var data2 = res.data[0] - // data2[1].header.parameterNumberName = 'northward_wind' - // data2[0].header.parameterUnit = 'm.s-1' - // data2[1].header.parameterUnit = 'm.s-1' - // data2[0].header.dx = 0.00234842479 - // data2[1].header.dx = 0.00234842479 - // 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]) + this.windJsonData = res.data[0] + return this.windJsonData }) .catch((err) => { console.log(err) }) + }, + canvasWind(data) { + const res = this.findLayer('wmsid') + if (res) { + this.map.removeLayer(res) + } + var velocityLayer = L.velocityLayer({ + displayValues: false, // ��������������������������������������������������� + id: 'wmsid', + displayOptions: { + // ������������������ + // velocityType: 'Global Wind', + velocityType: 'GBR Wind', + displayPosition: 'bottomleft', + displayEmptyString: 'No wind data' + }, + data: data, // ������ ��������������� + // 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) // ��������������� + setTimeout(() => { + this.loading = false + }, 1000) }, // ������������������������������������������������������������������ alertData(n1, n2) { @@ -1831,6 +1493,67 @@ } this.showOrHidden = !this.showOrHidden }, + // ������������������ + stateControlStation() { + // this.$axios.get('monitorPoint/queryStateControlStation', { + this.$request({ + url: '/govMonitorPoint/queryStateControlStation', + method: 'get', + params: { + regionCode: 130900, + sensorCode: 'a34002' + } + }) + .then((res) => { + // console.log('���������������') + // console.log(res) + var gkData = res.data + var group = L.layerGroup().addTo(this.map) + for (let i = 0; i < gkData.length; i++) { + var glat = gkData[i].latitude + var glng = gkData[i].longitude + var gIcon = L.icon({ + iconUrl: require('@/assets/icon/gk.png'), + // iconUrl:require('@/assets/images/tl_PM10.png'), + iconSize: [55, 55], + iconAnchor: [13, 21], + className: 'my-device' + }) + // ��������������������� + L.marker([glat, glng], { + icon: gIcon + }).addTo(group) + var myIcon = L.divIcon({ + html: gkData[i].data, + className: 'my-div-icon-g', + iconSize: 30 + }) + L.marker([glat, glng], { + icon: myIcon + }).addTo(group) + } + }) + .catch((err) => { + console.log(err) + }) + }, + // ������������������������ + toggleWindState() { + if (this.ws) { + this.ws.close() + } + if (this.windState === 2) { + this.windState = 1 + this.windStateText = '���������' + this.initData() + // console.log(this.windState) + } else if (this.windState === 1) { + this.windState = 2 + this.windStateText = '���������' + this.windDir() + // console.log(this.windState) + } + }, closeAlarmTableVisible() { this.$store.state.alarmTableVisible = false } -- Gitblit v1.8.0