feat:对接果园接口，修改地图样式

src/api/modules/home.js

@@ -4,5 +4,9 @@ module.exports = {
   getYellowList: {
     url: config.base_url + "temp_yellow_board/list",
     type: "get",
-  }
+  },
+  userGarden: {
+    url: config.base_dev_url + "garden/listByUser?key="+config.mini_key,
+    type: "get",
+  },
 };

src/components/fnHeader.vue

@@ -1,216 +1,229 @@
 <template>
-  <div class="header">
-    <div class="title">
-      <img class="logo" src="@/assets/images/common/logo.png" alt="" />
-      <span>飞鸟智慧巡园平台</span>
-      <img class="logo-icon" src="@/assets/images/common/logo-icon.png" alt="" />
+    <div class="header">
+        <div class="title">
+            <img class="logo" src="@/assets/images/common/logo.png" alt="" />
+            <span>飞鸟智慧巡园平台</span>
+            <img class="logo-icon" src="@/assets/images/common/logo-icon.png" alt="" />
+        </div>
+        <div class="focus-farm" v-show="!hideSwitch">
+            <el-select
+                v-model="farmVal"
+                placeholder="我的关注农场"
+                style="width: 189px"
+                popper-class="focus-farm-select"
+                @change="toggleFarm"
+            >
+                <el-option v-for="item in options" :key="item.organId" :label="item.name" :value="item.organId" />
+            </el-select>
+        </div>
+        <div class="date" v-show="showDate">
+            <el-icon size="25"><MoreFilled /></el-icon>
+            <div class="time">
+                <div>{{ time }}</div>
+                <span>{{ getCurrentFormattedTime("date") }} {{ getCurrentDayOfWeek() }}</span>
+            </div>
+        </div>
     </div>
-    <div class="focus-farm" v-show="!hideSwitch">
-        <el-select
-            v-model="farmVal"
-            placeholder="我的关注农场"
-            style="width: 189px"
-            popper-class="focus-farm-select"
-            @change="toggleFarm"
-        >
-            <!-- <el-option label="我的关注农场" :value="0" /> -->
-            <el-option label="荔博园" :value="1" />
-            <el-option label="井冈红糯基地" :value="2" />
-        </el-select>
+    <!-- 四个方向的阴影 -->
+    <div class="page-shadow" v-show="!hideShadow">
+        <div class="page-bg bg-top"></div>
+        <div class="page-bg bg-right"></div>
+        <div class="page-bg bg-bottom"></div>
+        <div class="page-bg bg-left"></div>
     </div>
-    <div class="date" v-show="showDate">
-      <el-icon size="25"><MoreFilled /></el-icon>
-      <div class="time">
-        <div>{{time}}</div>
-        <span>{{getCurrentFormattedTime('date')}} {{getCurrentDayOfWeek()}}</span>
-      </div>
-    </div>
-  </div>
-  <!-- 四个方向的阴影 -->
-  <div class="page-shadow" v-show="!hideShadow">
-    <div class="page-bg bg-top"></div>
-    <div class="page-bg bg-right"></div>
-    <div class="page-bg bg-bottom"></div>
-    <div class="page-bg bg-left"></div>
-  </div>
 </template>
 
 <script setup>
 import { onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router";
+import { convertPointToString } from "@/utils/index";
 
 const router = useRouter();
 const props = defineProps({
-  showDate:{
-    type:Boolean,
-    defalut:false
-  },
-  hideSwitch:{
-    type:Boolean,
-    defalut:false
-  },
-  hideShadow: {
-    type:Boolean,
-    defalut:false
-  }
-})
+    showDate: {
+        type: Boolean,
+        defalut: false,
+    },
+    hideSwitch: {
+        type: Boolean,
+        defalut: false,
+    },
+    hideShadow: {
+        type: Boolean,
+        defalut: false,
+    },
+});
 
