From d895c51712f665a9834cac2a447f5405a0367920 Mon Sep 17 00:00:00 2001 From: jiangzhongzhi Date: Thu, 6 Jul 2023 09:26:04 +0800 Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E4=B8=80=E4=B8=AA=E7=B2=BE=E7=A1=AE?= =?UTF-8?q?=E7=9A=84=E5=9C=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../meteorological/monitor/drought/index.vue | 77 ++++++++++++++----- 1 file changed, 56 insertions(+), 21 deletions(-) diff --git a/src/views/meteorological/monitor/drought/index.vue b/src/views/meteorological/monitor/drought/index.vue index 799b5ac..881f144 100644 --- a/src/views/meteorological/monitor/drought/index.vue +++ b/src/views/meteorological/monitor/drought/index.vue @@ -646,6 +646,7 @@ const onclick = () => { //选择范围 // getmeteorologicalFreezes(); meteorologicals() + }; const meteorologicals = () => { for (const i in circleLayer.value) { @@ -666,33 +667,67 @@ const meteorologicals = () => { for (const i in informationData.value) { const centerLonLat = [parseFloat(informationData.value[i].msLongitude), parseFloat(informationData.value[i].msLatitude)]; - const radius = radio1.value / map.getView().getProjection().getMetersPerUnit(); // 将半径从米转换为度(EPSG:4326) - const circleGeometry = new ol.geom.Circle(centerLonLat, radius); - // 创建一个矢量图层 - circleLayer.value[i] = new ol.layer.Vector({ - source: new ol.source.Vector({ - features: [ - new ol.Feature({ - geometry: circleGeometry - }) - ] - }), - style: new ol.style.Style({ - // fill: new ol.style.Fill({ - // color: 'rgba(255,255,255,0.5)' - // }), - stroke: new ol.style.Stroke({ - color: 'rgb(255,255,0)', // 设置红色边框 - width: 2 - }), + //精确的圆 + const points = 128; + const circleCoords = []; + for (let i = 0; i < points; i++) { + const angle = 2 * Math.PI * i / points; + const coordinate = ol.sphere.computeDestinationPoint(centerLonLat, radio1.value, angle); + circleCoords.push(coordinate); + } +// 创建一个具有给定半径的圆形 + const circleFeature = new ol.Feature({ + geometry: new ol.geom.Polygon([circleCoords]) + }); + +// 为圆形创建一个样式 + const circleStyle = new ol.style.Style({ + + stroke: new ol.style.Stroke({ + color: 'rgb(255,255,0)', + width: 2 }) }); - // 添加矢量图层到地图 +// 将圆形添加到矢量层 + circleLayer.value[i] = new ol.layer.Vector({ + source: new ol.source.Vector({ + features: [circleFeature] + }), + style: circleStyle + }); if(informationData.value[i].warning!=='无灾害'){ map.addLayer(circleLayer.value[i]); } + //不精确的圆 + // const radius = radio1.value / map.getView().getProjection().getMetersPerUnit(); // 将半径从米转换为度(EPSG:4326) + // const circleGeometry = new ol.geom.Circle(centerLonLat, radius); + // // 创建一个矢量图层 + // circleLayer.value[i] = new ol.layer.Vector({ + // source: new ol.source.Vector({ + // features: [ + // new ol.Feature({ + // geometry: circleGeometry + // }) + // ] + // }), + // style: new ol.style.Style({ + // // fill: new ol.style.Fill({ + // // color: 'rgba(255,255,255,0.5)' + // // }), + // stroke: new ol.style.Stroke({ + // color: 'rgb(255,255,0)', // 设置红色边框 + // width: 2 + // }), + // }) + // }); + // // 添加矢量图层到地图 + // if(informationData.value[i].warning!=='无灾害'){ + // map.addLayer(circleLayer.value[i]); + // } + + // 创建一个点几何对象,使用EPSG:4326投影坐标 const iconPointGeometry = new ol.geom.Point(centerLonLat); // 创建一个Feature,并将其几何对象设置为刚创建的点 @@ -722,7 +757,7 @@ const meteorologicals = () => { }) - meteorologicalsPeople({flag:1,alertRange:radio1.value}).then(res => { + meteorologicalsPeople({flag:1,alertRange:radio1.value,data:value.value}).then(res => { peopleData.value = res.data for (const i in peopleData.value) {