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