From 83e7d9b7d16c6378256e707e698e5e410841d5de Mon Sep 17 00:00:00 2001
From: chen_xi <276999030@qq.com>
Date: Mon, 30 May 2022 10:37:13 +0800
Subject: [PATCH] cx20220530

---
 src/components/Map.vue |  272 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 272 insertions(+), 0 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
new file mode 100644
index 0000000..bf9aae0
--- /dev/null
+++ b/src/components/Map.vue
@@ -0,0 +1,272 @@
+<template>
+    <div id="mapContent">
+      <div class="noneData" v-if="noneData">������������������������������</div>
+    </div>
+</template>
+
+<script>
+import 'leaflet/dist/leaflet.css'
+import 'leaflet-velocity/dist/leaflet-velocity.css'
+import L from 'leaflet'
+import 'leaflet-velocity/dist/leaflet-velocity'
+import $ from 'jquery'
+// import markerIcon from 'leaflet/dist/images/marker-icon.png'
+// import iconShadow from 'leaflet/dist/images/marker-shadow.png'
+
+export default {
+  data () {
+    return {
+      map: null,
+      code: [],
+      jingdu: 0,
+      weidu: 0,
+      latlng: [],
+      monitorPointId: 0,
+      noneData: false
+    }
+  },
+  methods: {
+    // ���������������������
+    initMap () {
+      let map = L.map('mapContent', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [this.weidu, this.jingdu],
+        zoom: 17,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      L.tileLayer('https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}').addTo(map)
+      this.map = map // data���������������
+      window.map = map
+    },
+    initData () {
+    // ������������������������
+      $.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/windAndDeviceDataByArea', {'monitorPointId': this.monitorPointId}, (data) => {
+        // ������������������
+        map.eachLayer(function (layer) {
+        // ���������������������������
+          if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
+            layer.remove()
+          }
+        })
+        this.jingdu = data[1]
+        this.weidu = data[2]
+        // this.initMap()
+        var velocityLayer = L.velocityLayer({
+          displayValues: false, // ���������������������������������������������������
+          displayOptions: {// ������������������
+            velocityType: 'Global Wind',
+            displayPosition: 'bottomleft',
+            displayEmptyString: 'No wind data'
+          },
+          data: data[0], // ������  ���������������
+          // ������������������������������������������
+          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']
+        })
+        velocityLayer.addTo(map)// ���������������
+      })
+      // ������������������������
+      $.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/allDevice', (data) => {
+        console.log(data.latlng[0].state)
+        console.log('���������������������������')
+        this.latlng = data.latlng
+        var group = L.layerGroup().addTo(this.map)
+        for (let i = 0; i < this.latlng.length; i++) {
+          var lat = this.latlng[i].lat
+          var lng = this.latlng[i].lng
+          var blueIcon = L.icon({
+            iconUrl: '/static/icon/ico' + 0 + data.latlng[i].state + '.png',
+            // iconUrl: markerIcon,
+            iconSize: [45, 45],
+            iconAnchor: [13, 21]
+          })
+          // ���������������������
+          var marker = L.marker([lat, lng], {
+            icon: blueIcon
+          }).addTo(group)
+          // ���������������������������
+          marker.on('click', (e) => {
+            this.noneData = false
+            // console.log('������ID' + data.latlng[i].monitorPointId)
+            // ������������������
+            this.map.eachLayer(function (layer) {
+              // ���������������������������
+              if (layer._canvas) {
+                layer.remove()
+              }
+            })
+            // ������������ID���API���������������������������
+            $.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/windAndDeviceDataByArea', {'monitorPointId': data.latlng[i].monitorPointId}, datas => {
+              this.monitorPointId = data.latlng[i].monitorPointId
+              console.log(data.latlng[i].monitorPointId)
+              console.log(datas)
+              var velocityLayer = L.velocityLayer({
+                displayValues: false, // ���������������������������������������������������
+                displayOptions: {// ������������������
+                  velocityType: 'Global Wind',
+                  displayPosition: 'bottomleft',
+                  displayEmptyString: 'No wind data'
+                },
+                data: datas[0], // ������  ���������������
+                // ������������������������������������������
+                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']
+              })
+              velocityLayer.addTo(this.map)// ���������������
+            })
+          })
+        }
+      })
+      console.log('������������')
+    }
+  },
+  created () {
+    this.monitorPointId = this.$route.query.monitorPointId
+    console.log(this.monitorPointId)
+    // ���������������������
+    $.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/windAndDeviceDataByArea', {'monitorPointId': this.monitorPointId}, (data) => {
+      console.log(data[0][0].data.length === 0)
+      if (data[0][0].data.length === 0) {
+        this.noneData = true
+      }
+      this.jingdu = data[1]
+      this.weidu = data[2]
+      // ���������������������
+      this.initMap()
+      // for (let i = 0; i < data.length; i++) {
+      var velocityLayer = L.velocityLayer({
+        displayValues: false, // ���������������������������������������������������
+        displayOptions: {// ������������������
+          velocityType: 'Global Wind',
+          displayPosition: 'bottomleft',
+          displayEmptyString: 'No wind data'
+        },
+        data: data[0], // ������  ���������������
+        // ������������������������������������������
+        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']
+      })
+      velocityLayer.addTo(map)// ���������������
+      console.log('������������������������������')
+      // }
+    })
+    // ������������������
+    $.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/allDevice', (data) => {
+      console.log(data)
+      console.log('���������������������������')
+      this.latlng = data.latlng
+      var group = L.layerGroup().addTo(this.map)
+      for (let i = 0; i < this.latlng.length; i++) {
+        var lat = this.latlng[i].lat
+        var lng = this.latlng[i].lng
+        var blueIcon = L.icon({
+          iconUrl: '/static/icon/ico' + 0 + data.latlng[i].state + '.png',
+          // iconUrl: markerIcon,
+          iconSize: [45, 45],
+          iconAnchor: [13, 21]
+        })
+        // ���������������������
+        var marker = L.marker([lat, lng], {
+          icon: blueIcon
+        }).addTo(group)
+        // ���������������������������
+        marker.on('click', (e) => {
+          this.noneData = false
+          // console.log('������ID' + data.latlng[i].monitorPointId)
+          // ������������������
+          map.eachLayer(function (layer) {
+          // ���������������������������
+            if (layer._canvas) {
+              layer.remove()
+            }
+          })
+          // ������������ID���API���������������������������
+          $.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/windAndDeviceDataByArea', {'monitorPointId': data.latlng[i].monitorPointId}, datas => {
+            this.monitorPointId = data.latlng[i].monitorPointId
+            console.log(data.latlng[i].monitorPointId)
+            console.log(datas)
+            var velocityLayer = L.velocityLayer({
+              displayValues: false, // ���������������������������������������������������
+              displayOptions: {// ������������������
+                velocityType: 'Global Wind',
+                displayPosition: 'bottomleft',
+                displayEmptyString: 'No wind data'
+              },
+              data: datas[0], // ������  ���������������
+              // ������������������������������������������
+              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']
+            })
+            velocityLayer.addTo(map)// ���������������
+          })
+        })
+      }
+    })
+    // ���60���������������������
+    setInterval(this.initData, 60000)
+  },
+  mounted () {
+    // ���������������������������
+    // map.on('zoomend', function () {
+    //   console.log(map.getZoom())
+    // })
+    // // ���������������������
+    // map.on('moveend', function () {
+    //   console.log(map.getBounds().getNorthWest())
+    //   console.log(map.getBounds().getNorthEast())
+    //   console.log(map.getBounds().getSouthWest())
+    //   console.log(map.getBounds().getSouthEast())
+    // })
+  }
+}
+</script>
+
+<style>
+html,
+body,
+#mapContent {
+  width: 100%;
+  height: 100%;
+}
+.noneData{
+  position: absolute;
+  color: #000;
+  background: #fff;
+  z-index: 999;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%);
+  padding: 20px 50px;
+  /* opacity: 0.5; */
+  font-size: 28px;
+  /* border-radius: 10px; */
+  border:2px solid #FF7F50
+}
+</style>

--
Gitblit v1.8.0