-const farmVal = ref(sessionStorage.getItem('farmId')*1 || '')
+const farmVal = ref(sessionStorage.getItem("farmId") * 1 || "");
 const toggleFarm = (val) => {
-    sessionStorage.setItem('farmId',farmVal.value)
+    sessionStorage.setItem("farmId", farmVal.value);
     router.push({ name: "Home" });
 };
 
 function getCurrentFormattedTime(type) {
     const now = new Date();
- 
+
     const year = now.getFullYear();
-    const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero based
-    const day = String(now.getDate()).padStart(2, '0');
-    const hours = String(now.getHours()).padStart(2, '0');
-    const minutes = String(now.getMinutes()).padStart(2, '0');
-    const seconds = String(now.getSeconds()).padStart(2, '0');
-    if(type==='date'){
-      return `${year}.${month}.${day}`;
-    }else{
-      return `${hours}:${minutes}:${seconds}`;
+    const month = String(now.getMonth() + 1).padStart(2, "0"); // Months are zero based
+    const day = String(now.getDate()).padStart(2, "0");
+    const hours = String(now.getHours()).padStart(2, "0");
+    const minutes = String(now.getMinutes()).padStart(2, "0");
+    const seconds = String(now.getSeconds()).padStart(2, "0");
+    if (type === "date") {
+        return `${year}.${month}.${day}`;
+    } else {
+        return `${hours}:${minutes}:${seconds}`;
     }
 }
 
 function getCurrentDayOfWeek() {
     const now = new Date();
     const dayOfWeek = now.getDay();
-    const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
- 
+    const daysOfWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+
     return daysOfWeek[dayOfWeek];
 }
 
 function formatTimeToHHmmss(date) {
-  const hours = String(date.getHours()).padStart(2, '0');
-  const minutes = String(date.getMinutes()).padStart(2, '0');
-  const seconds = String(date.getSeconds()).padStart(2, '0');
- 
-  return `${hours}.${minutes}.${seconds}`;
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0");
+
+    return `${hours}.${minutes}.${seconds}`;
 }
 
-const time = ref("21:05:46")
-const timer = ref(null)
-onMounted(()=>{
-  timer.value = setInterval(()=>{
-    time.value = getCurrentFormattedTime(new Date())
-  },1000)
-})
+const options = ref([]);
+const userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
+const getGardenList = () => {
+    const location = convertPointToString(userInfo.location);
+    const params = {
+        userId: userInfo.userId,
+        show3dFarm: true,
+        location: "113.746646,22.970229",
+    };
+    VE_API.home.userGarden(params).then((res) => {
+        options.value = res.data;
+    });
+};
+
+const time = ref("");
+const timer = ref(null);
+onMounted(() => {
+    getGardenList();
+    timer.value = setInterval(() => {
+        time.value = getCurrentFormattedTime(new Date());
+    }, 1000);
+});
 
-onUnmounted(()=>{
-  timer.value = null
-})
+onUnmounted(() => {
+    timer.value = null;
+});
 </script>
 
 <style lang="scss" scoped>
 .header {
-  width: 100%;
-  height: 74px;
-  display: flex;
-  justify-content: space-between;
-  box-sizing: border-box;
-  pointer-events: all;
-  position: relative;
-
-  .title {
     width: 100%;
-    height: 100%;
-    font-size: 24px;
-    letter-spacing: 2px;
-    padding-left: 20px;
+    height: 74px;
     display: flex;
-    align-items: center;
+    justify-content: space-between;
     box-sizing: border-box;
-    background: url("@/assets/images/common/header-bg.png") no-repeat center
-      center / 100% 100%;
-      .logo{
-        width: 23px;
-        height: 26px;
-      }
-      .logo-icon{
-        width: 33px;
-        height: 12px;
-      }
-    span {
-      margin: 0 5px;
-      font-family: "PangMenZhengDao";
-    }
-  }
-  .focus-farm {
-    position: absolute;
-    right: 192px;
-    top: 23px;
-    ::v-deep {
-        .el-select__wrapper {
-            background: rgba(255, 212, 137, 0.2);
-            box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
-            height: 50px;
-            line-height: 50px;
-            .el-select__caret {
-                color: #ffd489;
-            }
+    pointer-events: all;
+    position: relative;
+
+    .title {
+        width: 100%;
+        height: 100%;
+        font-size: 24px;
+        letter-spacing: 2px;
+        padding-left: 20px;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        background: url("@/assets/images/common/header-bg.png") no-repeat center center / 100% 100%;
+        .logo {
+            width: 23px;
+            height: 26px;
+        }
+        .logo-icon {
+            width: 33px;
+            height: 12px;
         }
-        .el-select__placeholder {
-            color: #f7be5a;
-            font-size: 20px;
+        span {
+            margin: 0 5px;
             font-family: "PangMenZhengDao";
-            text-align: center;
         }
     }
-  }
-  .date {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    right: 30px;
-    top: 24px;
-    .time{
-      margin-left: 14px;
-      line-height: 18px;
-      div{
-        font-family: "PangMenZhengDao";
-        letter-spacing: 1px;
-        font-size: 16px;
-      }
-      span{
-        font-size: 11px;
-        font-family: 'SOURCEHANTIFINE';
-      }
+    .focus-farm {
+        position: absolute;
+        right: 192px;
+        top: 23px;
+        ::v-deep {
+            .el-select__wrapper {
+                background: rgba(255, 212, 137, 0.2);
+                box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
+                height: 50px;
+                line-height: 50px;
+                .el-select__caret {
+                    color: #ffd489;
+                }
+            }
+            .el-select__placeholder {
+                color: #f7be5a;
+                font-size: 20px;
+                font-family: "PangMenZhengDao";
+                text-align: center;
+            }
+        }
+    }
+    .date {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        right: 30px;
+        top: 24px;
+        .time {
+            margin-left: 14px;
+            line-height: 18px;
+            div {
+                font-family: "PangMenZhengDao";
+                letter-spacing: 1px;
+                font-size: 16px;
+            }
+            span {
+                font-size: 11px;
+                font-family: "SOURCEHANTIFINE";
+            }
+        }
     }
-  }
 }
 // 阴影样式
-.page-bg{
-  position: fixed;
-  z-index: -1;
+.page-bg {
+    position: fixed;
+    z-index: -1;
 }
-.bg-top{
-  top: 0;
-  width: 100%;
-  height: 200px;
-  background: linear-gradient( 0deg, rgba(0, 21, 31,0), #00151f);
+.bg-top {
+    top: 0;
+    width: 100%;
+    height: 200px;
+    background: linear-gradient(0deg, rgba(0, 21, 31, 0), #00151f);
 }
-.bg-right{
-  right: 0;
-  width: 600px;
-  height: 100%;
-  background: linear-gradient( 90deg, rgba(0, 21, 31,0), rgb(0, 21, 31,0.7));
+.bg-right {
+    right: 0;
+    width: 600px;
+    height: 100%;
+    background: linear-gradient(90deg, rgba(0, 21, 31, 0), rgb(0, 21, 31, 0.7));
 }
-.bg-bottom{
-  bottom: 0;
-  width: 100%;
-  height: 200px;
-  background: linear-gradient( 180deg, rgba(0, 21, 31,0), rgb(0, 21, 31,0.7));
+.bg-bottom {
+    bottom: 0;
+    width: 100%;
+    height: 200px;
+    background: linear-gradient(180deg, rgba(0, 21, 31, 0), rgb(0, 21, 31, 0.7));
 }
-.bg-left{
-  left: 0;
-  width: 600px;
-  height: 100%;
-  background: linear-gradient( 270deg, rgba(0, 21, 31,0), rgb(0, 21, 31,0.7));
+.bg-left {
+    left: 0;
+    width: 600px;
+    height: 100%;
+    background: linear-gradient(270deg, rgba(0, 21, 31, 0), rgb(0, 21, 31, 0.7));
 }
 </style>
 
@@ -234,4 +247,4 @@ onUnmounted(()=>{
         border-color: rgba(255, 212, 137, 0.3);
     }
 }
-</style>
+</style>

src/components/navigation.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="navigation yes-events">
-        <el-select class="select" v-model="value" size="large">
+        <el-select class="select" v-model="value" size="large" popper-class="focus-farm-select">
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div class="tabs" v-for="(ele, idx) in list" :key="idx">
@@ -42,12 +42,14 @@ const options = [
     }
 ];
 
+const emit = defineEmits(["handleTab","handleTabItem"])
+
 const checkedChildren = ref([]);
 const childrenData = ref([]);
 const handleCheckedChange = (e) => {
     checkedChildren.value = [e[e.length -1]];
+    emit('handleTabItem',checkedChildren.value[0])
 };
-const emit = defineEmits(["handleTab"])
 
 const active = ref(0);
 const handleTab = ({ id, name,children }) => {

src/utils/index.js

@@ -183,3 +183,24 @@ export function parseMultiPolygon(multipolygonStr,type="MULTIPOLYGON") {
  
     return result;
 }
+
+//POINT (113.61702297075017 23.584863449735067) 转换为 113.61702297075017,23.584863449735067 方法
+export function convertPointToString(pointString) {
+    // 去除字符串两端的空格（如果有的话）
+    pointString = pointString.trim();
+   
+    // 使用正则表达式匹配括号内的数字，并捕获它们
+    const match = pointString.match(/POINT\s*\(([\d.]+)\s+([\d.]+)\)/);
+   
+    if (match) {
+      // 提取经度和纬度
+      const longitude = match[1];
+      const latitude = match[2];
+   
+      // 将它们用逗号连接起来并返回
+      return `${longitude},${latitude}`;
+    } else {
+      // 如果没有匹配到，返回原始字符串或抛出错误（根据需要）
+      return pointString; // 或者 throw new Error('Invalid point string format');
+    }
+  }

src/utils/map.js

@@ -92,8 +92,8 @@ export const newRegionFeature = (data)=>{
 }
 
 
-export const newPoint = (data,dataName)=>{
-    let point = new WKT().readGeometry(data[dataName])
+export const newPoint = (data)=>{
+    let point = new WKT().readGeometry(data["wkt"] || data["point"])
     let feature = new Feature({
         geometry: point
     });

src/views/home/index.vue

@@ -2,7 +2,7 @@
   <div class="base-container no-events">
     <fnHeader showDate></fnHeader>
     <div class="content">
-      <navigation @handleTab="handleTab"></navigation>
+      <navigation @handleTab="handleTab" @handleTabItem="handleTabItem"></navigation>
       <div class="left yes-events">
         <tool-list
           direction="left"
@@ -146,7 +146,7 @@ onMounted(() => {
   // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
   samplePointLayer = new SamplePointLayer(homeMap.kmap.map, currentFarm, currentRegion)
   // regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
-  blueRegionLayer = new BlueRegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
+  blueRegionLayer = new BlueRegionLayer(homeMap.kmap)
 
   getYellow()
   getFarmLog()
@@ -157,15 +157,15 @@ const blueList = ref([])
 const getBlueRegionList = () =>{
   VE_API.farm.blueRegionList({farmId:766,regionId:2}).then(({ data }) => {
       blueList.value = data.map(item =>{
-        let color = '#C7C7C7' //失效区域
+        let color = 'rgba(255, 255, 255, 0.5)' //失效区域
         if(item.status===2){ //物候期风险
-          color = '#34C759'
+          color = 'rgba(63, 255, 53, 0.5)'
         }
         if(item.status===3){ //生长异常
-          color = '#ffff00'
+          color = 'rgba(255, 252, 61, 0.5)'
         }
         if(item.status===4){ //病虫害
-          color = '#f33349'
+          color = 'rgba(255, 73, 73, 0.5)'
         }
         return {
           ...item,
@@ -176,6 +176,7 @@ const getBlueRegionList = () =>{
   });
 }
 
+//选项卡事件监听
 const handleTab = ({name,id}) =>{
   console.log('name',name,id);
     if(id===0){
@@ -184,6 +185,10 @@ const handleTab = ({name,id}) =>{
       getFarmIndexReport()
     }
 }
+//选项卡子项事件监听
+const handleTabItem = () =>{
+
+}
 
 const active = ref(0)
 const reportData = ref({})

src/views/home/map/blueRegionLayer.js

@@ -6,9 +6,8 @@ import { newAreaFeature } from "@/utils/util";
  * @description 地图层对象
  */
 class BlueRegionLayer {
-    constructor(map, farm) {
+    constructor(map) {
         let that = this;
-        this.farmId = farm.id;
         this.vectorStyle = new KMap.VectorStyle();
 
         this.blueRegionLayer = new KMap.VectorLayer("blueRegionLayer", 99, {
@@ -20,17 +19,16 @@ class BlueRegionLayer {
     }
 
     initData(arr) {
-        let that = this
-        if (that.blueRegionLayer) {
-            that.blueRegionLayer.source.clear();
+        if (this.blueRegionLayer) {
+            this.blueRegionLayer.source.clear();
         }
         for (let item of arr) {
             let feature = newAreaFeature(item);
             let strokeColor = "#FFFFFF";
             feature.setStyle(this.vectorStyle.getPolygonStyle(item.color, strokeColor, 1));
-            that.blueRegionLayer.addFeature(feature);
+            this.blueRegionLayer.addFeature(feature);
         }
-        // that.kmap.fit(that.blueRegionLayer.source.getExtent(), [0, 0, 0, 0]);
+        this.kmap.fit(this.blueRegionLayer.source.getExtent(), [0, 0, 0, 0]);
     }
 }
 

src/views/home/map/regionLayer.js

@@ -11,7 +11,7 @@ import { unByKey } from "ol/Observable";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import { Vector as VectorSource } from "ol/source";
-import { newRegionFeature } from "../../zhgl/map";
+import {newRegionFeature} from "@/utils/map";
 import Stroke from "ol/style/Stroke";
 
 /**

src/views/home/map/samplePointLayer.js

@@ -11,7 +11,7 @@ import {unByKey} from "ol/Observable";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import {Cluster, Vector as VectorSource} from "ol/source";
-import {newPoint} from "../../zhgl/map";
+import {newPoint} from "@/utils/map";
 import eventBus from "@/api/eventBus";
 
 /**

src/views/varietyMap/varietyMap.js

@@ -4,7 +4,7 @@ import * as KMap from "@/utils/ol-map/KMap";
 import Stroke from "ol/style/Stroke";
 import * as util from "@/common/ol_common.js";
 import VectorSource from 'ol/source/Vector';
-import {newPoint} from "../zhgl/map";
+import {newPoint} from "@/utils/map";
 import Feature from "ol/Feature";
 import Draw from 'ol/interaction/Draw';
 import { Style, Fill, Circle as CircleStyle } from 'ol/style';

src/views/zhgl/map.js

@@ -1,192 +0,0 @@
-import VectorSource from 'ol/source/Vector.js';
-import WKT from 'ol/format/WKT.js';
-import Feature from 'ol/Feature.js';
-import store from '@/store'
-import VectorLayer from 'ol/layer/Vector.js';
-import Draw from "ol/interaction/Draw";
-import Text from "ol/style/Text";
-import Icon from "ol/style/Icon";
-import {Circle, Fill, Stroke, Style} from 'ol/style.js';
-
-/*
- * @Author: your name
- * @Date: 2021-01-12 09:38:09
- * @LastEditTime: 2022-01-20 10:37:39
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \vue3-element-admin\src\utils\map.js
- */
-/**
- * 过滤不应该出现在属性列表的字段
- * @param data
- * @param key
- * @returns {boolean}
- */
-function filterWktProp(data,key){
-    if(key == "regionWkt" || key == "wkt" || key == "pointWkt" || key == "geom" || !data[key]){
-        return false
-    }
-    return true
-}
-
-export const newAreaFeature = (data)=>{
-    let geom = new WKT().readGeometry(data["wkt"])
-    let feature = new Feature({
-        geometry: geom
-    });
-    feature.set("nodeType","area");
-    feature.setId(data.id)
-    for(let key in data){
-        if(filterWktProp(data,key)){
-            feature.set(key,data[key])
-        }
-    }
-    return feature;
-}
-
-export const newAreaPoint = (data)=>{
-    let point = new WKT().readGeometry(data["pointWkt"])
-    let feature = new Feature({
-        geometry: point
-    });
-    feature.set("nodeType","area");
-    feature.set("isPoint",1)
-    for(let key in data){
-        if(filterWktProp(data,key)){
-            feature.set(key,data[key])
-        }
-    }
-    return feature;
-}
-
-export const newPolymerFeature = (data)=>{
-    let geom = new WKT().readGeometry(data["geom"])
-    let feature = new Feature({
-        geometry: geom
-    });
-    feature.set("nodeType","polymer");
-    feature.setId(data.id)
-    for(let key in data){
-        if(filterWktProp(data,key)){
-            feature.set(key,data[key])
-        }
-    }
-    return feature;
-}
-
-export const newRegionFeature = (data, geomKey)=>{
-    let geom = new WKT().readGeometry(data[geomKey || "regionWkt"])
-    let feature = new Feature({
-        geometry: geom
-    });
-    feature.set("nodeType","region");
-    feature.setId(data.id)
-    for(let key in data){
-        if(filterWktProp(data,key)){
-            feature.set(key,data[key])
-        }
-    }
-    return feature;
-}
-
-
-export const newPoint = (data)=>{
-    let point = new WKT().readGeometry(data["wkt"] || data["point"])
-    let feature = new Feature({
-        geometry: point
-    });
-    feature.setId(data.id)
-    feature.set("nodeType","tree")
-    for(let key in data){
-        if(filterWktProp(data,key)){
-            feature.set(key,data[key])
-        }
-    }
-    return feature;
-}
-
-/**
- * 按treeId分组
- * @param data
- * @returns {[]}
- */
-export const groupByTreeId = (data) => {
-    let res = []
-    let cur = {treeId:-1,data:[]}
-    for(let item of data){
-        if(cur.treeId != item.treeId){
-            cur = {treeId: item.treeId, data:[]}
-            res.push(cur)
-        }
-        cur.data.push(item)
-    }
-    for(let item of res){
-        item.data.sort((a,b) => {
-            return Date.parse(b.uploadDate) - Date.parse(a.uploadDate)
-        })
-    }
-    return res
-}
-
-/**
- * 按createDate分组
- * @param data
- * @returns {[]}
- */
-export const groupByCreateDate = (data) => {
-    let res = {}
-    let arr = []
-    for(let item of data){
-        if(res[item.uploadDate]){
-            res[item.uploadDate].push(item)
-        }else{
-            res[item.uploadDate] = [item]
-            arr.push({uploadDate:item.uploadDate, data: res[item.uploadDate]})
-        }
-    }
-    arr.sort((a,b) => {
-        return Date.parse(b.uploadDate) - Date.parse(a.uploadDate)
-    })
-    return arr
-}
-
-
-export const setPeriodAttr = (periodMap, data) => {
-    for(let item of data){
-        item["attrs"] = []
-        let periodObj = periodMap[item.periodId]
-        item["periodName"] = periodObj.name
-        for(let i=0;i<periodObj.attrFields.length;i++){
-            item["attrs"].push({name:periodObj.attrNames[i],field:periodObj.attrFields[i]})
-        }
-    }
-}
-
-
-export const bboxToFeature = ( x1,  y1,  x2,  y2) => {
-    let wkt = "POLYGON (("+x1+" "+y1+", "+x1+" "+y2+", "+x2+" "+y2+", "+x2+" "+y1+", "+x1+" "+y1+"))";
-    let feature = new Feature({
-        geometry: new WKT().readGeometry(wkt)
-    });
-    return feature
-}
-/**
- * 红框样式
- * @returns {Style}
- */
-export const redBoxStyle = ()=>{
-    const fill = new Fill({
-        color: 'rgba(255,255,255,0.1)',
-    });
-    const stroke = new Stroke({
-        color: '#f5024f',
-        width: 0.5,
-    });
-    let  style = new Style({
-        fill: fill,
-        stroke: stroke,
-    })
-    return style
-}
-
-