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/Map1.vue |  163 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 163 insertions(+), 0 deletions(-)

diff --git a/src/components/Map1.vue b/src/components/Map1.vue
new file mode 100644
index 0000000..11737f5
--- /dev/null
+++ b/src/components/Map1.vue
@@ -0,0 +1,163 @@
+<template>
+  <div id="mapContent"></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: []
+    }
+  },
+  methods: {
+    initMap () {
+      console.log(this.jingdu)
+      console.log(this.weidu)
+      let map = L.map('mapContent', {
+        minZoom: 2,
+        maxZoom: 18,
+        center: [this.weidu, this.jingdu],
+        zoom: 18,
+        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
+    }
+  },
+  created () {
+    $.getJSON('http://192.168.1.102:8080/screen/allDevice', (data) => {
+      console.log('������������������������')
+      this.latlng = data.latlng
+      // console.log(this.latlng)
+      // console.log(data.latlng[1].monitorPointId)
+      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: markerIcon,
+          iconSize: [25, 41],
+          iconAnchor: [13, 21]
+        })
+        // ���������������������
+        var marker = L.marker([lat, lng], {
+          icon: blueIcon
+        }).addTo(group)
+        // ���������������������������
+        marker.on('click', (e) => {
+          // console.log('������ID' + data.latlng[i].monitorPointId)
+          // console.log(e)
+          // console.log(group)
+          map.eachLayer(function (layer) {
+            // map.overlayremove(layer)
+            // if (!layer._container && ('' + jQuery(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
+            //   map.removeLayer(layer)
+            //   layer.remove()
+            // }
+            if (layer._canvas) {
+              layer.remove()
+            }
+          })
+          // map.removeLayer(layer)
+          $.getJSON('http://192.168.1.102:8080/screen/windAndDeviceData', {'monitorPointId': data.latlng[i].monitorPointId}, function (data) {
+            // console.log(data)
+            // for (let i = 0; i < data.length; i++) {
+            // map.setData(data[0])
+            var velocityLayer = L.velocityLayer({
+              displayValues: true, // ���������������������������������������������������
+              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']
+            })
+            // console.log(velocityLayer)
+            // velocityLayer.setData(data[0])
+            velocityLayer.addTo(map)// ���������������
+            // console.log(map)
+            // }
+          })
+          // ������������������������������
+          // ������api���������������������code������������������������������������������
+        })
+      }
+    })
+
+    $.getJSON('http://192.168.1.102:8080/screen/windAndDeviceData', {'monitorPointId': 539}, (data) => {
+      console.log('������������������������')
+      // console.log(data)
+      this.jingdu = data[1]
+      this.weidu = data[2]
+      this.initMap()
+      // for (let i = 0; i < data.length; i++) {
+      var velocityLayer = L.velocityLayer({
+        displayValues: true, // ���������������������������������������������������
+        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)// ���������������
+      // }
+    })
+  },
+  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%;
+}
+</style>

--
Gitblit v1.8.0