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/Map2.vue | 149 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 149 insertions(+), 0 deletions(-)
diff --git a/src/components/Map2.vue b/src/components/Map2.vue
new file mode 100644
index 0000000..116d777
--- /dev/null
+++ b/src/components/Map2.vue
@@ -0,0 +1,149 @@
+<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: [],
+ weidu: 120.988275,
+ jingdu: 31.431279,
+ latlng: [
+ { lat: 31.431279, lng: 120.988275 },
+ { lat: 23.138604, lng: 113.306835 },
+ { lat: 23.138535, lng: 113.305821 }
+ ]
+ }
+ },
+ methods: {
+ initMap () {
+ let map = L.map('mapContent', {
+ minZoom: 2,
+ maxZoom: 18,
+ center: [this.jingdu, this.weidu],
+ zoom: 15,
+ zoomControl: false,
+ attributionControl: false,
+ crs: L.CRS.EPSG3857
+ })
+ this.map = map // data���������������
+ window.map = map
+ L.tileLayer('http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}').addTo(map)
+ // ������������������
+ var group = L.layerGroup().addTo(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]
+ })
+
+ L.marker([lat, lng], {
+ icon: blueIcon
+ }).addTo(group).bindPopup('���������' + i + '���marker')
+ }
+ // L.marker([this.jingdu, this.weidu]).addTo(map).bindPopup('������������<br>' + '���������' + this.jingdu + '<br>' + '���������' + this.weidu)
+ }
+ },
+ created () {
+ // var hostAndPort = '192.168.1.106:8080'
+ var ws
+ if (typeof (WebSocket) === 'undefined') {
+ alert('������������������������WebSocket')
+ } else {
+ ws = new WebSocket('ws://192.168.1.106:8080/screen/webSocketNew1/' + 1)
+ ws.onopen = function () {
+ }
+
+ // ������������������
+ ws.onmessage = function (msg) {
+ // console.log(msg)
+ // for (let i = 0; i < msg.length; i++) {
+ console.log(JSON.parse(msg.data))
+ var velocityLayer = L.velocityLayer({
+ displayValues: true, // ���������������������������������������������������
+ displayOptions: {// ������������������
+ velocityType: 'Global Wind',
+ displayPosition: 'bottomleft',
+ displayEmptyString: 'No wind data'
+ },
+ data: JSON.parse(msg.data), // ������ ���������������
+ // ������������������������������������������
+ minVelocity: 0, // ��������������������� m/s ���
+ maxVelocity: 15, // ��������������������� m/s ���
+ velocityScale: 0.01, // ��������������� ( ������������������������ )
+ particleAge: 90, // ������������������������������������������
+ lineWidth: 1, // ���������������������
+ particleMultiplier: 1 / 300, // ��������������������� ������������ ���
+ frameRate: 15 // ���������������������
+ })
+ velocityLayer.addTo(map)// ���������������
+ // }
+ }
+ // window.onbeforeunload = function (e) {
+ // var e = window.event || e
+
+ // e.returnValue = ('������������������������������')
+ // ws.onclose = function () {
+ // }
+ // alert(1)
+ // }
+ // ������������
+ /* ws.onclose = function () {
+ }; */
+ // ���������������������
+ ws.onerror = function (error) {
+ console.log(error)
+ }
+ }
+
+ // $.getJSON('http://192.168.1.106:8080/screen/windAndDevbiceData', function (data) {
+ // console.log(111111111111111111111111)
+ // 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[i], // ������ ���������������
+ // // ������������������������������������������
+ // minVelocity: 0, // ��������������������� m/s ���
+ // maxVelocity: 15, // ��������������������� m/s ���
+ // velocityScale: 0.1, // ��������������� ( ������������������������ )
+ // particleAge: 90, // ������������������������������������������
+ // lineWidth: 1, // ���������������������
+ // particleMultiplier: 1 / 300, // ��������������������� ������������ ���
+ // frameRate: 15 // ���������������������
+ // })
+ // velocityLayer.addTo(map)// ���������������
+ // }
+ // })
+ },
+ mounted () {
+ this.initMap()
+ }
+}
+</script>
+
+<style>
+html,
+body,
+#mapContent {
+ width: 100%;
+ height: 100%;
+}
+</style>
--
Gitblit v1.8.0