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