画一个精确的圆

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);
+      const points = 128;
-      // 创建一个矢量图层
+      const circleCoords = [];
-      circleLayer.value[i] = new ol.layer.Vector({
+      for (let i = 0; i < points; i++) {
-        source: new ol.source.Vector({
+        const angle = 2 * Math.PI * i / points;
-          features: [
+        const coordinate = ol.sphere.computeDestinationPoint(centerLonLat, radio1.value, angle);
-            new ol.Feature({
+        circleCoords.push(coordinate);
-              geometry: circleGeometry
+      }
-            })
+// 创建一个具有给定半径的圆形
-          ]
+      const circleFeature = new ol.Feature({
-        }),
+        geometry: new ol.geom.Polygon([circleCoords])
-        style: new ol.style.Style({
+      });
-          // fill: new ol.style.Fill({
+
-          //   color: 'rgba(255,255,255,0.5)'
+// 为圆形创建一个样式
-          // }),
+      const circleStyle = new ol.style.Style({
-          stroke: new ol.style.Stroke({
+
-            color: 'rgb(255,255,0)', // 设置红色边框
+        stroke: new ol.style.Stroke({
-            width: 2
+          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) {