agriculture-one-map/src/views/workDetail/components/executeBlueRegion.vue

<template>
    <div class="bottom-map" ref="areaRef"></div>
</template>

<script setup>
import Layer from "ol/layer/Vector";
import config from "@/api/config.js";
import { newAreaFeature } from "@/common/util";
import * as KMap from "@/utils/ol-map/KMap";
import Stroke from "ol/style/Stroke";
import * as util from "@/common/ol_common.js";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import { Point } from "ol/geom";
import Feature from "ol/Feature";
import WKT from "ol/format/WKT";
import { onMounted, ref } from "vue";

const props = defineProps({
    executeBlueZones: {
        type: String,
        required: true,
    },
    executeBlueZones: {}
});

const areaRef = ref(null);

const initMap = () => {
    let executeBlueZones = props.executeBlueZones
    let vectorStyle = new KMap.VectorStyle();
    // 位置图标
    let blueRegionLayer = new KMap.VectorLayer("blueRegionLayer", 99999, {
        minZoom: 1,
        maxZoom: 22,
    });
    let level = 16;
    let coordinate = util.wktCastGeom("POINT(113.6142086995688 23.585836479509055)").getFirstCoordinate();
    let kmap = new KMap.Map(areaRef.value, level, coordinate[0], coordinate[1], null, 1, 22, "img", false, false);
    kmap.addLayer(blueRegionLayer.layer);
    let xyz = config.base_img_url + "map/lby/{z}/{x}/{y}.png";
    kmap.addXYZLayer(xyz, { minZoom: 8, maxZoom: 22 }, 2);
    // let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
    // kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);

    
    VE_API.farm.blueRegionList({ farmId: 766 }).then(({ data, code }) => {
        console.log("dat22222a", executeBlueZones);
        for (let item of data) {
          executeBlueZones.map((zone) => {
                if (zone.id === item.blueZoneCode) {
                    item.wkt = item.geom;
                    item.id = item.blueZoneCode;
                    let feature = newAreaFeature(item);
                    blueRegionLayer.addFeature(feature);
                }
            });
        }
        kmap.fit(blueRegionLayer.source.getExtent(), [0, 0, 0, 0]);
        kmap.addLayer(blueRegionLayer.layer);
    });

    // VE_API.temp.tempBlueRegionList().then(({ data, code }) => {
    //     console.log("ddd", data);
    //     for (let item of data) {
    //         let feature = newAreaFeature(item);
    //         let blueRegionLevel = executeBlueRegion.find((executeBlueRegionItem) => {
    //             return executeBlueRegionItem.id === parseInt(item.id);
    //         });
    //         let fillColor = "";
    //         let strokeColor = "#2199F8";
    //         if (blueRegionLevel && blueRegionLevel.level == 1) {
    //             fillColor = strokeColor + "40";
    //             strokeColor += "40";
    //         } else if (blueRegionLevel && blueRegionLevel.level == 2) {
    //             fillColor = strokeColor + "90";
    //             strokeColor += "90";
    //         } else {
    //             fillColor = "rgba(111,110,110,0.50)";
    //             strokeColor = "rgba(111,110,110,0.50)";
    //         }
    //         feature.setStyle(vectorStyle.getPolygonStyle(fillColor, strokeColor, 1));
    //         blueRegionLayer.addFeature(feature);
    //     }
    //     kmap.fit(blueRegionLayer.source.getExtent(), [0, 0, 0, 0]);
    // });
};

const getBlueRegion = (executeBlueZones) => {
};

onMounted(() => {
    initMap();
});
</script>

<style scoped>
.bottom-map {
    width: 100%;
    height: 150px;
    border-radius: 8px;
}
</style>