缓冲区半径

src/views/dashboard/OnePic/components/map/index.vue

@@ -18,6 +18,12 @@
         </tr>
       </table>
     </div>
+	<div class="choose">
+		缓冲半径
+		<a-space direction="vertical">
+			<a-radio-group v-model:value="distance" :options="plainOptions" />
+		</a-space>
+	</div>
   </div>
 </template>
 <script setup>
@@ -61,6 +67,8 @@
   const layerGroups = ref();
   let markerClusterLayer = '';
   const poiLayer = ref(null);
+  const plainOptions = ref(['1km', '3km', '5km']);
+  const distance = ref('1km');
 
   function initMap() {
     // 23.125178, 113.280637
@@ -193,7 +201,10 @@
     // BufferOp
     const reader = new WKTReader();
     const feature = reader.read('POINT (' + point3857[0] + ' ' + point3857[1] + ')');
-    let circle = BufferOp.bufferOp(feature, 1000);
+
+	let jl = distance?distance.value:1;
+	jl = jl.replace('km', '');
+    let circle = BufferOp.bufferOp(feature, jl*1000);
 
     const writer = new WKTWriter();
     let wkt = writer.write(circle);
@@ -305,4 +316,24 @@
   .popu {
     padding: 10px 0;
   }
+  .choose{
+    padding: 12px;
+	position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 230px;
+    height: 80px;
+    text-align: center;
+    font-size: 16px;
+    z-index: 999;
+    background: linear-gradient(135deg, rgba(1, 16, 45, 0.8), rgba(27, 93, 192, 0.52));
+    box-shadow: inset 0px 0px 10px 0px rgba(0, 201, 216, 0.5);
+	line-height: 30px;
+  }
+
+</style>
+<style lang="less">
+  .choose .ant-radio-wrapper{
+    color: #fff;
+  }
 </style>